Options
Every option for the editor, the web host, the default UI, collaboration, persistence and the sync server.
Editor options#
Accepted by createEditor(), createCanvasFlow(), <CanvasFlow/> and <CanvasFlowView/>.
| Option | Type | Description |
|---|---|---|
shapes |
ShapeUtilConstructor[] |
Extra shape types. A type with the same name as a built-in replaces it |
tools |
StateNodeConstructor[] |
Extra tools, replacing built-ins with the same id |
plugins |
CanvasFlowPlugin[] |
Code plugins |
initialState |
Partial<InstanceState> |
Starting instance state: grid, theme, toolId, objectSnap… |
snapshot |
CanvasFlowSnapshot |
Start from a saved document |
readonly |
boolean |
Start in view mode |
historyLimit |
number |
Maximum undo steps |
assets |
AssetStore |
Where images and files are uploaded. Default: embedded data URLs |
clientId |
string |
This client's id, for collaboration |
isApple |
boolean |
Whether mod means ⌘. Detected on the web |
measurer |
TextMeasurer |
How text is measured. The web host uses the browser |
scheduler |
Scheduler |
Timers and animation frames (tests pass a manual one) |
Web host options#
createCanvasFlow(container, options) and <CanvasFlow/> accept the editor options plus:
| Option | Type | Description |
|---|---|---|
persistenceKey |
string |
Autosave under this key |
storage |
StorageAdapter |
Where autosave writes. Default: IndexedDB, then localStorage |
themes |
{ light?: Theme; dark?: Theme } |
Your palettes |
followSystemTheme |
boolean |
Follow the OS until the person picks a theme |
label |
string |
The canvas's accessible name |
dir |
'auto' | 'ltr' | 'rtl' |
Layout direction. auto (the default) follows the page. See Right to left |
editor |
Editor |
Mount an existing editor (createCanvasFlow only) |
The returned app has editor, root, uiLayer, persistence, direction, setDirection(direction), addOverlayLayer(layer, order), invalidate(), the export methods (exportSvg, exportPng, downloadPng, downloadSvg, copyAsPng, copyAsSvg), the file methods (saveFile, openFile, insertImages, insertText, paste), focus() and destroy().
Default UI options#
mountUI(app, options), or the ui prop in React.
| Option | Type | Description |
|---|---|---|
toolbar, stylePanel, menu, pages, zoom, layers, minimap, emptyHint |
boolean |
Show or hide each area |
tools, moreTools |
{ id, icon, label }[] |
The toolbar's tools and its overflow menu |
topLeft, topRight |
HTMLElement[] |
Your own elements in the top corners |
menuItems |
(ctx) => MenuEntry[] |
Extra entries at the top of the main menu |
panels |
Partial<UIPanels> |
Which panels start open |
Collaboration options#
new CollabClient(editor, transport, options) and connect(editor, options).
| Option | Type | Description |
|---|---|---|
room |
string |
The document to join |
user |
{ id?, name?, color? } |
How others see you |
cache |
StorageAdapter |
Offline replica that survives restarts |
presenceInterval |
number |
Presence send rate, in ms |
peerTimeout |
number |
Drop silent peers after this many ms |
url |
string |
connect only: a WebSocket server. Omit to sync tabs on this device |
WebSocketTransport(url, { maxDelay, WebSocket }) takes a reconnect cap and an optional WebSocket constructor (for Node).
Persistence options#
persistencePlugin(options).
| Option | Type | Description |
|---|---|---|
key |
string |
The document's key |
storage |
StorageAdapter |
Where it's saved |
sessionStorage |
StorageAdapter |
Where the person's view is saved |
sessionKeys |
(keyof InstanceState)[] |
Which instance state to remember |
delay |
number |
Debounce in ms |
onStatus |
(state, error?) => void |
idle, loading, saving, saved, error |
onLoaded |
(found) => void |
After the first load |
Sync server options#
startServer(options) from canvasflow/server, or npx canvasflow-server --port 8787 --data ./rooms.
| Option | Type | Description |
|---|---|---|
port |
number |
Default PORT or 8787 |
dataDir |
string |
Where rooms are saved. Omit to keep them in memory |
maxPayload |
number |
Largest message, in bytes |
log |
(message) => void |
Where log lines go |
Convex options#
See Sync with Convex.