Export Utilities

Functions for exporting Excalidraw scenes to various formats

Export Utilities

Utilities for exporting Excalidraw scenes and elements to canvas, blob, SVG, and clipboard formats.

Canvas Export

exportToCanvas

Exports elements to an HTML canvas element.

function exportToCanvas(options: {
  elements: readonly NonDeleted<ExcalidrawElement>[];
  appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
  files: BinaryFiles | null;
  maxWidthOrHeight?: number;
  exportPadding?: number;
  exportingFrame?: ExcalidrawFrameLikeElement | null;
  getDimensions?: (
    width: number,
    height: number
  ) => { width: number; height: number; scale?: number };
}): Promise<HTMLCanvasElement>

elements · ExcalidrawElement[] · required

Array of non-deleted elements to export

appState · Partial<AppState>

Application state for export settings (background color, export scale, etc.)

files · BinaryFiles | null · required

Binary files map for image elements

maxWidthOrHeight · number

Maximum dimension (width or height) for the exported canvas. The canvas will be scaled down to fit.

exportPadding · number

Padding around the exported content in pixels

exportingFrame · ExcalidrawFrameLikeElement | null

Specific frame to export (exports only elements within the frame)

getDimensions · function

Custom function to calculate canvas dimensions. Receives natural width and height, returns target dimensions and optional scale.

canvas · HTMLCanvasElement

The rendered canvas element with the exported content

Example:

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

const canvas = await exportToCanvas({
  elements: excalidrawAPI.getSceneElements(),
  appState: {
    exportBackground: true,
    exportScale: 2,
    viewBackgroundColor: "#ffffff",
  },
  files: excalidrawAPI.getFiles(),
  maxWidthOrHeight: 1920,
  exportPadding: 10,
});

document.body.appendChild(canvas);

Blob Export

exportToBlob

Exports elements to a blob (PNG, JPEG, or SVG).

function exportToBlob(options: {
  elements: readonly NonDeleted<ExcalidrawElement>[];
  appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
  files: BinaryFiles | null;
  mimeType?: string;
  quality?: number;
  exportPadding?: number;
  maxWidthOrHeight?: number;
  exportingFrame?: ExcalidrawFrameLikeElement | null;
  getDimensions?: (
    width: number,
    height: number
  ) => { width: number; height: number; scale?: number };
}): Promise<Blob>

elements · ExcalidrawElement[] · required

Array of non-deleted elements to export

appState · Partial<AppState>

Application state for export settings

files · BinaryFiles | null · required

Binary files map for image elements

mimeType · string · default: "'image/png'"

Output format: “image/png”, “image/jpeg”, or “image/svg+xml”

quality · number

Quality for JPEG export (0-1). Default is 0.92 for JPEG, 0.8 for PNG.

exportPadding · number

Padding around the exported content in pixels

maxWidthOrHeight · number

Maximum dimension for the exported image

exportingFrame · ExcalidrawFrameLikeElement | null

Specific frame to export

blob · Blob

The exported content as a Blob

Example:

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

const blob = await exportToBlob({
  elements: excalidrawAPI.getSceneElements(),
  appState: {
    exportBackground: true,
    exportWithDarkMode: false,
    exportEmbedScene: true,
  },
  files: excalidrawAPI.getFiles(),
  mimeType: MIME_TYPES.png,
});

// Download the blob
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "excalidraw-export.png";
link.click();
URL.revokeObjectURL(url);

MIME_TYPES

Available MIME types for export.

const MIME_TYPES = {
  png: "image/png",
  jpg: "image/jpeg",
  svg: "image/svg+xml",
  excalidraw: "application/vnd.excalidraw+json",
  excalidrawlib: "application/vnd.excalidrawlib+json",
};

Example:

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

// Export as JPEG with custom quality
const jpegBlob = await exportToBlob({
  elements,
  appState: { exportBackground: true },
  files,
  mimeType: MIME_TYPES.jpg,
  quality: 0.95,
});

SVG Export

exportToSvg

Exports elements to an SVG element.

function exportToSvg(options: {
  elements: readonly NonDeleted<ExcalidrawElement>[];
  appState?: Partial<AppState>;
  files?: BinaryFiles;
  exportPadding?: number;
  renderEmbeddables?: boolean;
  exportingFrame?: ExcalidrawFrameLikeElement | null;
  skipInliningFonts?: true;
  reuseImages?: boolean;
}): Promise<SVGSVGElement>

elements · ExcalidrawElement[] · required

Array of non-deleted elements to export

appState · Partial<AppState>

Application state for export settings

files · BinaryFiles

Binary files map for image elements

exportPadding · number

Padding around the exported content in pixels

renderEmbeddables · boolean

Whether to render embeddable elements (iframes, etc.)

