Demos

Start at the app’s explorations, or use the direct links below. The six demos share a field-guide navigation sidebar, a canvas, viewport controls, a pannable and zoomable minimap, and a source panel. The sidebar labels differ from some page titles; both are listed here so you can find the same example from either direction.

Each demo imports its own +page.svelte as raw source and passes it to the shared source panel. The source shown belongs to that route; shared renderers and helpers are separate files. The Field notes link opens the corresponding section of this page.

These are descriptions of authored interactions from source, not a browser-verification receipt. Use concepts for model and validation boundaries, recipes for assistant prompts, and operations for verification and deployment procedures.

basic

Open Basic canvas. Its sidebar label is The basics.

The starter graph contains Incoming event, Make it useful, Ship the result, and a note titled Your canvas, your rules. Two edges form the input-to-transform-to-sink path.

1. Drag a node to change its position.
2. Drag between source and target handles to add a data connection; watch the live edge count.
3. Pan, zoom, and fit the graph with the viewport controls, or navigate with the minimap.
4. Use Reset canvas to restore the starter graph and its counts.

This is the basic Svelte Flow connection example. It uses the library’s edge-adder rather than the showcase’s shared topology validator; do not treat an accepted wire here as a full graph-validity check.

nodes

Open Custom nodes. Its sidebar label is Custom nodes.

The graph includes all five kinds: input, transform, branch, sink, and note. A branch has separate yes and no outcomes. One shared custom renderer presents those roles and their handles.

1. Click a node to open its Inspector state; the starter input is selected initially.
2. Edit Display title and observe the node label update.
3. Edit existing Parameters. Boolean values use toggles, numbers use numeric inputs, and the other starter values use text inputs.
4. Choose Add transform to append and select a configured transform with operation and enabled parameters.
5. Use Reset nodes to restore the fixture. Clicking the empty pane clears the inspector selection.

This inspector edits the fields already present on a node; it is not a schema builder or a source-code generator. New connections are data edges. See concepts for the node and handle contract, and recipes > custom-node for the assistant’s configured-node proposal.

edges

Open Typed edges. Its sidebar label is Expressive edges.

The fixture routes an incoming payload through a processing step toward data, control, and error destinations. Line patterns communicate kind: solid data, dashed control, and dotted error.

1. Use Path geometry to choose Bezier, Smoothstep, or Straight. The choice changes the geometry of the current edges, not their semantic kind.
2. Toggle Animate all to set animation on every current edge.
3. Drag between handles to add another labelled data edge using the current geometry.
4. Compare the typed-edge and animated-edge counts.
5. Use Reset edges to restore the fixture and its initial mixed geometry.

The demo intentionally overrides factory geometry: its initial error route uses the custom straight renderer, while the shared graph factory’s default error edge is a step. Geometry and meaning are independent here. Animation demonstrates rendering, not live traffic or execution.

layout

Open Layout, on purpose. Its sidebar label is Finding structure.

The seven-node fixture splits collection into cleaning and enrichment, merges the paths, and branches toward publish or review. The same nodes and edges are passed to the shared deterministic layout helper.

1. Choose Horizontal for left-to-right layout or Vertical for top-to-bottom layout.
2. Change Node spacing between Compact spacing, Balanced spacing, and Airy spacing.
3. Drag a node, then choose Re-apply layout to restore the computed arrangement for the current options.
4. Compare the direction and spacing shown on the canvas panel.

The presets change both layer gap and node gap. Layout updates geometry; it does not fix an invalid connection, execute the graph, or guarantee a globally optimal drawing. See concepts for ranking, cycle handling, stable ordering, and dimension-dependent placement.

interaction

Open Edit without losing the thread. Its sidebar label is In your hands.

This route adds explicit local edit history and shared connection validation to a small workflow.

