WebdrawA drawing editor for the web

Install and render ​

Install Webdraw, import the component and its stylesheet, then give the element a height.

pnpm add wdraw

import "wdraw";
import "wdraw/style.css";

<style>
  web-draw {
    display: block;
    height: 600px;
  }
</style>

<web-draw></web-draw>

Use a CDN instead ​

No build step needed. The bundle ships every dependency, so a module script is enough.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/wdraw/dist/webdraw.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/wdraw/dist/webdraw.js"
></script>

<web-draw></web-draw>

Pin a version for production, such as [email protected], so a release cannot change the page under you. unpkg works the same way with https://unpkg.com/wdraw/dist/webdraw.js.

The canvas below is the actual component. Draw something, switch its theme, or clear it.

Configure with HTML ​

Use attributes when configuration is known in markup. Boolean attributes are enabled by their presence.

<web-draw theme="dark" grid-mode storage-key="diagram-library"></web-draw>

Configure with JavaScript ​

Use properties and methods when configuration or scene data changes at runtime.

const drawing = document.querySelector("web-draw");

drawing.theme = "light";
drawing.updateScene({
  appState: { viewBackgroundColor: "#e9f7ef", zoom: 1.2 },
});

React to edits ​

Webdraw uses bubbling, composed DOM events, so listeners work on the element or an ancestor.

drawing.addEventListener("webdraw-change", ({ detail }) => {
  saveDiagram(detail);
});

Draw on the canvas, or use the button to produce the same event programmatically.

Continue with attributes, properties, methods, and events.

Credits ​

Webdraw is based on Excalidraw and adapts its work into a framework-agnostic web component. Thanks to the Excalidraw team and contributors for making that foundation open source.