TLAssetStore

Interface for storing and managing assets (images, videos, etc.) in tldraw. Provides methods for uploading, resolving, and removing assets from storage.

A TLAssetStore sits alongside the main TLStore and is responsible for storing and retrieving large assets such as images. Generally, this should be part of a wider sync system:

• By default, the store is in-memory only, so TLAssetStore converts images to data URLs
• When using persistenceKey, the store is synced to the browser's local IndexedDB, so TLAssetStore stores images there too
• When using a multiplayer sync server, you would implement TLAssetStore to upload images to e.g. an S3 bucket.

interface TLAssetStore {}

Example

// Simple in-memory asset store
const assetStore: TLAssetStore = {
  async upload(asset, file) {
    const dataUrl = await fileToDataUrl(file)
    return { src: dataUrl }
  },

  async resolve(asset, context) {
    return asset.props.src
  },

  async remove(assetIds) {
    // Clean up if needed
  },
}

Methods

Remove an asset from storage. This is called when the asset is no longer needed, e.g. when the user deletes it from the editor.

Parameters

TLAssetId[]

Returns

Promise<void>

A promise that resolves when the asset has been removed

Resolve an asset to a URL. This is used when rendering the asset in the editor. By default, this will just use asset.props.src, the URL returned by upload(). This can be used to rewrite that URL to add access credentials, or optimized the asset for how it's currently being displayed using the information provided.

Parameters

TLAsset

TLAssetContext

Returns

null | Promise<null | string> | string

The URL of the resolved asset, or null if the asset is not available

Upload an asset to your storage, returning a URL that can be used to refer to the asset long-term.

Parameters

TLAsset

File

AbortSignal

Returns

Promise<{
  meta?: JsonObject
  src: string
}>

A promise that resolves to the URL of the uploaded asset