exportingFrame · ExcalidrawFrameLikeElement | null

Specific frame to export

skipInliningFonts · boolean

Skip inlining fonts (fonts must be available on the target system)

reuseImages · boolean

Reuse image references instead of embedding them

svg · SVGSVGElement

The exported SVG element

Example:

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

const svg = await exportToSvg({
  elements: excalidrawAPI.getSceneElements(),
  appState: {
    exportBackground: true,
    viewBackgroundColor: "#ffffff",
    exportWithDarkMode: false,
  },
  files: excalidrawAPI.getFiles(),
  exportPadding: 10,
});

// Get SVG as string
const svgString = svg.outerHTML;

// Or download it
const blob = new Blob([svgString], { type: "image/svg+xml" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "drawing.svg";
link.click();
URL.revokeObjectURL(url);

Clipboard Export

exportToClipboard

Exports content to the system clipboard.

function exportToClipboard(options: {
  elements: readonly NonDeleted<ExcalidrawElement>[];
  appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
  files: BinaryFiles | null;
  type: "png" | "svg" | "json";
  mimeType?: string;
  quality?: number;
}): Promise<void>

elements · ExcalidrawElement[] · required

Array of non-deleted elements to export

appState · Partial<AppState>

Application state for export settings

files · BinaryFiles | null · required

Binary files map for image elements

type · 'png' | 'svg' | 'json' · required

Export format for clipboard

mimeType · string

MIME type (used for PNG export)

quality · number

Quality for PNG export (0-1)

void · Promise<void>

Promise that resolves when content is copied to clipboard

Example:

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

// Copy as PNG image
await exportToClipboard({
  elements: excalidrawAPI.getSceneElements(),
  files: excalidrawAPI.getFiles(),
  type: "png",
  appState: {
    exportBackground: true,
  },
});

// Copy as SVG
await exportToClipboard({
  elements: excalidrawAPI.getSceneElements(),
  files: excalidrawAPI.getFiles(),
  type: "svg",
});

// Copy as JSON (for pasting back into Excalidraw)
await exportToClipboard({
  elements: excalidrawAPI.getSceneElements(),
  files: excalidrawAPI.getFiles(),
  type: "json",
});

Export Options Reference

AppState Export Properties

Common appState properties used in export functions:

{
  exportBackground: boolean;        // Include background color
  exportScale: number;              // Scale factor (1 = 100%)
  exportWithDarkMode: boolean;      // Use dark mode colors
  exportEmbedScene: boolean;        // Embed scene data in PNG
  viewBackgroundColor: string;      // Background color
  shouldAddWatermark: boolean;      // Add Excalidraw watermark
}

Example:

const appState = {
  exportBackground: true,
  exportScale: 2, // 2x resolution
  exportWithDarkMode: false,
  exportEmbedScene: true, // Embed editable data in PNG
  viewBackgroundColor: "#ffffff",
};

const blob = await exportToBlob({
  elements,
  appState,
  files,
  mimeType: "image/png",
});

Complete Export Example

Here’s a complete example with export to multiple formats:

import {
  exportToCanvas,
  exportToBlob,
  exportToSvg,
  exportToClipboard,
  MIME_TYPES,
} from "@excalidraw/excalidraw";

const ExportComponent = ({ excalidrawAPI }) => {
  const exportOptions = {
    elements: excalidrawAPI.getSceneElements(),
    files: excalidrawAPI.getFiles(),
    appState: {
      exportBackground: true,
      exportScale: 2,
      viewBackgroundColor: "#ffffff",
    },
  };

  // Export to PNG
  const exportPNG = async () => {
    const blob = await exportToBlob({
      ...exportOptions,
      mimeType: MIME_TYPES.png,
    });
    downloadBlob(blob, "drawing.png");
  };

  // Export to SVG
  const exportSVG = async () => {
    const svg = await exportToSvg(exportOptions);
    const blob = new Blob([svg.outerHTML], { type: MIME_TYPES.svg });
    downloadBlob(blob, "drawing.svg");
  };

  // Export to clipboard
  const copyToClipboard = async () => {
    await exportToClipboard({
      ...exportOptions,
      type: "png",
    });
    alert("Copied to clipboard!");
  };

  // Get canvas for preview
  const getPreview = async () => {
    const canvas = await exportToCanvas({
      ...exportOptions,
      maxWidthOrHeight: 800,
    });
    return canvas;
  };

  const downloadBlob = (blob, filename) => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = filename;
    link.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <button onClick={exportPNG}>Export PNG</button>
      <button onClick={exportSVG}>Export SVG</button>
      <button onClick={copyToClipboard}>Copy to Clipboard</button>
    </div>
  );
};

See Also

• Element Utils - Creating and manipulating elements
• Scene Utils - Scene management
• Restore Utils - Loading and restoring data