Design on Web
An embeddable design editor SDK for the web. Add a full-featured visual editor to your application in minutes, not months.
Quick Start
Get up and running with a few lines of code.
import { DesignEditor } from '@design-on-web/editor';
function App() {
return (
<DesignEditor
width={800}
height={600}
onSave={(data) => console.log(data)}
/>
);
}import { createEditor } from '@design-on-web/core';
const editor = createEditor({
container: document.getElementById('editor'),
width: 800,
height: 600,
});
editor.on('save', (data) => {
console.log(data);
});Built for Developers
Everything you need to embed a powerful design editor in your app.
Visual Canvas Editor
Drag-and-drop canvas with layers, shapes, text, and images. Powered by HTML5 Canvas for smooth performance.
Plugin Architecture
Extend the editor with custom tools, panels, and export formats via a clean plugin API.
Framework Agnostic
Use with React, Vue, Svelte, or vanilla JavaScript. Core engine has zero framework dependencies.
Lightweight & Fast
Under 50KB gzipped for the core. Tree-shakeable modules so you only ship what you use.
Type-Safe API
Full TypeScript definitions with strict types. IntelliSense support in all major editors.
Export Anywhere
Export designs as PNG, SVG, PDF, or JSON. Import JSON to restore designs programmatically.
Customizable UI
Override toolbar, panels, and menus. Match the editor to your application's look and feel.
Embed Ready
Drop into any web app with a single component. Iframe or inline mounting supported.