Export Formats

Design on Web supports 8 export formats covering raster, vector, layered, and data formats. Built-in formats work out of the box, while advanced formats require registering export plugins.

Format Overview

Format	Type	Description	Plugin Required
`png`	Raster	Lossless with transparency support	No (built-in)
`jpeg`	Raster	Lossy compression with quality slider	No (built-in)
`webp`	Raster	Modern format with superior compression	No (built-in)
`svg`	Vector	Scalable vector with enhanced metadata	`@design-on-web/export-svg`
`pdf`	Vector	PDF document via jsPDF + svg2pdf.js	`@design-on-web/export-pdf`
`psd`	Layered	Photoshop file with editable layers	`@design-on-web/export-psd`
`tiff`	Raster	Print-standard high quality raster	`@design-on-web/export-image`
`json`	Data	Serialized design data for save/load	No (built-in)

Built-in Exports

PNG, JPEG, WebP, and JSON exports work without any plugins.

// Export as PNG (built-in)
const pngBlob = await engine.export('png', {
  quality: 1,        // 0-1, default 1
  multiplier: 2,     // resolution multiplier, default 1
});

// Export as JPEG
const jpegBlob = await engine.export('jpeg', {
  quality: 0.85,     // 0-1, controls compression
  multiplier: 1,
});

// Export as WebP
const webpBlob = await engine.export('webp', {
  quality: 0.9,
  multiplier: 2,
});

// Export as JSON (save/load designs)
const jsonString = engine.exportJSON();

// Load from JSON
await engine.loadJSON(jsonString);

Plugin Exports

SVG, PDF, PSD, and TIFF require installing and registering export plugins. Install them from npm and register before use.

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

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

// Now these formats are available:

// SVG — vector export with enhanced metadata
const svgBlob = await engine.export('svg');

// PDF — via jsPDF + svg2pdf.js
const pdfBlob = await engine.export('pdf');

// PSD — layered Photoshop file with editable layers
const psdBlob = await engine.export('psd');

// TIFF — print-quality raster format
const tiffBlob = await engine.export('tiff', {
  quality: 1,
  multiplier: 3,  // high-res for print
});

ℹ️

Plugin installation

Export plugins are separate npm packages to keep the core bundle small. Only install the formats you need.

Export Options

Common Export Options

Name	Type	Default	Description
`quality`	`number`	`1`	Output quality from 0 to 1 (JPEG, WebP, TIFF)
`multiplier`	`number`	`1`	Resolution multiplier (2 = 2x resolution)
`allPages`	`boolean`	`false`	Export all pages (PDF only)
`pageIndex`	`number`	—	Export a specific page by index

Download Helper

// Helper: trigger browser download
function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

// Export and download
const blob = await engine.export('png', { multiplier: 2 });
downloadBlob(blob, 'my-design.png');

Multi-page Export

PDF export supports multi-page documents. Raster formats export a single page at a time.

// Export all pages as PDF
const pdfBlob = await engine.export('pdf', {
  allPages: true,    // include all pages
});

// Export specific page
const pageBlob = await engine.export('png', {
  pageIndex: 2,      // export page 3 only
  multiplier: 2,
});

💡

Print-ready exports

For print-quality output, use multiplier: 3 or higher with TIFF or PNG format. This produces a 300 DPI output for standard 1080px canvas designs.

UI: Export Dialog

The export dialog is accessible via the Export button in the toolbar. It provides:

Format selector with all registered formats
Quality slider (for JPEG, WebP, TIFF)
Resolution multiplier (1x, 2x, 3x, 4x)
Transparent background toggle (PNG, WebP)
Page selection for multi-page designs
Live preview of the exported output
Download button