Preact

canvasflow/preact is the React binding written for Preact's own hooks, so you do not need preact/compat. It has the same components and hooks as React and needs preact 10.

A board in one component#

Board.tsxtsx

import { CanvasFlow } from 'canvasflow/preact'

export function Board() {
  return <CanvasFlow persistenceKey="board" style={{ height: '100vh' }} />
}

<CanvasFlow> mounts the canvas and the default UI into a div that fills its parent. Give it a height, because an editor needs room.

Props#

Everything createCanvasFlow accepts is a prop (persistenceKey, dir, readonly, themes, plugins, shapes, tools, storage…), plus:

Prop	What it does
`ui`	`false` for no default UI, or an object that configures it (see Customizing the UI).
`onMount`	Called once with `(editor, app, ui)`. Return a function and it runs as a cleanup.
`class`, `style`	Passed to the element.
`children`	Rendered inside the canvas once it is ready.

Options are read once, when the canvas mounts. Change the component's key to remount with new ones. dir and readonly follow later changes.

Your own panels#

Children render inside the canvas, so the hooks work in them:

SelectionCount.tsxtsx

import { useSelectedIds, useValue } from 'canvasflow/preact'

export function SelectionCount() {
  const selected = useSelectedIds()
  const shapes = useValue((editor) => editor.getCurrentPageShapes().length)
  return (
    <div class="badge">
      {selected.length} selected of {shapes}
    </div>
  )
}

useValue(selector, isEqual?) re-renders only when the selector's result changes. useEditor(), useEditorEvent, useTool, useCamera, useCanUndo, useCanRedo, useTheme and useDirection work as they do in React.

Headless#

<CanvasFlowCanvas> is the canvas without the default UI, and never references it, so your bundle does not carry the toolbar. See Building your own UI.

Preact with preact/compat#

If your app already aliases react to preact/compat, canvasflow/react works too. Prefer canvasflow/preact: it is smaller and has no compatibility layer.