Svelte AI Elements

Connection

The Connection component provides a styled connection line for Svelte Flow canvases. It renders an animated bezier curve with a circle indicator at the target end, using consistent theming through CSS variables.

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 it: Drag from the Source node's right edge to connect to Target A or Target B

Installation

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

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

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

Usage

connection-example.svelte

Features

  • • Smooth bezier curve animation for connection lines
  • • Visual indicator circle at the target position
  • • Theme-aware styling using CSS variables
  • • Cubic bezier curve calculation for natural flow
  • • Lightweight implementation with minimal props
  • • Full TypeScript support with Svelte Flow types
  • • Compatible with Svelte Flow's connection system

Props

fromX

number - The x-coordinate of the connection start point (automatically provided by Svelte Flow).

fromY

number - The y-coordinate of the connection start point (automatically provided by Svelte Flow).

toX

number - The x-coordinate of the connection end point (follows cursor during drag).

toY

number - The y-coordinate of the connection end point (follows cursor during drag).

How It Works

The Connection component creates an interactive preview while dragging from one node to another:

  • Real-time Preview: Shows animated bezier curve following your cursor while dragging from a source node
  • Visual Feedback: Displays an indicator circle at the cursor position showing where the connection will end
  • Smooth Animation: Uses cubic bezier curves for natural, flowing connection paths that feel organic
  • Theme Integration: Automatically adapts colors to your theme using CSS variables like --primary and --card
  • Drop Zones: Integrates with Svelte Flow to highlight valid target nodes when hovering during connection creation

Interactive Example

Here's an advanced example showing connection tracking with real-time feedback:

advanced-connection.svelte

Styling

Customize the connection line appearance using CSS variables and global styles:

custom-connection-styles.css

Best Practices

  • Always use with Canvas: The Connection component requires Canvas context to function properly and access node positions
  • Enable connection handles: Ensure your nodes have properly configured connection handles for drag interactions
  • Track edge changes: Use $effect to monitor edges array and update your UI with connection status
  • Validate connections: Implement isValidConnection callback to prevent invalid node connections
  • Provide user feedback: Show connection count, source/target labels, or status indicators after creating edges
  • Consider accessibility: Ensure sufficient color contrast and provide keyboard alternatives for connection creation

Accessibility

The Connection component is designed with accessibility in mind:

  • • Visual indicator circle helps users with motor impairments track cursor position during dragging
  • • High contrast mode support through theme-aware CSS variables (--primary, --card)
  • • Smooth animations respect user's prefers-reduced-motion system settings
  • • Clear visual feedback with 2px stroke width ensures visibility on various displays
  • • Works with keyboard navigation when used alongside Svelte Flow's built-in accessibility features