Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.
ExamplesEdgesCustom Connection Line

Custom Connection Line

This example demonstrates how to customize the connection line that appears while dragging from a handle. You can modify the appearance and behavior of the connection line by implementing a custom connection line component.

<script lang="ts"> import { SvelteFlow, Background, type Edge, type Node, MiniMap, } from '@xyflow/svelte'; import CustomNode from './CustomNode.svelte'; import ConnectionLine from './ConnectionLine.svelte'; import '@xyflow/svelte/dist/style.css'; const nodeTypes = { custom: CustomNode, }; let nodes = $state.raw<Node[]>([ { id: 'connectionline-1', type: 'custom', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, }, ]); let edges = $state.raw<Edge[]>([]); </script> <SvelteFlow bind:nodes bind:edges {nodeTypes} fitView connectionLineComponent={ConnectionLine} > <Background /> <MiniMap /> </SvelteFlow>
Last updated on