Svelte AI Elements

Edge

The Edge component provides two pre-styled edge types for Svelte Flow canvases: Temporary for dashed temporary connections and Animated for connections with animated indicators.

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.

🔵 Animated edges show moving indicators | ⚪ Temporary edges use dashed lines

Installation

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

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

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

Usage

edge-example.svelte

Features

  • • Two distinct edge types: Temporary and Animated
  • • Temporary edges use dashed lines with ring color
  • • Animated edges include a moving circle indicator
  • • Automatic handle position calculation
  • • Smart offset calculation based on handle type and position
  • • Uses Bezier curves for smooth, natural-looking connections
  • • Fully compatible with Svelte Flow's edge system
  • • Type-safe implementation with TypeScript

Edge Types

Edge.Temporary

A dashed edge style for temporary or preview connections. Uses a simple Bezier path with a dashed stroke pattern.

Edge.Animated

A solid edge with an animated circle that moves along the path. The animation repeats indefinitely with a 2-second duration, providing visual feedback for active connections.

Props

Both edge types accept standard Svelte Flow EdgeProps:

id

string - Unique identifier for the edge.

source

string - ID of the source node.

target

string - ID of the target node.

sourcePosition?

Position - Position of the source handle (Left, Right, Top, Bottom).

targetPosition?

Position - Position of the target handle (Left, Right, Top, Bottom).