Installation
Add CanvasFlow to a project, check the optional peers, and make sure your bundler picks the right entry.
Install the package#
npm install canvasflow
That's the whole install. CanvasFlow has no runtime dependencies, so this one package is all that lands in node_modules.
Optional peers#
Frameworks are peers, and they're optional. You only need the ones you import:
| If you import | You also need |
|---|---|
canvasflow/react |
react and react-dom (18 or newer) |
canvasflow/vue |
vue (3.3 or newer) |
canvasflow/solid |
solid-js (1.8 or newer) |
canvasflow/angular |
@angular/core (17 or newer) |
canvasflow/preact |
preact (10) |
canvasflow/shadow |
@shadow-js/core (1.0 or newer) |
canvasflow/react-native |
react-native (0.74 or newer) and react-native-svg (15 or newer) |
canvasflow/svelte, dom, ui, collab, convex, server and the core |
nothing |
Requirements#
- Browsers: current Chrome, Edge, Safari and Firefox, on desktop and mobile.
- Node: 18 or newer for the headless core and the sync server.
- TypeScript: types ship with the package. No
@typesinstall needed.
Bundlers and entry points#
CanvasFlow is ESM with a CommonJS fallback, declared through exports. Every bundler that understands package exports (Vite, Next.js, webpack 5, esbuild, Rollup, Metro) resolves the right files by itself.
Next.js#
Nothing to configure. The React entry is marked 'use client', and the DOM entry is safe to import during server rendering: it renders an empty box on the server and mounts the canvas in the browser. See React and Next.js for the details.
Check that it works#
import { createEditor } from 'canvasflow'
const editor = createEditor()
editor.createShape({ type: 'geo', x: 0, y: 0, props: { w: 100, h: 60 } })
console.log(editor.getCurrentPageShapes().length) // 1
Run it with Node or any test runner. If it prints 1, the engine is installed and working, no browser required.