Vanilla JS / CDN

Use Design on Web without React or any framework. Load it from a CDN with a single script tag, or install via npm and import into your bundled project.

CDN Setup

The fastest way to get started. No build tools, no npm, no configuration. Just add a container element and load the script:

<!DOCTYPE html>
<html>
<head>
  <title>Design on Web</title>
</head>
<body>
  <div id="editor" style="width:100%;height:600px"></div>

  <script src="https://cdn.jsdelivr.net/npm/@design-on-web/vanilla/dist/design-on-web.min.js"></script>
  <script>
    const editor = DesignOnWeb.createEditor(document.getElementById('editor'), {
      width: 1080,
      height: 1080,
      theme: 'dark',
      onReady: (api) => {
        api.addShape('rect', { left: 100, top: 100, fill: '#4f46e5' });
      },
      onExport: (blob, format) => {
        // Upload to server
        const formData = new FormData();
        formData.append('file', blob, `design.${format}`);
        fetch('/api/upload', { method: 'POST', body: formData });
      },
    });
  </script>
</body>
</html>

💡

Container sizing

The editor fills its container element. Set explicit width and height on the container (or use CSS like 100vw / 100vh) to control the editor size.

npm Setup

If you prefer to bundle Design on Web with your project using webpack, Vite, or another bundler:

npm install @design-on-web/vanilla

import { createEditor } from '@design-on-web/vanilla';

const editor = createEditor(document.getElementById('editor'), {
  width: 1080,
  height: 1080,
  theme: 'light',
});

Configuration Options

Pass these options to createEditor to customize the editor behavior:

createEditor Options

Name	Type	Default	Description
`width`	`number`	`1080`	Canvas width in pixels.
`height`	`number`	`1080`	Canvas height in pixels.
`theme`	`'light' \| 'dark'`	`'light'`	UI color theme.
`backgroundColor`	`string`	`'#ffffff'`	Canvas background color.
`locale`	`string`	`'en'`	Locale code for UI translations (e.g., 'en', 'id', 'ja').
`onReady`	`(api: EditorEngine) => void`	—	Callback fired when the editor is fully initialized.
`onExport`	`(blob: Blob, format: string) => void`	—	Callback fired when the user exports a design.
`onSave`	`(json: string) => void`	—	Callback fired when the user triggers a save action.
`onChange`	`() => void`	—	Callback fired on any canvas change (object added, moved, etc.).
`plugins`	`EditorPlugin[]`	—	Array of export plugins to register on initialization.

Programmatic API

After creating the editor, access the underlying EditorEngine instance via editor.engine to add content, export, and interact with the canvas:

// Access the underlying engine
const engine = editor.engine;

// Add shapes
engine.addShape('rect', {
  left: 100, top: 100,
  width: 200, height: 150,
  fill: '#4f46e5',
  stroke: '#312e81',
  strokeWidth: 2,
});

engine.addShape('circle', {
  left: 200, top: 200,
  radius: 50,
  fill: '#ef4444',
});

engine.addShape('triangle', {
  left: 400, top: 100,
  width: 120, height: 120,
  fill: '#10b981',
});

// Add text
engine.addText('Hello World', {
  left: 100, top: 100,
  fontSize: 48,
  fill: '#1f2937',
  fontFamily: 'Arial',
  fontWeight: 'bold',
});

// Add image
await engine.addImage('https://example.com/photo.jpg', {
  left: 50, top: 50,
  scaleX: 0.5,
  scaleY: 0.5,
});

// Export
const blob = await engine.exportAs('png', { multiplier: 2 });
const pdfBlob = await engine.exportAs('pdf');

// Download helper
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);
}

downloadBlob(blob, 'design.png');

Events

Subscribe to editor events for auto-save, analytics, or custom integrations:

// Listen to events
engine.getEventBus().on('object:selected', (data) => {
  console.log('Selected:', data.objectIds);
});

engine.getEventBus().on('object:modified', (data) => {
  console.log('Modified:', data);
});

// Auto-save on changes
engine.getEventBus().on('save:start', () => {
  const json = engine.toJSON();
  localStorage.setItem('design', json);
  console.log('Design saved to localStorage');
});

// Load saved design
const saved = localStorage.getItem('design');
if (saved) {
  engine.loadJSON(saved);
}

ℹ️

Full events list

See the Events API Reference for all available event types and their payloads.

Cleanup

When removing the editor from the page (e.g., in a single-page app), call destroy() to release resources:

// Clean up when done
editor.destroy();

Next Steps

EditorEngine API — full method reference
Events API — all event types
Export API — formats and options