Drawing component

DrawBoard — Interactive Drawing Canvas for Framer

A drawing board component to sketch, annotate, and collaborate on your site.

FEATURES

- Tools: Pen, Eraser, Line, Rectangle, Circle, Text (inline editing), Select, Lasso.

- Selection: click, Shift+Click multi-select, lasso, drag selected shapes together.

- Resize: corner handles for every shape type (rect, circle, text, image, line).

- Layers panel (optional): list, select, reorder, delete; starts collapsed.

- Clipboard: paste images (Ctrl/Cmd+V), auto-resized to max 1024px.

- History: undo/redo up to 50 steps.

- Merge/Flatten: toolbar button or Ctrl+J bakes visible shapes into one transparent PNG "Snapshot" layer covering the canvas. Locked, background not baked, hidden layers preserved, one Ctrl+Z restores all vectors. No-op when empty/already flat; toast on success. Reduces memory and speeds up drawing.

- Persistence: localStorage via Storage Key; empty key = temporary.

- Theme: light/dark, custom canvas background.

SHORTCUTS

V select · B pen · E eraser · L line · R rect · C circle · T text · A lasso

Ctrl+Z undo · Ctrl+Shift+Z redo · Ctrl+J merge · Delete remove

[ / ] brush size · 0-9 opacity · hold Ctrl for temporary eraser

FRAMER CONTROLS

Storage Key, View Only, Theme, Canvas BG, Layers Panel.

TECHNICAL

React + HTML5 Canvas, no dependencies. HiDPI, touch, ResizeObserver. Image cache capped at 24; flatten uses offscreen canvas at DPR <=2. Shape validation on load.

SHAPES

Lines, rectangles, circles, text, images.

HOW TO USE

1. Add DrawBoard to the canvas.

2. Set properties in the right panel.

3. Preview/publish to draw, select, resize, undo, paste, and merge.