CanvasFlowCanvasFlowv1.0.0
[]previous and next page

Packages and entry points

What each of CanvasFlow's entry points exports, what it depends on, and where it runs.

Entry Runs in Depends on
canvasflow Anywhere JavaScript runs Nothing
canvasflow/dom Browsers, Electron, webviews canvasflow
canvasflow/ui Browsers canvasflow, canvasflow/dom
canvasflow/react React DOM, Next.js the three above, react, react-dom
canvasflow/vue Vue 3 canvasflow, canvasflow/dom, canvasflow/ui, vue
canvasflow/solid Solid, Solid Start the three above, solid-js
canvasflow/svelte Svelte 3, 4 and 5, SvelteKit the three above
canvasflow/angular Angular 17 and newer the three above, @angular/core
canvasflow/preact Preact 10 the three above, preact
canvasflow/shadow ShadowJS, Dusk the three above, @shadow-js/core
canvasflow/react-native iOS and Android canvasflow, react-native, react-native-svg
canvasflow/collab Browsers, Node, React Native canvasflow
canvasflow/server Node canvasflow
canvasflow/convex Convex functions and clients canvasflow

canvasflow#

The headless engine.

  • Editor: createEditor, Editor, defaultShapeUtils, defaultTools, createDefaultActions
  • Store: Store, History, record types, RecordsDiff, DOCUMENT_ID
  • Shapes: ShapeUtil, defineShape, every built-in util (GeoShapeUtil, ArrowShapeUtilā€¦), GEO_KINDS, render helpers (polygonNodes, labelNode, arrowheadNode, strokeAttrs, fillPaint)
  • Geometry and math: Geometry, GroupGeometry, rectVertices, ellipseVertices, Vec, Mat, Box, intersections, SVG path parsing
  • Tools: StateNode, createBoxTool, createGeoTool, every built-in tool
  • Actions: ActionRegistry, parseShortcut, formatShortcut
  • Styles and themes: STYLE_DEFINITIONS, ARROWHEADS, COLOR_TOKENS, lightTheme, darkTheme, FONT_STACKS
  • Sync: SyncDoc (the CRDT)
  • Storage: persistencePlugin, memoryStorage, StorageAdapter, AssetStore
  • Plugins: installPlugin, validatePluginManifest, validateShapeSpec, getCatalog, placeSpec, createSpecFromShapes
  • Files: exportToSvgString, toFile, parseFile, migrateSnapshot, registerMigration, SCHEMA_VERSION

canvasflow/dom#

createCanvasFlow, defineCanvasFlowElement (the <canvas-flow> element), indexedDBAdapter, localStorageAdapter, DRAG_MIME, the SVG renderer and overlay, PNG and SVG export helpers.

canvasflow/ui#

mountUI, its option types, and the building blocks it's made of, for apps that extend it.

canvasflow/react#

CanvasFlow, CanvasFlowCanvas, CanvasFlowProvider, useEditor, useValue, useEditorEvent, useCanvasFlow, reactNode. Marked 'use client'. See React and Next.js.

The other bindings#

All of them export everything from canvasflow, plus:

  • canvasflow/vue: CanvasFlow, CanvasFlowCanvas, useCanvasFlow, useEditor, useValue, useEditorEvent, useSelectedIds, useTool, useCamera, useCanUndo, useCanRedo, useTheme, useDirection. See Vue.
  • canvasflow/solid: the same names, as Solid components and primitives. See Solid.
  • canvasflow/preact: the same names, on Preact's hooks. See Preact.
  • canvasflow/svelte: createFlow, createFlowCanvas, flowStores. See Svelte.
  • canvasflow/angular: mountCanvasFlow, mountCanvasFlowCanvas, CanvasFlowRef. See Angular.
  • canvasflow/shadow: CanvasFlow, CanvasFlowCanvas, useValue, useEditorEvent, useSelectedIds, useTool, useCamera, useCanUndo, useCanRedo, useTheme, useDirection. See ShadowJS.

Each also exports the types FlowOptions, FlowMountHandler and FlowHandle.

canvasflow/react-native#

Everything from canvasflow, plus CanvasFlowView, useEditor, useValue, renderNode, NodeView and NATIVE_FONTS.

canvasflow/collab#

connect, CollabClient, BroadcastChannelTransport, WebSocketTransport, createMemoryTransportPair, createPresenceLayer, createPresenceAvatars, and the protocol types (Message, Presence, Transport).

canvasflow/server#

startServer. Also runnable as npx canvasflow-server.

canvasflow/convex#

canvasflowTables, canvasflowFunctions, ConvexTransport, CANVASFLOW_TABLES.

Formats#

Every entry ships as ESM with type declarations and a CommonJS build. The package is marked sideEffects: false. See Bundle size.