1. Choose Add step to append a transform and select it.
2. Click a node, then choose Delete selected to remove it and its incident edges.
3. Drag a connection between handles. The Activity panel reports acceptance or a structured validation code and message.
4. Use Undo and Redo to traverse recorded edits; the controls show available history counts.
5. Use Reset to restore the starter graph. Reset itself is a recorded edit, so it can be undone.

The explicit history records add, delete, reset, and accepted connections. It is in-memory page state, not persisted revision storage; reloading starts again. Do not assume a visual drag is a separately recorded history entry.

Connection validation rejects missing endpoints, self-links, duplicates, connections into inputs, and connections out of sinks. The shared validator also guards control-only cycles; this demo creates data connections, so that is not a blanket ban on every cycle. See concepts for the exact validation scope rather than inferring it from what looks unusual on the canvas.

scale

Open A thousand nodes, still inspectable. Its sidebar label is Thinking bigger.

The route starts with a generated 1,000-node graph and visible-elements rendering enabled. The generator arranges lane-like chains in a grid; this is a real node-and-edge workload, not a background illustration.

1. Use Nodes to choose 100, 500, or 1,000 nodes. Changing the count replaces the current graph with a generated one.
2. Pan and zoom to explore different visible regions.
3. Toggle Render visible nodes only to change the rendering strategy.
4. Choose Sample next frame to request a browser-local timing observation.
5. Read Frame observations alongside the selected count and rendering mode.

First frame measures the next animation frame after the route mounts. Timed sample measures the next frame after an explicit sampling action or a workload/rendering change, using performance.now() and requestAnimationFrame. These are not complete-render timings, sustained FPS, interaction latency distributions, or portable benchmark results. No throughput target or persistent telemetry is implied.

The assistant’s recipes > scale recipe provides guidance without silently generating thousands of nodes.

craft

Open the craft playground, also reachable from the demo sidebar’s Make it your own link.

Craft is the workflow-composition surface and the home of the local assistant. Begin with recipes > add-node, recipes > branch-fan-out, or recipes > validate-graph rather than treating a demo’s isolated controls as the complete editor contract.

1. Choose a Node kind and use Add node. All five model kinds are available.
2. Select a node and edit Title, A little context, and Parameters in the inspector. Parameters must be a JSON object; Save details validates the candidate graph before committing the edit.
3. Set New connections to data, control, or error, then connect handles. The chosen kind is used for the shared connection check and the new edge.
4. Choose Horizontal or Vertical and use Auto layout. Use Check graph to inspect the current graph’s structured validation result.
5. Delete selection removes selected nodes and edges, including edges attached to removed nodes. Undo and Redo navigate the bounded in-memory history; Reset canvas is itself undoable.
6. Use Share to open the share-link dialog, then Copy share link. If clipboard access is unavailable, select and copy the displayed link manually.

Craft records graph edits and drag starts in history, retaining at most 80 snapshots in each history direction. Ctrl/Cmd+Z undoes, Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y redoes; the shortcuts defer to text fields and dialogs rather than stealing their input.

A share link contains a graph in the URL fragment, not a server-side workspace. Opening a valid link loads a local copy; an invalid fragment reports share_invalid and keeps the current canvas. The recipes > share section explains the size cap and disclosure boundary.

Assistant submission proposes a response; it does not apply graph changes automatically. Inspect the ordered patches and apply them explicitly. assistant documents the assistant controls and recipes distinguishes editing proposals from guidance, undo, and share actions.

Source map

• Demo routes: src/routes/demo/basic/+page.svelte, nodes/+page.svelte, edges/+page.svelte, layout/+page.svelte, interaction/+page.svelte, and scale/+page.svelte under the same route directory.
• Craft editor: src/routes/craft/+page.svelte.
• Shared demo navigation and composition: src/lib/components/DemoShell.svelte.
• Fixtures and scale generator: src/lib/flow/graph.ts.
• Layout and validation: src/lib/flow/layout.ts and src/lib/flow/validate.ts.
• Assistant recipes and proposals: src/lib/assist/kb.ts and src/lib/assist/intent.ts.