Assets • tldraw Docs

Assets are records that store data about shared resources like images and videos. Shapes reference assets by ID rather than embedding files directly, so you can reuse the same image across multiple shapes without duplicating data.

For the complete guide to working with assets, see the Assets reference.

Default storage behavior

TLAssetStore controls how assets are uploaded and resolved. The default depends on your store setup:

Setup	Asset store	Where files go
In-memory only (default)	`inlineBase64AssetStore`	Data URLs inside the document
`persistenceKey`	Built in, overridable with the `assets` prop	The browser's IndexedDB
Sync server	Your own `TLAssetStore`, passed to `useSync`	A storage service like S3 or R2

To use your own storage, implement upload and resolve and pass the store to <Tldraw> (or to useSync):

import { Tldraw, TLAssetStore } from 'tldraw'
import 'tldraw/tldraw.css'

const myAssetStore: TLAssetStore = {
	async upload(asset, file) {
		const url = await uploadToMyServer(file)
		return { src: url }
	},
	resolve(asset) {
		return asset.props.src
	},
}

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw assets={myAssetStore} />
		</div>
	)
}

resolve also receives a TLAssetContext with the current screen scale and DPR, so you can serve a resized image instead of the original. Pasted and dropped files go through the external content handlers before they become assets.

Examples

Using hosted images — Reference images by URL without uploading them
Customizing default asset options — Size and dimension limits for uploaded assets
Handling pasted/dropped external content — Turn pasted content into assets
Simple asset store with server upload — Upload files to a Node server
Asset store with image optimization — The demo server's createDemoAssetStore, which resolves resized images