Export API

Design on Web supports exporting designs to multiple file formats. Built-in formats (PNG, JPEG, WebP) work out of the box. Additional formats (SVG, PDF, PSD, TIFF) require registering export plugins.

Basic Export

// Export to PNG (built-in, no plugin required)
const pngBlob = await engine.exportAs('png');

// Export with options
const hiResBlob = await engine.exportAs('png', {
  multiplier: 2,        // 2x resolution (2160x2160 for a 1080x1080 canvas)
  backgroundColor: null, // Transparent background
});

// Export to JPEG with quality
const jpegBlob = await engine.exportAs('jpeg', {
  quality: 0.85,
  multiplier: 1,
});

// Export to WebP
const webpBlob = await engine.exportAs('webp', {
  quality: 0.9,
});

Export Options

ExportOptions

Name	Type	Default	Description
`quality`	`number`	`0.92`	Image quality from 0 to 1. Only applies to JPEG and WebP formats. Has no effect on PNG, SVG, PDF, or PSD.
`multiplier`	`number`	`1`	Resolution scale factor from 1 to 4. A value of 2 exports at double the canvas resolution. Applies to raster formats (PNG, JPEG, WebP, TIFF).
`backgroundColor`	`string \| null`	—	Override the canvas background color for export. Pass null for transparent background (PNG and WebP only).

Available Formats

Export Formats

Name	Type	Default	Description
`png`	`Built-in`	—	Lossless raster format. Supports transparency. Best for graphics with sharp edges and text.
`jpeg`	`Built-in`	—	Lossy raster format. Smaller file sizes. Best for photographs. No transparency support.
`webp`	`Built-in`	—	Modern raster format. Good compression with transparency support. Supported by all modern browsers.
`svg`	`@design-on-web/export-svg`	—	Vector format. Scalable to any size without quality loss. Best for logos and illustrations.
`pdf`	`@design-on-web/export-pdf`	—	Document format. Ideal for print-ready designs. Preserves vector data where possible.
`psd`	`@design-on-web/export-psd`	—	Adobe Photoshop format. Preserves layers. Best for designs that need further editing in Photoshop.
`tiff`	`@design-on-web/export-image`	—	Lossless raster format. Common in print workflows. Large file sizes.
`json`	`Built-in`	—	Serialized canvas state. Use for saving and restoring designs. Not a visual format.

Export Plugins

Export plugins add support for formats beyond the built-in PNG, JPEG, and WebP. Each plugin is a separate npm package to keep the core bundle small. Register plugins after creating the engine:

import { PsdExportPlugin } from '@design-on-web/export-psd';
import { PdfExportPlugin } from '@design-on-web/export-pdf';
import { SvgExportPlugin } from '@design-on-web/export-svg';
import { ImageExportPlugin } from '@design-on-web/export-image';

// Register plugins after engine creation
await engine.registerPlugin(PsdExportPlugin);
await engine.registerPlugin(PdfExportPlugin);
await engine.registerPlugin(SvgExportPlugin);
await engine.registerPlugin(ImageExportPlugin);

// Now these formats are available:
const svgBlob = await engine.exportAs('svg');
const pdfBlob = await engine.exportAs('pdf');
const psdBlob = await engine.exportAs('psd');
const tiffBlob = await engine.exportAs('tiff');

Plugin Packages

Name	Type	Default	Description
`@design-on-web/export-svg`	`SvgExportPlugin`	—	Adds SVG export support.
`@design-on-web/export-pdf`	`PdfExportPlugin`	—	Adds PDF export support. Uses jsPDF internally.
`@design-on-web/export-psd`	`PsdExportPlugin`	—	Adds PSD (Photoshop) export support with layer preservation.
`@design-on-web/export-image`	`ImageExportPlugin`	—	Adds TIFF export support.

💡

Plugin registration

Plugins can be registered at any time, not just during initialization. However, registering them early ensures the export dialog shows all available formats from the start.

Download to File

The exportAs method returns a Blob. To trigger a file download in the browser:

// Download a blob as a file
async function downloadDesign(format, filename) {
  const blob = await engine.exportAs(format, { multiplier: 2 });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// Usage
await downloadDesign('png', 'my-design.png');
await downloadDesign('pdf', 'my-design.pdf');
await downloadDesign('psd', 'my-design.psd');

Upload to Server

Export and upload the result to your backend using FormData:

// Export and upload to server
async function exportAndUpload(format) {
  const blob = await engine.exportAs(format);

  const formData = new FormData();
  formData.append('file', blob, `design.${format}`);

  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });

  const { url } = await response.json();
  console.log('Uploaded to:', url);
}

JSON Serialization

Use the json format or the toJSON() / loadJSON() methods for saving and restoring designs:

// Export as JSON (serialized canvas state)
const jsonBlob = await engine.exportAs('json');

// Or use toJSON() for a string directly
const jsonString = engine.toJSON();
localStorage.setItem('myDesign', jsonString);

// Restore later
const saved = localStorage.getItem('myDesign');
if (saved) {
  await engine.loadJSON(saved);
}

ℹ️

JSON vs other formats

JSON export preserves the full editable state — all objects, pages, layers, and settings. Other formats produce flat output files. Use JSON for save/load workflows and other formats for final output.

Export Events

Listen to export lifecycle events for progress tracking and error handling:

const eventBus = engine.getEventBus();

// Track export progress
eventBus.on('export:start', (data) => {
  console.log(`Exporting as ${data.format}...`);
  showLoadingSpinner();
});

eventBus.on('export:complete', (data) => {
  console.log(`Export complete: ${data.format}, ${data.blob.size} bytes`);
  hideLoadingSpinner();
});

eventBus.on('export:error', (data) => {
  console.error(`Export failed: ${data.error.message}`);
  hideLoadingSpinner();
  showErrorNotification(data.error.message);
});

Built-in Export Dialog

The EditorShell UI includes a built-in export dialog that provides a user-friendly interface for exporting designs. The dialog includes:

Format picker — dropdown to select the output format (shows all registered formats)
Quality slider — adjusts JPEG/WebP quality (hidden for lossless formats)
Scale dropdown — choose 1x, 2x, 3x, or 4x resolution
Preview — live preview of the exported result
Download button — triggers the file download

The dialog is accessible from the toolbar export button. No additional code is needed if you use EditorShell.

Next Steps

EditorEngine API — full method reference
Events API — export event details
React Guide — using export in React apps
Vanilla JS Guide — export without React