# Svelte Flow documentation

> Svelte Flow is a library for building interactive, node-based user interfaces such as flowcharts, diagrams, visual programming tools, and workflows. It supports theming, custom nodes and edges, and a library of components built for Svelte.

## Guides

- [Quickstart](https://svelteflow.dev/learn): A quickstart guide to getting started with Svelte Flow - a library for building interactive node-based interfaces in Svelte applications. Learn installation, setup, and create your first flow diagram.
- Getting Started
  - [Key Concepts](https://svelteflow.dev/learn/getting-started/key-concepts): Understand the fundamental concepts of Svelte Flow - from the interactive canvas and node-edge system to viewport management and built-in components. Essential reading for developers starting with Svelte Flow.
  - [Installation](https://svelteflow.dev/learn/getting-started/installation): Learn how to install and set up Svelte Flow in your project. Includes package installation via npm/yarn/pnpm/bun, style imports, and a quick-start template for Vite and Svelte projects.
  - [Building a Flow](https://svelteflow.dev/learn/getting-started/building-a-flow): A step-by-step guide to creating your first flow diagram with Svelte Flow. Learn how to set up the canvas, add nodes and edges, and enhance your flow with built-in features like viewport fitting and custom node types.
  - [Built-in Components](https://svelteflow.dev/learn/getting-started/built-in-components): Learn about Svelte Flow's essential built-in components including the minimap for navigation, viewport controls, customizable background patterns, and overlay panels. These components enhance the user experience and provide core functionality for flow diagrams.
- Customizing Svelte Flow
  - [Custom Nodes](https://svelteflow.dev/learn/customization/custom-nodes): Learn how to create and implement custom nodes in Svelte Flow. This guide covers node component creation, handle management, positioning, and utility classes for building interactive and flexible flow diagrams.
  - [Custom Edges](https://svelteflow.dev/learn/customization/custom-edges): Learn how to create custom edges in Svelte Flow using Svelte components. This guide covers edge path creation, label implementation, and SVG path customization for building unique and interactive flow connections.
  - [Theming](https://svelteflow.dev/learn/customization/theming): Learn how to customize Svelte Flow's appearance through CSS variables, class overrides, and styling solutions like Tailwind. This guide covers default styles, base styles, and various theming approaches for creating cohesive flow diagrams.
- Layouting
  - [Layouting Libraries](https://svelteflow.dev/learn/layouting/layouting-libraries): Explore various layouting libraries compatible with Svelte Flow, including Dagre, D3-Hierarchy, D3-Force, and ELK. Learn how to implement different layout algorithms for nodes and edges in your flow diagrams.
  - [Sub Flows](https://svelteflow.dev/learn/layouting/sub-flows): Learn how to implement and manage sub-flows in Svelte Flow. This guide covers parent-child node relationships, node positioning, movement constraints, and creating nested flow diagrams with custom parent nodes.
- Advanced Use
  - [TypeScript](https://svelteflow.dev/learn/advanced/typescript): A comprehensive guide to using Svelte Flow with TypeScript. Learn how to type nodes, edges, and custom components, handle type unions, and implement type-safe flow diagrams in your Svelte applications.
  - [Server Side Rendering](https://svelteflow.dev/learn/advanced/server-side-rendering): Learn how to implement server-side rendering with Svelte Flow for static flow diagrams, dynamic image generation, and non-JavaScript environments. Includes configuration for node dimensions, handle positions, and viewport fitting.
- Troubleshooting
  - [Migrate to v1](https://svelteflow.dev/learn/troubleshooting/migrate-to-v1): A comprehensive guide to migrating from Svelte Flow v0 to v1. Learn about state management changes, component binding updates, hook modifications, and new features for a smooth transition to the latest version.
  - [Remove Attribution](https://svelteflow.dev/learn/troubleshooting/remove-attribution): When and how to remove the Svelte Flow attribution from your flows.

## Examples

- Nodes
  - [Add Node on Edge Drop](https://svelteflow.dev/examples/nodes/add-node-on-edge-drop): A new node appears wherever you drop the connection line
  - [Connection Limit](https://svelteflow.dev/examples/nodes/connection-limit): Use the `isConnectable` prop to limit the number of connections a handle can have
  - [Custom Node](https://svelteflow.dev/examples/nodes/custom-node): Display any content inside of a node
  - [Delete Middle Node](https://svelteflow.dev/examples/nodes/delete-middle-node): Remove a node without breaking the flow
  - [Drag Handle](https://svelteflow.dev/examples/nodes/drag-handle): Restrict dragging to a specific part of node
  - [Easy Connect](https://svelteflow.dev/examples/nodes/easy-connect): Make the whole node into a handle
  - [Intersections](https://svelteflow.dev/examples/nodes/intersections): Detect when a node overlaps with another node
  - [Node Resizer](https://svelteflow.dev/examples/nodes/node-resizer): Change the size of a node with a bounding box or draggable icon
  - [Proximity Connect](https://svelteflow.dev/examples/nodes/proximity-connect): Automatically create edges when nodes get close to each other
  - [Stress](https://svelteflow.dev/examples/nodes/stress): Render hundreds of nodes and edges at once
  - [Update Node](https://svelteflow.dev/examples/nodes/update-node): Update the data field of a specific node
- Edges
  - [Custom Connection Line](https://svelteflow.dev/examples/edges/custom-connectionline): Create a custom connection line while dragging
  - [Custom Edges](https://svelteflow.dev/examples/edges/custom-edges): Create and use custom edge types
  - [Edge Labels](https://svelteflow.dev/examples/edges/edge-labels): Add and customize labels on edges
  - [Edge Markers](https://svelteflow.dev/examples/edges/edge-markers): Add markers to the start and end of edges
  - [Edge Types](https://svelteflow.dev/examples/edges/edge-types): Use different built-in edge types
  - [Floating Edges](https://svelteflow.dev/examples/edges/floating-edges): Create edges that connect to the viewport
  - [Reconnect Edge](https://svelteflow.dev/examples/edges/reconnect-edge): Make edge reconnectable by using EdgeReconnectAnchor.
  - [Click Connect](https://svelteflow.dev/examples/edges/click-connect): Create a new connection by clicking on a handle one by one. Use this functionality to programatically start a connection.
- Interaction
  - [Computing Flows](https://svelteflow.dev/examples/interaction/computing-flows): Calculate and visualize flow paths between nodes
  - [Context Menu](https://svelteflow.dev/examples/interaction/context-menu): Add a custom context menu to nodes and edges
  - [Contextual Zoom](https://svelteflow.dev/examples/interaction/contextual-zoom): Zoom to specific nodes or areas of the flow
  - [Drag and Drop](https://svelteflow.dev/examples/interaction/drag-and-drop): Drag and drop outside of the Svelte Flow pane with native HTML Drag and Drop API or Neodrag.
  - [Validation](https://svelteflow.dev/examples/interaction/validation): Check if a new connection is valid and should be added
- Layout
  - [Dagre](https://svelteflow.dev/examples/layout/dagre): Use Dagre for hierarchical graph layout
  - [Elkjs](https://svelteflow.dev/examples/layout/elkjs): Use ELK.js for automatic graph layout
  - [Horizontal Flow](https://svelteflow.dev/examples/layout/horizontal-flow): Create a horizontal flow layout
  - [Node Collisions](https://svelteflow.dev/examples/layout/node-collisions): Automatically resolve node overlaps using collision detection algorithms
  - [Subflows](https://svelteflow.dev/examples/layout/subflows): Create nested flows within your graph
- Styling
  - [Base Style](https://svelteflow.dev/examples/styling/base-style): Customize the base styling of your flow
  - [Dark Mode](https://svelteflow.dev/examples/styling/dark-mode): Implement dark mode in your flow
  - [Tailwind](https://svelteflow.dev/examples/styling/tailwind): Style your flow with Tailwind CSS
  - [Turbo Flow](https://svelteflow.dev/examples/styling/turbo-flow): Nodes with glowing animated gradient borders, inspired by the turbo.build website
- Whiteboard
  - [Eraser](https://svelteflow.dev/examples/whiteboard/eraser): An eraser tool that let's you delete nodes and edges by wiping them out
  - [Lasso Selection](https://svelteflow.dev/examples/whiteboard/lasso-selection): Implement lasso selection for nodes using Svelte Flow
  - [Rectangle](https://svelteflow.dev/examples/whiteboard/rectangle): An example about drawing rectangles on a whiteboard using Svelte Flow.
- Misc
  - [Transitions](https://svelteflow.dev/examples/misc/transitions): Use Sveltes in and out transitions to animate nodes & edges
  - [Download Image](https://svelteflow.dev/examples/misc/download-image): Export your flow as an image
  - [Threlte Flow](https://svelteflow.dev/examples/misc/threlte-flow): Use Svelte Flow with Threlte for 3D visualization
  - [Hello World](https://svelteflow.dev/examples/misc/hello-world): Get started with Svelte Flow
  - [Use Svelte Flow](https://svelteflow.dev/examples/misc/use-svelte-flow): Use Svelte Flow's store and actions

## API reference

- [API Reference](https://svelteflow.dev/api-reference)
- [<SvelteFlow />](https://svelteflow.dev/api-reference/svelte-flow): The SvelteFlow component is the heart of your Svelte Flow application.
- [<SvelteFlowProvider />](https://svelteflow.dev/api-reference/svelte-flow-provider): The SvelteFlowProvider component wraps its child nodes with a Svelte context that makes it possible to access a flow's internal state outside of the SvelteFlow component.
- [Components](https://svelteflow.dev/api-reference/components)
  - [<Background />](https://svelteflow.dev/api-reference/components/background): The Background component makes it convenient to render different types of backgrounds common in node-based UIs. It comes with three variants: lines, dots and cross.
  - [<BaseEdge />](https://svelteflow.dev/api-reference/components/base-edge): The BaseEdge component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.
  - [<ControlButton />](https://svelteflow.dev/api-reference/components/control-button): The ControlButton component is used to render custom/ additional buttons for the Controls component.
  - [<Controls />](https://svelteflow.dev/api-reference/components/controls): The Controls component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.
  - [<EdgeLabel />](https://svelteflow.dev/api-reference/components/edge-label): The Edge Label component can be used to add labels to edges.
  - [<EdgeReconnectAnchor />](https://svelteflow.dev/api-reference/components/edge-reconnect-anchor): The EdgeReconnectAnchor component is used to create a reconnection point on your custom edges.
  - [<EdgeToolbar />](https://svelteflow.dev/api-reference/components/edge-toolbar): The EdgeToolbar component can be used to display a toolbar on a side of an edge.
  - [<Handle />](https://svelteflow.dev/api-reference/components/handle): The Handle component is used in your custom nodes to define connection points.
  - [<MiniMap />](https://svelteflow.dev/api-reference/components/mini-map): The MiniMap component renders an overview of your flow. It renders each node as an SVG element and visualizes where the current viewport is in relation to the rest of the flow.
  - [<NodeResizeControl />](https://svelteflow.dev/api-reference/components/node-resize-control): To create your own resizing UI, you can use the NodeResizeControl component where you can pass children (such as icons).
  - [<NodeResizer />](https://svelteflow.dev/api-reference/components/node-resizer): The NodeResizer component can be used to add a resize functionality to your nodes. It renders draggable controls around the node to resize in all directions.
  - [<NodeToolbar />](https://svelteflow.dev/api-reference/components/node-toolbar): The NodeToolbar component can be used to display a toolbar on a side of a node or display a tooltip for example.
  - [<Panel />](https://svelteflow.dev/api-reference/components/panel): The Panel component helps you position content above the viewport. It is used internally by the MiniMap and Controls components.
  - [<ViewportPortal />](https://svelteflow.dev/api-reference/components/viewport-portal): The ViewportPortal component can be used to add components to the same viewport of the flow where nodes and edges are rendered. This is useful when you want to render your own components that are adhere to the same coordinate system as the nodes & edges and are also affected by zooming and panning
- [Hooks](https://svelteflow.dev/api-reference/hooks)
  - [useConnection()](https://svelteflow.dev/api-reference/hooks/use-connection): The useConnection hook returns the current connection when there is an active connection interaction. If no connection interaction is active, it returns null for every property. A typical use case for this hook is to colorize handles based on a certain condition (e.g. if the connection is valid or not).
  - [useEdges()](https://svelteflow.dev/api-reference/hooks/use-edges): The useEdges hook returns an array of the current edges store.
  - [useInternalNode()](https://svelteflow.dev/api-reference/hooks/use-internal-node): The useInternalNode hook returns an internal node.
  - [useNodeConnections()](https://svelteflow.dev/api-reference/hooks/use-node-connections): This hook returns an array of connected edges. Components that use this hook will re-render whenever any edge changes.
  - [useNodes()](https://svelteflow.dev/api-reference/hooks/use-nodes): This hook returns a store of the current nodes array. When you subscribe to this store, it will trigger whenever the nodes array changes. This happens when nodes are added, removed, or updated (dragged for example).
  - [useNodesData()](https://svelteflow.dev/api-reference/hooks/use-nodes-data): With this hook you can receive the data of the passed node ids.
  - [useNodesInitialized()](https://svelteflow.dev/api-reference/hooks/use-nodes-initialized): The useNodesInitialized hook can be used to check if all nodes are initialized.
  - [useOnSelectionChange()](https://svelteflow.dev/api-reference/hooks/use-on-selection-change): This hook lets you listen for changes to both node and edge selection. As the name implies, the callback you provide will be called whenever the selection of either nodes or edges changes.
  - [useStore()](https://svelteflow.dev/api-reference/hooks/use-store): The useStore hook can be used to access the internal store of the Svelte Flow.
  - [useSvelteFlow()](https://svelteflow.dev/api-reference/hooks/use-svelte-flow): The useSvelteFlow hook returns functions to update the viewport, transform coordinates or get node intersections for example.
  - [useUpdateNodeInternals()](https://svelteflow.dev/api-reference/hooks/use-update-node-internals): When you programmatically add or remove handles to a node or update a node's handle position, you need to inform Svelte Flow about it by using this hook. This will update the internal dimensions of the node and properly reposition handles on the canvas if necessary.
- [Types](https://svelteflow.dev/api-reference/types)
  - [Align](https://svelteflow.dev/api-reference/types/align): The Align type contains the values expected by the align prop of the NodeToolbar component
  - [AriaLabelConfig](https://svelteflow.dev/api-reference/types/aria-label-config): With the AriaLabelConfig you can customize the aria labels and descriptions used by Svelte Flow.
  - [BackgroundVariant](https://svelteflow.dev/api-reference/types/background-variant): The three variants are exported as an enum for convenience. You can either import the enum and use it like BackgroundVariant.Lines or you can use the raw string value directly.
  - [ColorMode](https://svelteflow.dev/api-reference/types/color-mode): The color mode type specifies if the current color mode is light, dark or uses system.
  - [Connection](https://svelteflow.dev/api-reference/types/connection): The Connection type is the basic minimal description of an Edge between two nodes.
  - [ConnectionLineType](https://svelteflow.dev/api-reference/types/connection-line-type): With the connectionLineType prop on your SvelteFlow component, you can configure the type of the connection line. Svelte Flow comes with built-in support for the following types; default (bezier), straight, step, smoothstep, and simplebezier.
  - [ConnectionMode](https://svelteflow.dev/api-reference/types/connection-mode): Specifies the rules for how connections between nodes are established in SvelteFlow.
  - [CoordinateExtent](https://svelteflow.dev/api-reference/types/coordinate-extent): A coordinate extent represents two points in a coordinate system; one in the top left corner and one in the bottom right corner. It is used to represent the bounds of nodes in the flow or the bounds of the viewport.
  - [DefaultEdgeOptions](https://svelteflow.dev/api-reference/types/default-edge-options): Many properties on an Edge are optional. When a new edge is created, the properties that are not provided will be filled in with the default values passed to the defaultEdgeOptions prop of the <SvelteFlow /> component.
  - [Edge](https://svelteflow.dev/api-reference/types/edge): An Edge is the complete description with everything Svelte Flow needs to know in order to render it.
  - [EdgeMarker](https://svelteflow.dev/api-reference/types/edge-marker): You can customize the built-in edge markers with the edgeMarker prop.
  - [EdgeProps](https://svelteflow.dev/api-reference/types/edge-props): When you implement a custom edge it is wrapped in a component that enables some basic functionality.
  - [EdgeTypes](https://svelteflow.dev/api-reference/types/edge-types): Defines the available edge types and their corresponding components in SvelteFlow.
  - [FitViewOptions](https://svelteflow.dev/api-reference/types/fit-view-options): When calling fitView these options can be used to customize the behavior. For example, the duration option can be used to transform the viewport smoothly over a given amount of time.
  - [InternalNode](https://svelteflow.dev/api-reference/types/internal-node): The internal node is an extension of the user node. It is used internally and has some more information that is not exposed to the user directly, like `positionAbsolute` and `handleBounds`.
  - [IsValidConnection](https://svelteflow.dev/api-reference/types/is-valid-connection): Function type that determines whether a connection between nodes is valid in SvelteFlow.
  - [KeyDefinition](https://svelteflow.dev/api-reference/types/key-definition): A key definition is a string or an object that describes a key and a modifier.
  - [MarkerType](https://svelteflow.dev/api-reference/types/marker-type)
  - [Node](https://svelteflow.dev/api-reference/types/node): The Node type represents everything Svelte Flow needs to know about a given node. Many of these properties can be manipulated both by Svelte Flow or by you, but some such as width and height should be considered read-only.
  - [NodeConnection](https://svelteflow.dev/api-reference/types/node-connection): The NodeConnection type is a Connection that includes the edgeId.
  - [NodeEventWithPointer](https://svelteflow.dev/api-reference/types/node-event-with-pointer): Event type that includes pointer information for node interactions in SvelteFlow.
  - [NodeOrigin](https://svelteflow.dev/api-reference/types/node-origin): The origin of a Node determines how it is placed relative to its own coordinates.
  - [NodeProps](https://svelteflow.dev/api-reference/types/node-props): When you implement a custom node it is wrapped in a component that enables basic functionality like drag, select and remove. A custom node gets the following props.
  - [NodeTargetEventWithPointer](https://svelteflow.dev/api-reference/types/node-target-event-with-pointer): Event type that includes pointer information for target node interactions in SvelteFlow.
  - [NodeTypes](https://svelteflow.dev/api-reference/types/node-types): Defines the available node types and their corresponding components in SvelteFlow.
  - [OnBeforeConnect](https://svelteflow.dev/api-reference/types/on-before-connect): Callback function triggered before creating a connection in SvelteFlow, allowing for connection prevention or modification.
  - [OnBeforeDelete](https://svelteflow.dev/api-reference/types/on-before-delete): Callback function triggered before nodes or edges are deleted in SvelteFlow, allowing for deletion prevention or modification.
  - [OnBeforeReconnect](https://svelteflow.dev/api-reference/types/on-before-reconnect): Callback function triggered before reconnecting an edge in SvelteFlow, allowing for reconnection prevention or modification.
  - [OnConnect](https://svelteflow.dev/api-reference/types/on-connect): Callback function triggered when a new connection is created in SvelteFlow.
  - [OnConnectEnd](https://svelteflow.dev/api-reference/types/on-connect-end): Callback function triggered when finishing or canceling a connection attempt between nodes.
  - [OnConnectStart](https://svelteflow.dev/api-reference/types/on-connect-start): Callback function triggered when starting to create a connection in SvelteFlow.
  - [OnDelete](https://svelteflow.dev/api-reference/types/on-delete): Callback function triggered when nodes or edges are deleted in SvelteFlow.
  - [OnError](https://svelteflow.dev/api-reference/types/on-error): Callback function triggered when an error occurs in SvelteFlow.
  - [OnMove](https://svelteflow.dev/api-reference/types/on-move): Callback function triggered when the viewport is moved in SvelteFlow.
  - [OnReconnect](https://svelteflow.dev/api-reference/types/on-reconnect): Callback function triggered when an existing edge is reconnected to a different node or handle in SvelteFlow.
  - [OnReconnectEnd](https://svelteflow.dev/api-reference/types/on-reconnect-end): Callback function triggered when finishing or canceling the reconnection of an edge in SvelteFlow.
  - [OnReconnectStart](https://svelteflow.dev/api-reference/types/on-reconnect-start): Callback function triggered when reconnecting an existing edge in SvelteFlow.
  - [OnSelectionDrag](https://svelteflow.dev/api-reference/types/on-selection-drag): Callback function triggered when dragging a selection of nodes in SvelteFlow.
  - [PanOnScrollMode](https://svelteflow.dev/api-reference/types/pan-on-scroll-mode): Configures how the viewport responds to scroll events in SvelteFlow, allowing free, vertical, or horizontal panning.
  - [PanelPosition](https://svelteflow.dev/api-reference/types/panel-position): This type is mostly used to help position things on top of the flow viewport. For example both the MiniMap and Controls components take a position prop of this type.
  - [Position](https://svelteflow.dev/api-reference/types/position): While PanelPosition can be used to place a component in the corners of a container, the Position enum is less precise and used primarily in relation to edges and handles.
  - [Rect](https://svelteflow.dev/api-reference/types/rect): The Rect type defines a rectangle with dimensions and a position.
  - [SelectionMode](https://svelteflow.dev/api-reference/types/selection-mode): Controls how nodes are selected in SvelteFlow, offering either full or partial selection behavior.
  - [SnapGrid](https://svelteflow.dev/api-reference/types/snapgrid): The SnapGrid type is used to define the grid size for snapping nodes on the pane.
  - [SvelteFlowStore](https://svelteflow.dev/api-reference/types/svelte-flow-store): The internal data structure of the Svelte Flow store.
  - [Viewport](https://svelteflow.dev/api-reference/types/viewport): The Viewport type tells you where in the coordinate system your flow is currently being display at and how zoomed in or out it is.
  - [XYPosition](https://svelteflow.dev/api-reference/types/xy-position): All positions are stored in an object with x and y coordinates.
  - [ZIndexMode](https://svelteflow.dev/api-reference/types/z-index-mode): The ZIndexMode type is used to define how z-indexing is calculated for nodes and edges.
- [Utils](https://svelteflow.dev/api-reference/utils)
  - [addEdge()](https://svelteflow.dev/api-reference/utils/add-edge): This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.
  - [getBezierPath()](https://svelteflow.dev/api-reference/utils/get-bezier-path): The getBezierPath util returns everything you need to render a bezier edge between two nodes.
  - [getConnectedEdges()](https://svelteflow.dev/api-reference/utils/get-connected-edges): Given an array of nodes that may be connected to one another and an array of all your edges, this util gives you an array of edges that connect any of the given nodes together.
  - [getIncomers()](https://svelteflow.dev/api-reference/utils/get-incomers): This util is used to tell you what nodes, if any, are connected to the given node as the source of an edge.
  - [getNodesBounds()](https://svelteflow.dev/api-reference/utils/get-nodes-bounds): Returns the bounding box that contains all the given nodes in an array. This can be useful when combined with getTransformForBounds to calculate the correct transform to fit the given nodes in a viewport.
  - [getOutgoers()](https://svelteflow.dev/api-reference/utils/get-outgoers): This util is used to tell you what nodes, if any, are connected to the given node as the target of an edge.
  - [getSmoothStepPath()](https://svelteflow.dev/api-reference/utils/get-smooth-step-path): The getSmoothStepPath util returns everything you need to render a stepped path between two nodes. The borderRadius property can be used to choose how rounded the corners of those steps are.
  - [getStraightPath()](https://svelteflow.dev/api-reference/utils/get-straight-path): Calculates the straight line path between two points.
  - [getViewportForBounds()](https://svelteflow.dev/api-reference/utils/get-viewport-for-bounds): This util returns the viewport for the given bounds. You might use this to pre-calculate the viewport for a given set of nodes on the server or calculate the viewport for the given bounds _without_ changing the viewport directly.
  - [isEdge()](https://svelteflow.dev/api-reference/utils/is-edge): Test whether an object is usable as an Edge. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true.
  - [isNode()](https://svelteflow.dev/api-reference/utils/is-node): Test whether an object is usable as an Node. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true.