Back to components
ComponentBoardFree
Whiteboard Canvas React component
An interactive SVG canvas with freehand drawing, rectangles, ellipses, object selection and movement, undo/redo and SVG export.
About the Whiteboard Canvas component
A self-contained SVG drawing board with pen, rectangle and ellipse tools, selection, an object list, erasing and SVG downloads.
When to use it
Sketch interface flows and rough diagrams.
Add a lightweight drawing surface to a workspace.
Installation
Add the Whiteboard Canvas component to your project with the shadcn CLI. It lands in components/whiteboard-canvas.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/whiteboard-canvasOr copy the source by hand and install its dependencies:
Install
Copied!
npm install lucide-react clsx tailwind-mergeProps
<WhiteboardCanvas /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Discovery canvas" |
| theme | "dark" | "light" | "dark" |
| initialShapes | { id: string; type: "pen" | "rectangle" | "ellipse"; color: string; label?: string; points: { x: number; y: number }[] }[] | seed |
| onShapesChange | (shapes: WhiteboardShape[]) => void | — |
| className | string | — |
- titlestringDefault: "Discovery canvas"
- theme"dark" | "light"Default: "dark"
- initialShapes{ id: string; type: "pen" | "rectangle" | "ellipse"; color: string; label?: string; points: { x: number; y: number }[] }[]Default: seed
- onShapesChange(shapes: WhiteboardShape[]) => void
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Whiteboard Canvas FAQ
- How do undo and export work?
- Each completed gesture creates one undo step, with up to 50 previous states. Export downloads vector SVG. There is no remote persistence; use onShapesChange to store the data.
- Can I use a keyboard?
- Select an object through the object list, then use arrow keys to move it, Delete to remove it and Escape to deselect. Undo and redo are available as buttons and with Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z while the canvas is focused.
