Simple Whiteboard

Home · Docs · Demo

Simple Whiteboard is a simple web-based whiteboard application that allows users to draw on a canvas.

The application is built as a Web Component using LitElement. This allows the whiteboard to be easily embedded in any web application regardless of the framework used.

Features

• Different drawing tools:
  • Rectangle
  • Circle
  • Line
  • Arrow
  • Pen
  • Text
  • Sticky note
  • Picture
• Move the canvas using the Move tool, the middle mouse button, or scrolling
• Reorder items in the stacking order (bring forward / send backward / to front / to back)
• Erase items by dragging the Eraser over them
• Clear the canvas
• Undo / redo (Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z)
• Support mouse and touch input
• Optional dotted grid background
• Pan & pinch-to-zoom (zoom follows the cursor / pinch center)
• Export the current view as a PNG image

Usage

Add the <simple-whiteboard> element to your page and drop the default tools in its tools slot:

<simple-whiteboard locale="en">
  <simple-whiteboard--tool-defaults slot="tools"></simple-whiteboard--tool-defaults>
</simple-whiteboard>

Attributes

Attribute	Type	Default	Description
locale	string	en	The UI language.
dotted-background	boolean	true	Render a dotted grid behind the content. Use ="false" to hide.
hide-locale-picker	boolean	false	Hide the language picker from the menu.
hide-tool-options	boolean	false	Hide the floating tool-options panel (useful for a compact/embedded board).
debug	boolean	false	Log debug information and show the pointer coordinates.

Undo / redo

Every drawing, edit, move, resize, deletion and clear can be undone and redone, either with the toolbar buttons, the keyboard (Ctrl/Cmd+Z to undo, Ctrl/Cmd+Shift+Z or Ctrl+Y to redo), or programmatically:

whiteboard.undo();
whiteboard.redo();
whiteboard.canUndo(); // boolean
whiteboard.canRedo(); // boolean

A history-changed event (detail: { canUndo, canRedo }) is emitted whenever availability changes, so a host application can keep its own controls in sync.

Theming

The look can be tweaked with CSS custom properties, for example:

simple-whiteboard {
  --sw-accent: #7c3aed;
}

Performance

The whiteboard is designed to stay light on the CPU:

• redraws are coalesced with requestAnimationFrame, so many updates in the same frame only trigger a single render;
• items that are outside the visible viewport are skipped (viewport culling);
• the dotted background only computes and draws the dots that are visible.

Development

npm install        # install the dependencies
npm run dev        # start the dev server
npm test           # run the unit tests (Node's built-in test runner)
npm run build      # type-check and build the library -> dist/
npm run build:site # build the marketing site      -> dist-site/

The dev server serves three pages:

Page	Description
/	Landing page (index.html)
/app.html	The interactive whiteboard demo
/api.html	API reference (attributes, methods, events, …)

There are two separate build outputs:

• npm run build produces dist/ — the library only (JS bundle, source map and TypeScript declarations). This is what gets published to npm (files: ["dist"]); it contains no HTML.
• npm run build:site produces dist-site/ — the three pages above, bundled for hosting (this is what the GitHub Pages workflow deploys).

Used Technologies

• LitElement - A simple base class for creating fast, lightweight web components.
• TypeScript - A typed superset of JavaScript that compiles to plain JavaScript.
• Rough.js - A small graphics library that lets you draw in a sketchy, hand-drawn-like, style.
• Perfect Freehand - A tiny library for rendering perfect freehand lines.
• Lucide Icons - Beautiful & consistent icons.

License

Simple Whiteboard is licensed under the MIT License.