Canvas
The Canvas component provides a Svelte Flow-based canvas for building interactive node-based interfaces. It comes pre-configured with sensible defaults for AI applications, including panning, zooming, and selection behaviors.
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
💡 Try: Pan (scroll), Zoom (scroll wheel), Drag nodes, Select multiple nodes
Installation
If you prefer using jsrepo, please install via the command below:
Usage
canvas-example.svelte
Features
- • Pre-configured Svelte Flow canvas with AI-optimized defaults
- • Pan on scroll enabled for intuitive navigation
- • Selection on drag for multi-node operations
- • Customizable background color using CSS variables
- • Zoom on double-click for quick navigation
- • Auto-fit view to show all nodes
- • Theme-aware with automatic dark/light mode support
- • Fully compatible with Svelte Flow props and API
Props
nodes
Node[] - Array of nodes to display on the canvas. Use bind:nodes for two-way binding.
edges
Edge[] - Array of edges connecting nodes. Use bind:edges for two-way binding.
children?
Snippet - Child components like Controls, Panels, or custom overlays.
[...props]
SvelteFlowProps - Any other Svelte Flow props like nodeTypes, edgeTypes, onNodesChange, etc.
Example with Custom Node Types
workflow-canvas.svelte