One Web Component · zero framework lock-in

A whiteboard you can drop into anything

Draw, pan, zoom, undo, rearrange and export — all from a single custom element. It works with React, Vue, Svelte or plain HTML, and it’s tiny.

Try the whiteboard Read the docs

$ npm i @ludovicm67/simple-whiteboard

simple-whiteboard.app

Click to doodle — it’s live

This is the real component, running right here. Draw on it.

Features

Everything a whiteboard needs, nothing it doesn’t

A focused, dependency-light toolkit that stays out of your way and leaves the styling and the data in your hands.

A dozen tools

Rectangle, circle, line, arrow, freehand pen, text, sticky notes and images — plus select, move and a real object eraser.

Infinite canvas

Pan with the mouse, middle-click or trackpad, and pinch-to-zoom that follows your cursor so it always feels natural.

Undo & redo

A full history with Ctrl/Cmd+Z, a redo stack, and a history-changed event to drive your own buttons.

Layers & arrange

Bring items forward or send them backward, all the way to the front or the back — every change stays in sync.

Export to PNG

Download the current view as a crisp PNG in a single call — with your own background color if you like.

Touch & mouse

First-class pointer and multi-touch support, so drawing and pinch-zoom feel right on a laptop, tablet or phone.

24 languages

The entire UI is translated out of the box, with an optional built-in language picker you can hide with one attribute.

Fully themeable

Restyle every surface with a handful of CSS custom properties. One line changes the accent across the whole UI.

Events & collaboration

Every change emits a structured event. The demo syncs two tabs live over a BroadcastChannel — swap in your own transport.

Tiny & fast

Redraws are coalesced per animation frame and off-screen items are culled, so it stays smooth even on a busy board.

Just a Web Component

Framework-agnostic and standards-based. No wrapper, no adapter — it’s a custom element that works everywhere.

Hand-drawn charm

A friendly, sketchy Rough.js look with an optional dotted grid that makes diagrams feel approachable, not corporate.

Get started

Three lines and you’re drawing

Install the package, import it once to register the custom elements, then drop the tag into your markup. The tool-defaults element wires up every tool for you.

No build step required — it’s standard ESM.
Ships its own TypeScript types.
Pick the default tools, or include only the ones you need.

Full API reference

index.html

<!-- 1. import once, anywhere in your JS -->
import "@ludovicm67/simple-whiteboard";

<!-- 2. use the element in your markup -->
<simple-whiteboard locale="en" dotted-background>
  <simple-whiteboard--tool-defaults slot="tools">
  </simple-whiteboard--tool-defaults>
</simple-whiteboard>

// 3. react to changes from anywhere
board.addEventListener("items-updated", (e) => {
  console.log(e.detail.type); // "add" | "remove" | …
});