Introduction
What CanvasFlow is, what it gives you on day one, and how it differs from drawing on a canvas element.
CanvasFlow is an engine for building whiteboards, diagram tools and sketching apps. Think Excalidraw or tldraw, but as a foundation you own: a complete editor you can drop into a page today, built on a headless core you can take apart tomorrow.
It ships as one npm package with zero runtime dependencies. You import the layers you need, and nothing else ends up in your bundle.
A live CanvasFlow editor runs here when JavaScript is on.
Why another canvas engine#
Most whiteboards draw into a <canvas> element. That's fast to paint, but every pixel is just a pixel: to know what's under the pointer, the app keeps its own model and guesses. Thin lines are hard to grab, hollow shapes swallow clicks, and accessibility starts from nothing.
CanvasFlow renders real SVG and gives every shape real geometry. One outline drives what you see, what you hover, what you select, what snaps and where arrows attach. When a star has no fill, clicking its middle selects nothing. When a line is 1.5 pixels wide, it's still easy to pick up. It looks right because it is right.
What you get#
- A complete editor: Select, draw, shapes, lines and arrows, text, sticky notes, frames, images and embeds. Undo, snapping, groups, pages, export.
- A headless core: The editor runs anywhere JavaScript runs: browsers, workers, Node, React Native, tests.
- Collaboration: Field-level merging, presence, follow mode, offline edits that merge later. Any transport.
- Extensibility: Your own shapes, tools, actions, storage and plugins, without forking anything.
How it's organized#
One package, a handful of entry points. Each one only depends on the layers below it:
| Import | What it is |
|---|---|
canvasflow |
The headless engine: editor, store, history, geometry, shapes, tools, actions, sync, storage, plugins, SVG export |
canvasflow/dom |
The web host: SVG renderer, pointer and keyboard input, text editing, clipboard, drag and drop, PNG export |
canvasflow/ui |
The default interface: toolbar, style panel, menus, ⌘K palette, pages, zoom, toasts |
canvasflow/react, vue, solid, svelte, angular, preact, shadow |
A binding for each framework: a component (or action), a headless version, and the editor's state in the framework's own reactivity |
canvasflow/react-native |
<CanvasFlowView/> on react-native-svg, with multi-touch and native text input |
canvasflow/collab |
The collaboration client, presence, and browser or WebSocket transports |
canvasflow/server |
A zero-dependency WebSocket relay you can run with npx canvasflow-server |
canvasflow/convex |
Tables, functions and a transport for syncing through Convex |
You'll read more about how these fit in How it fits together.
What it's good for#
- Whiteboards and sketching apps, from a quick team board to a full Excalidraw-style product.
- Diagram editors: flowcharts, ER diagrams, architecture maps, mind maps.
- Canvases inside other apps: a sketch pad in a note, an annotation layer over an image, a planning board in a dashboard.
- Server-side rendering of drawings: thumbnails, exports and previews without a browser.