Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tldraw/tldraw/llms.txt

Use this file to discover all available pages before exploring further.

Export utilities provide functions for exporting shapes to various formats and copying them to the clipboard.

​
exportAs

Export shapes as downloadable files in various formats. 
async function exportAs(
  editor: Editor,
  ids: TLShapeId[],
  opts: ExportAsOptions
): Promise<void>
​
editor
Editor
required
The editor instance.
​
ids
TLShapeId[]
required
The IDs of the shapes to export.
​
opts
ExportAsOptions
required
Export options including format and name.

​
ExportAsOptions

​
opts.format
TLExportType
required
The export format (e.g., ‘png’, ‘svg’, ‘jpeg’, ‘webp’, ‘json’).
​
opts.name
string
Name of the exported file. If undefined, a predefined name based on the selection will be used.
​
opts.scale
number
Scale factor for the export. Defaults to 1.
​
opts.quality
number
Image quality from 0 to 1 (for formats that support it).
​
opts.padding
number
Padding around the exported shapes in pixels.
​
opts.background
boolean
Whether to include the background.

​
Example

import { exportAs } from 'tldraw'

// Export selected shapes as PNG
await exportAs(editor, editor.getSelectedShapeIds(), {
  format: 'png',
  name: 'my-diagram',
  scale: 2,
  padding: 16
})

// Export specific shapes as SVG
await exportAs(editor, ['shape1', 'shape2'], {
  format: 'svg',
  name: 'shapes'
})

​
copyAs

Copy shapes to the clipboard in a specific format. 
function copyAs(
  editor: Editor,
  ids: TLShapeId[],
  opts: CopyAsOptions
): Promise<void>
​
editor
Editor
required
The editor instance.
​
ids
TLShapeId[]
required
The IDs of the shapes to copy.
​
opts
CopyAsOptions
required
Copy options including format.

​
CopyAsOptions

​
opts.format
'svg' | 'png'
required
The format to copy as.
​
opts.scale
number
Scale factor for the copy. Defaults to 1.
​
opts.quality
number
Image quality from 0 to 1 (for PNG format).
​
opts.padding
number
Padding around the copied shapes in pixels.
​
opts.background
boolean
Whether to include the background.

​
Example

import { copyAs } from 'tldraw'

// Copy selected shapes as PNG to clipboard
await copyAs(editor, editor.getSelectedShapeIds(), {
  format: 'png',
  scale: 2
})

// Copy as SVG
await copyAs(editor, ['shape1', 'shape2'], {
  format: 'svg'
})

​
exportToString

Export shapes to a string representation (SVG or JSON). 
async function exportToString(
  editor: Editor,
  ids: TLShapeId[],
  format: 'svg' | 'json',
  opts?: TLImageExportOptions
): Promise<string>
​
editor
Editor
required
The editor instance.
​
ids
TLShapeId[]
required
The IDs of the shapes to export.
​
format
'svg' | 'json'
required
The export format.
​
opts
TLImageExportOptions
Additional export options.
Returns: A promise that resolves to the string representation of the shapes.

​
Example

import { exportToString } from 'tldraw'

// Export shapes as SVG string
const svgString = await exportToString(
  editor,
  editor.getSelectedShapeIds(),
  'svg'
)

// Export shapes as JSON string
const jsonString = await exportToString(
  editor,
  ['shape1', 'shape2'],
  'json'
)
const data = JSON.parse(jsonString)