Svelte AI Elements

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.

Svelte Flow
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

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/canvas.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/workflow

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