Skip to Content
📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!
ExamplesEdgesSimple Floating Edges

Simple Floating Edges

This example shows how to implement an edge type that dynamically connects to the closest handle.

<script lang="ts"> import { writable } from 'svelte/store'; import { SvelteFlow, Background, ConnectionMode, type Node, type Edge } from '@xyflow/svelte'; import '@xyflow/svelte/dist/style.css'; import { initialNodes, initialEdges } from './nodes-and-edges'; import CustomNode from './CustomNode.svelte'; import SimpleFloatingEdge from './SimpleFloatingEdge.svelte'; const nodes = writable<Node[]>(initialNodes); const edges = writable<Edge[]>(initialEdges); const nodeTypes = { custom: CustomNode }; const edgeTypes = { floating: SimpleFloatingEdge }; </script> <div style="height:100vh;"> <SvelteFlow {nodes} {nodeTypes} {edges} {edgeTypes} fitView connectionMode={ConnectionMode.Loose}> <Background /> </SvelteFlow> </div>
⚠️
To surpress unknown prop warnings in the browser console, please refer to the guide.
Last updated on