Quick Start

Get a fully functional design editor running in under 5 minutes. This guide covers both React and vanilla JS setups.

React Example

This is a minimal but complete React application that renders the full editor with toolbar, side panel, property panel, layer panel, page panel, and export dialog.

App.tsxtsx
import { useRef, useEffect, useState } from 'react';
import { EditorEngine } from '@design-on-web/core';
import { EditorContext, EditorShell } from '@design-on-web/ui';
// Import CSS
import '@design-on-web/ui/themes/variables.css';
import '@design-on-web/ui/themes/light.css';
import '@design-on-web/ui/components/EditorShell.css';

function App() {
  const [engine, setEngine] = useState(null);

  useEffect(() => {
    const canvasEl = document.createElement('canvas');
    const eng = new EditorEngine({
      canvasElement: canvasEl,
      width: 1080,
      height: 1080,
      backgroundColor: '#ffffff',
    });

    // Optional: register export plugins
    // eng.registerPlugin(PsdExportPlugin);

    // Add sample content
    eng.addShape('rect', { left: 100, top: 100, width: 200, height: 150, fill: '#4f46e5' });
    eng.addText('Hello World', { left: 150, top: 150, fontSize: 32, fill: '#ffffff' });

    setEngine(eng);
    return () => eng.destroy();
  }, []);

  if (!engine) return <div>Loading...</div>;

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <EditorContext.Provider value={engine}>
        <EditorShell theme="light" />
      </EditorContext.Provider>
    </div>
  );
}
💡
CSS imports matter
The three CSS imports are required for the editor UI to render correctly. variables.css defines design tokens, light.css applies the light theme, and EditorShell.css styles the main editor layout.

Vanilla JS Example

No build tools needed. Load the script from a CDN or serve it locally, then call DesignOnWeb.createEditor with a container element.

index.htmlhtml
<!DOCTYPE html>
<html>
<head>
  <title>Design on Web — Vanilla JS</title>
</head>
<body>
  <div id="editor" style="width:100%; height:600px;"></div>
  <script src="design-on-web.min.js"></script>
  <script>
    DesignOnWeb.createEditor(document.getElementById('editor'), {
      width: 1080,
      height: 1080,
      theme: 'light',
    });
  </script>
</body>
</html>
ℹī¸
CDN alternative
Replace design-on-web.min.js with the full CDN URL for production use: https://cdn.jsdelivr.net/npm/@design-on-web/vanilla/dist/design-on-web.min.js

What You Get

Both examples above give you the full editor experience out of the box:

  • Toolbar — shape tools, text tool, image upload, drawing, undo/redo
  • Side panel — templates, elements, icons, uploads, and pages
  • Property panel — edit fill, stroke, font, opacity, position, and size for the selected object
  • Layer panel — reorder, lock, hide, and rename layers
  • Page panel — add, remove, duplicate, and reorder pages
  • Export dialog — export to PNG, JPEG, SVG, PDF, PSD, TIFF, JSON, or WebP

Next Steps