fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Flow

FlowCanvas

The node canvas on its own: pan and zoom, drag to connect nodes, an actions panel to add steps, an inspector for the selected node, undo and redo. Takes no props; state lives in the exported `flow` store. Needs a container with an explicit height.

All components Source

Install

FlowCanvas is a Svelte 5 workflow canvas component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import 
import '@fractaldesign/machines-ui/style.css';
import { FlowCanvas } from '@fractaldesign/machines-ui';

Usage

Example 
<div class="canvas-host">
  <FlowCanvas />
</div>

Props

This component takes no props of its own.

Related components

FlowNode A flow node in two looks: `frame`, our dashed character frame, and `card`, the rounded tinted card of the…