Skip to main content

Export Utilities

info

We're working on much improved export utilities. Stay tuned!

exportToCanvas

Signature

exportToCanvas({
  elements,
  appState
  getDimensions,
  files,
  exportPadding?: number;
}: ExportOpts
NameTypeDefaultDescription
elementsExcalidraw Element []The elements to be exported to canvas.
appStateAppStateDefault App StateThe app state of the scene.
getDimensionsfunction_A function which returns the width, height, and optionally scale (defaults to 1), with which canvas is to be exported.
maxWidthOrHeightnumber_The maximum width or height of the exported image. If provided, getDimensions is ignored.
filesBinaryFiles_The files added to the scene.
exportPaddingnumber10The padding to be added on canvas.

getDimensions

(width: number, height: number) => { 
width: number,
height: number,
scale?: number
}

A function which returns the width, height, and optionally scale (defaults to 1), with which canvas is to be exported.

How to use

import { exportToCanvas } from "@excalidraw/excalidraw";

This function returns the canvas with the exported elements, appState and dimensions.

Live Editor
Result
Loading...

exportToBlob

Signature

exportToBlob(
  opts: ExportOpts & {
  mimeType?: string,
  quality?: number,
  exportPadding?: number;
})
NameTypeDefaultDescription
optsobject_This param is passed to exportToCanvas. You can refer to exportToCanvas
mimeTypestringimage/pngIndicates the image format.
qualitynumber0.92A value between 0 and 1 indicating the image quality. Applies only to image/jpeg/image/webp MIME types.
exportPaddingnumber10The padding to be added on canvas.

How to use

import { exportToBlob } from "@excalidraw/excalidraw";

Returns a promise which resolves with a blob. It internally uses canvas.ToBlob.

exportToSvg

Signature

exportToSvg({
  elements: ExcalidrawElement[],
  appState: AppState,
  exportPadding: number,
  metadata: string,
  files: BinaryFiles,
});
NameTypeDefaultDescription
elementsExcalidraw Element []The elements to exported as svg
appStateAppStatedefaultAppStateThe appState of the scene
exportPaddingnumber10The padding to be added on canvas
filesBinaryFilesundefinedThe files added to the scene.

This function returns a promise which resolves to svg of the exported drawing.

exportToClipboard

Signature

exportToClipboard(
  opts: ExportOpts & {
  mimeType?: string,
  quality?: number;
  type: 'png' | 'svg' |'json'
})
NameTypeDefaultDescription
optsThis param is same as the params passed to exportToCanvas. You can refer to exportToCanvas.
mimeTypestringimage/pngIndicates the image format, this will be used when exporting as png.
qualitynumber0.92A value between 0 and 1 indicating the image quality. Applies only to image/jpeg / image/webp MIME types. This will be used when exporting as png.
type'png' | 'svg' | 'json'_This determines the format to which the scene data should be exported.

How to use

import { exportToClipboard } from "@excalidraw/excalidraw";

Copies the scene data in the specified format (determined by type) to clipboard.

Additional attributes of appState for export* APIs

NameTypeDefaultDescription
exportBackgroundbooleantrueIndicates whether background should be exported
viewBackgroundColorstring#fffThe default background color
exportWithDarkModebooleanfalseIndicates whether to export with dark mode
exportEmbedScenebooleanfalseIndicates whether scene data should be embedded in svg/png. This will increase the image size.