TldrawImage

A rendered SVG image of a Tldraw snapshot.

Example

<TldrawImage
  snapshot={snapshot}
  pageId={pageId}
  background={false}
  darkMode={true}
  bounds={new Box(0, 0, 600, 400)}
  scale={1}
/>;

Properties

Extends TLImageExportOptions.

Asset URL overrides.

assetUrls?: TLUiAssetUrlOverrides;

Should the background color be included in the export? If false, the generated image will be transparent (if exporting to a format that supports transparency).

background?: boolean;

Additional binding utils to use.

bindingUtils?: readonly TLAnyBindingUtilConstructor[];

The bounding box, in page coordinates, of the area being exported.

bounds?: Box;

Should the export be rendered in dark mode (true) or light mode (false)? Defaults to the current instance's dark mode setting.

darkMode?: boolean;

The image format to use. Defaults to 'svg'.

format?: "png" | "svg";

The license key.

licenseKey?: string;

Options for the editor.

options?: Partial<TldrawOptions>;

How much padding to include around the bounds of exports.

• 'auto' (default) — trim to visual content bounds, capturing overflow (like thick strokes or arrowheads) without extra whitespace. - number (e.g. 32) — fixed padding in px. No trimming; overflow beyond the padding region is clipped. - 0 — no padding, no trimming, overflow is clipped.

padding?: "auto" | number;

The page to display. Defaults to the first page.

pageId?: TLPageId;

When exporting an SVG, the expected pixel ratio of the export will be passed in to TLAssetStore.resolve as the dpr property, so that assets can be downscaled to the appropriate resolution.

When exporting to a bitmap image format, the size of the resulting image will be multiplied by this number.

For SVG exports, this defaults to undefined - which means we'll request original-quality assets. For bitmap exports, this defaults to 2.

pixelRatio?: number;

The preserveAspectRatio attribute of the SVG element.

preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>["preserveAspectRatio"];

If the export is being converted to a lossy bitmap format (e.g. jpeg), this is the quality of the export. This is a number between 0 and 1.

quality?: number;

The logical scale of the export. This scales the resulting size of the SVG being generated.

scale?: number;

Additional shape utils to use.

shapeUtils?: readonly TLAnyShapeUtilConstructor[];

The snapshot to display.

snapshot: Partial<TLEditorSnapshot> | TLStoreSnapshot;

Text options for the editor.

textOptions?: TLTextOptions;