@drawmotive/editor · Browser example
From text to a diagram you can edit.
Generate a diagram, then move shapes, edit labels and draw connections on the canvas. Everything runs in your browser.
Generating replaces the canvas. Save your edits before starting again.
2. Make it yours
Drag shapes to move them. Double-click a label to edit it. Use the canvas tools to add shapes and connections.
3. Take it with you
Save a document to reopen and keep editing. A PNG is an image for sharing.
Visual editorLoading editor…
Your page, your data
Embed the same editor.
Install the package, copy its runtime assets, and give it an element with a height. Save the exported document wherever your application stores data.
npm install @drawmotive/[email protected]
npx drawmotive-copy-assets public/editorimport { createEditor } from '@drawmotive/editor';
const editor = await createEditor({
container: document.querySelector('#editor'),
assetBaseUrl: '/editor/',
});
// Export both a shareable image and editable data.
await editor.replaceTextGraph('A -> B');
await editor.fitViewport();
const { png, raw } = await editor.exportSnapshot({ formats: ['raw', 'png'] });
await editor.replaceDocument(raw);
// Clean up when your component unmounts.
await editor.dispose();