# Table of Contents

- [Quickstart - Svelte Flow](#quickstart-svelte-flow)
- [API Reference - Svelte Flow](#api-reference-svelte-flow)
- [The Node-Based UI for Svelte - Svelte Flow](#the-node-based-ui-for-svelte-svelte-flow)
- [Showcase - Svelte Flow](#showcase-svelte-flow)
- [Installation and Requirements - Svelte Flow](#installation-and-requirements-svelte-flow)
- [Examples - Svelte Flow](#examples-svelte-flow)
- [Building a Flow - Svelte Flow](#building-a-flow-svelte-flow)
- [Support Svelte Flow - Svelte Flow](#support-svelte-flow-svelte-flow)
- [Custom Nodes - Svelte Flow](#custom-nodes-svelte-flow)
- [The SvelteFlow component - Svelte Flow](#the-svelteflow-component-svelte-flow)
- [The SvelteFlowProvider component - Svelte Flow](#the-svelteflowprovider-component-svelte-flow)
- [Sub Flows - Svelte Flow](#sub-flows-svelte-flow)
- [Theming - Svelte Flow](#theming-svelte-flow)
- [Components - Svelte Flow](#components-svelte-flow)
- [The Background component - Svelte Flow](#the-background-component-svelte-flow)
- [The MiniMap component - Svelte Flow](#the-minimap-component-svelte-flow)
- [The Handle component - Svelte Flow](#the-handle-component-svelte-flow)
- [The BaseEdge component - Svelte Flow](#the-baseedge-component-svelte-flow)
- [The Controls component - Svelte Flow](#the-controls-component-svelte-flow)
- [The NodeResizeControl component - Svelte Flow](#the-noderesizecontrol-component-svelte-flow)
- [The ControlButton component - Svelte Flow](#the-controlbutton-component-svelte-flow)
- [The EdgeLabelRenderer component - Svelte Flow](#the-edgelabelrenderer-component-svelte-flow)
- [The Edge Label component - Svelte Flow](#the-edge-label-component-svelte-flow)
- [The NodeToolbar component - Svelte Flow](#the-nodetoolbar-component-svelte-flow)
- [useNodeConnections() - Svelte Flow](#usenodeconnections-svelte-flow)
- [The NodeResizer component - Svelte Flow](#the-noderesizer-component-svelte-flow)

---

# Quickstart - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

LearnQuickstart

Quickstart
==========

Svelte Flow is a highly customizable component for building interactive graphs and node-based editors, built by the creators of React Flow.

💡

This package is currently in an alpha state and under heavy development. The API is likely to change. You can read about the latest changes in the [“What’s New” section](/whats-new)
.

Play online[](#play-online)

----------------------------

You can try Svelte Flow without setting anything up locally by checking out the starter projects we have on [Stackblitz](https://stackblitz.com)
 :

[JS\
\
new.svelteflow.dev/js](https://new.svelteflow.dev/js)
[TS\
\
new.svelteflow.dev/ts](https://new.svelteflow.dev/ts)

Vite template[](#vite-template)

--------------------------------

If you want to get started right away, you can use our [vite template](https://github.com/xyflow/vite-svelte-flow-template)
 :

npmpnpmyarnbun

`npx degit xyflow/vite-svelte-flow-template app-name`

`pnpm dlx degit xyflow/vite-svelte-flow-template app-name`

`yarn dlx degit xyflow/vite-svelte-flow-template app-name`

`bun x degit xyflow/vite-svelte-flow-template app-name`

Installation[](#installation)

------------------------------

The easiest way to get the latest version of Svelte Flow is to install it via npm, yarn or pnpm:

npmpnpmyarnbun

`npm install @xyflow/svelte`

`pnpm add @xyflow/svelte`

`yarn add @xyflow/svelte`

`bun add @xyflow/svelte`

Creating your first flow[](#creating-your-first-flow)

------------------------------------------------------

We get started by stacking together the most important components of Svelte Flow: `SvelteFlow`, `Controls`, `Background` and `MiniMap`. A basic flow looks like this:

`<script>   import { writable } from 'svelte/store';   import {     SvelteFlow,     Controls,     Background,     BackgroundVariant,     MiniMap   } from '@xyflow/svelte';     // 👇 this is important! You need to import the styles for Svelte Flow to work   import '@xyflow/svelte/dist/style.css';     // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position.   const nodes = writable([     {       id: '1',       type: 'input',       data: { label: 'Input Node' },       position: { x: 0, y: 0 }     },     {       id: '2',       type: 'default',       data: { label: 'Node' },       position: { x: 0, y: 150 }     }   ]);     // same for edges   const edges = writable([     {       id: '1-2',       type: 'default',       source: '1',       target: '2',       label: 'Edge Text'     }   ]);     const snapGrid = [25, 25]; </script>   <!-- 👇 By default, the Svelte Flow container has a height of 100%. This means that the parent container needs a height to render the flow. --> <div style:height="500px">   <SvelteFlow     {nodes}     {edges}     {snapGrid}     fitView     on:nodeclick={(event) => console.log('on node click', event.detail.node)}   >     <Controls />     <Background variant={BackgroundVariant.Dots} />     <MiniMap />   </SvelteFlow> </div>`

How to Contribute[](#how-to-contribute)

----------------------------------------

**Show us what you make:** Drop it in into our [Discord Server](https://discord.com/invite/Bqt6xrs)
 , [tweet](https://twitter.com/xyflowdev)
  at us, or email us at [info@xyflow.com](mailto:info@xyflow.com)

**Community Participation:** Ask and answer questions in our [Discord Server](https://discord.com/invite/Bqt6xrs)
  or jump in on Github discussions.

**Squash Bugs:** We can’t catch them all. Check existing issues and discussions first, then create a new issue to tell us what’s up.

**Financial Support:** If you are an organization who wants to make sure Svelte Flow continues to be maintained, reach out to us at [info@xyflow.com](mailto:info@xyflow.com)

And of course, we love Github stars ⭐

Last updated on February 20, 2025

[Installation](/learn/getting-started/installation "Installation")

---

# API Reference - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

ReferenceAPI Reference

API Reference
=============

This reference attempts to document every function, hook, component, and type exported by Svelte Flow. If you are looking for guides, please refer to our [learn section](/learn)
.

💡

This package is currently in an alpha state and under heavy development. The API is likely to change. You can read about the latest changes in the [“What’s New” section](/whats-new)
.

How to use this reference[](#how-to-use-this-reference)

--------------------------------------------------------

We think that documentation should answer two broad questions: “what is this thing?” and “how do I use it?”

To that end, our API reference aims to **concisely** answer that first question, while guides go into more detail on the second. If you find yourself clicking around the reference wondering what the heck any of this means, maybe we have a guide that can help you out!

[Custom nodes\
\
A powerful feature of Svelte Flow is the ability to add custom nodes. Within your custom nodes you can render everything you want. You can define multiple source and target handles and render form inputs or charts for example. In this guide we will implement a node with an input field that updates some text in another part of the application.\
\
Read more](/learn/guides/custom-nodes)
[Subflows\
\
Is this a flow within a flow? Yes! Sometimes you want to treat parts of a flow as a group or even as a single node. This is where subflows come into play. In this guide you will learn how to create a child-parent relationship between nodes and implement different types of subflows.\
\
Read more](/learn/guides/sub-flows)

A note for JavaScript users[](#a-note-for-javascript-users)

------------------------------------------------------------

Svelte Flow is written in TypeScript, but we know that not everyone uses it. We encourage developers to use the technology that works best for them, and throughout our documentation there is a blend of TypeScript and JavaScript examples.

For our API reference, however, we use TypeScript’s syntax to document the types of props and functions. Here’s a quick crash course on how to read it:

• `?` means that the field or argument is optional.

• `<T>` in a type definition represents a generic type parameter. Like a function argument but for types! The definition `type Array<T> = ...` means a type called `Array` that takes a generic type parameter `T`.

• `<T>` when referring to a type is like “filling in” a generic type parameter. It’s like calling a function but for types! The type `Array<number>` is the type `Array` with the generic type parameter `T` filled in with the type `number`.

• `T | U` means that the type is either `T` or `U`: this is often called a _union_.

• `T & U` means that the type is both `T` and `U`: this is often called an _intersection_.

The TypeScript folks have their own [handy guide for reading types](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
  that you might find useful. If you’re still stuck on something, feel free to drop by our [Discord](https://discord.com/invite/RVmnytFmGW)
  and ask for help!

Last updated on February 20, 2025

[<SvelteFlow />](/api-reference/svelte-flow "<SvelteFlow />")

---

# The Node-Based UI for Svelte - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

Wire Your Ideas with Svelte Flow
================================

A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow
----------------------------------------------------------------------------------------------------------------------

[Quickstart](/learn)
 [Support Us](/support-us)

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.

0.1.31
------

Current Version

31k
---

Weekly Installs

MIT
---

License

Svelte Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by supporting us.

[Support Us](/support-us)

Getting Started with Svelte Flow

Make sure you’ve installed npm, pnpm or yarn. Then you can install Svelte Flow via:

npm install @xyflow/svelte

[See full Quickstart guide](/learn)

Ready out-of-the-box
--------------------

The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing edges are all built-in.

[Get started](/learn)

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.

Powered by us.  
Designed by you.
---------------------------------

We play nice with Tailwind and good old CSS. Svelte Flow nodes are just Svelte components. Create custom nodes to have full control with interactive components.

[Custom nodes guide](/learn/guides/custom-nodes)

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.

All the right plugins
---------------------

Make more advanced apps with the Background, Minimap, Controls, and Panel components.

[Read more](/learn)

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.

Interactive Examples

See Svelte Flow in action
-------------------------

To see all the capabilities of Svelte Flow, check out the interactive examples which are regularly updated.

[See all examples](/examples)

Feature Overview

Many features of Svelte Flow require zero configuration

Subflows

Svelte Flow supports nested graphs out of the box

Edge Types

The component comes with a set of common edge types

A project by the xyflow team
----------------------------

We are Christopher, Peter, Abbey and Moritz. We are the maintainers of React Flow, Svelte Flow, and the communities around them

[Blog](https://xyflow.com/blog)
 [About us](https://xyflow.com/about)
 [Open Source](https://xyflow.com/open-source)
 [Contact Us](https://xyflow.com/contact)

[React Flow\
------------\
\
A customizable React component for building node-based editors and interactive diagrams\
\
Visit Website](https://reactflow.dev)
[xyflow\
--------\
\
The team behind React Flow and Svelte Flow. Read updates and blog posts from us and about how we approach open source development.\
\
Visit Website](https://xyflow.com)

---

# Showcase - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

### Showcase

Built with Svelte Flow
======================

Svelte Flow is being used in a large variety of projects. Explore some of our favorite examples from the web.

FlowchartWorkflow AutomationOpen SourceDeveloper Tool

![Sparrow App screenshot](/_next/image?url=https%3A%2F%2Ff20vdoobtdxrjemr.public.blob.vercel-storage.com%2Fshowcases%2F189f4645-2242-811a-a655-f218a123f451.png&w=3840&q=75)

Sparrow App

FlowchartWorkflow AutomationOpen Source

An API testing tool leveraging Svelte Flow for seamless API Testing through Testflow.

[Website](https://sparrowapp.dev)
 [Repo](https://github.com/sparrowapp-dev/sparrow-app)

![CodeFlow screenshot](/_next/image?url=https%3A%2F%2Ff20vdoobtdxrjemr.public.blob.vercel-storage.com%2Fshowcases%2F17bf4645-2242-8112-9dc5-fb519f76335d.png&w=3840&q=75)

CodeFlow

FlowchartDeveloper ToolOpen Source

Roadmap for programmers to learn DSA and solve Topicwise Leetcode questions

[Website](https://roadmap-flow.vercel.app)
 [Repo](https://github.com/SikandarJODD/CodeFlow)

![PyFlowAutomator screenshot](/_next/image?url=https%3A%2F%2Ff20vdoobtdxrjemr.public.blob.vercel-storage.com%2Fshowcases%2F17bf4645-2242-8173-a375-eac5ded9cb99.png&w=3840&q=75)

PyFlowAutomator

Developer Tool

Python visual scripting UI for enterprise deployment

[Website](https://github.com/Kinthamen/PyFlowAutomator)

![Zen AI screenshot](/_next/image?url=https%3A%2F%2Ff20vdoobtdxrjemr.public.blob.vercel-storage.com%2Fshowcases%2F17bf4645-2242-8128-a23a-fbdc9aeecaf0.png&w=3840&q=75)

Zen AI

Workflow Automation

No code AI for workflow automation

[Website](https://getzenai.com/)

[Your project here?\
\
Have you built something exciting you want to show off? We want to feature it here!\
\
Submit your project](https://wbkd.notion.site/17bf4645224281e4bf61ce34fa671059)

---

# Installation and Requirements - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Learn](/learn "Learn")
Getting StartedInstallation

Installation and Requirements
=============================

In order to start, you need node.js and npm, yarn or pnpm installed on your machine. The Svelte Flow package is published on npm under [`@xyflow/svelte`](https://www.npmjs.com/package/@xyflow/svelte)
 and installable via:

npmpnpmyarnbun

`npm install @xyflow/svelte`

`pnpm add @xyflow/svelte`

`yarn add @xyflow/svelte`

`bun add @xyflow/svelte`

Now you can import the Svelte Flow component and the styles in your application:

`import { SvelteFlow } from '@xyflow/svelte';   // 👇 this is important! You need to import the styles for Svelte Flow to work import '@xyflow/svelte/dist/style.css';`

Prior Experience Needed[](#prior-experience-needed)

----------------------------------------------------

As the name implies Svelte Flow is a [Svelte](https://svelte.dev/)
  library. That means Svelte developers will likely find it easy to work with. If you’re not already familiar with fundamental Svelte terms and concepts such as stores, props, and components you may need to get a better understanding of Svelte basics before you can make full use of Svelte Flow. If you’ve never used Svelte before, we suggest starting your journey with the [“Welcome to Svelte” tutorial](https://learn.svelte.dev/tutorial/welcome-to-svelte)
 .

Last updated on February 20, 2025

[Quickstart](/learn "Quickstart")
[Building a Flow](/learn/getting-started/building-a-flow "Building a Flow")

---

# Examples - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

Examples
========

Browse our examples for practical copy-paste solutions to common use cases with React Flow. Here you can find our MIT Licensed examples, which you are free to use in your projects without restrictions, as well as our Pro examples that come with our React Flow Pro subscription plans.

[![Feature Overview Example Preview](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fmisc%2Ffeature-overview%2Fpreview.jpg&w=2048&q=75)\
\
Feature Overview\
----------------\
\
This is an overview example Svelte Flow's basic features. You can see built-in node and edge types, sub flows as well as NodeToolbar and NodeResizer components.\
\
See example](/examples/overview)

Nodes
-----

[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fcustom-node%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Custom Nodes\
\
This is an example of a custom node implementation. Svelte Flow nodes are Svelte components, and you can display any content that you want.\
\
See example](/examples/nodes/custom-node)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fupdate-node%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Updating Nodes\
\
This example shows how to update the data field of a specific node.\
\
See example](/examples/nodes/update-node)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fstress%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Stress Test\
\
A stress test with a lot of nodes and edges.\
\
See example](/examples/nodes/stress)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fdrag-handle%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Drag Handle\
\
See example](/examples/nodes/drag-handle)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fadd-node-on-edge-drop%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Add Node On Edge Drop\
\
See example](/examples/nodes/add-node-on-edge-drop)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fproximity-connect%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Proximity Connect\
\
Example showing how to automatically create edges when nodes get close to each other\
\
See example](/examples/nodes/proximity-connect)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fnode-resizer%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Node Resizer\
\
See example](/examples/nodes/node-resizer)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Feasy-connect%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Easy Connect\
\
See example](/examples/nodes/easy-connect)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fconnection-limit%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Connection Limit\
\
This is an example of a custom node limiting the amount of connections a handle can have using the \`isConnectalbe\` prop.\
\
See example](/examples/nodes/connection-limit)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fnodes%2Fintersections%2Fpreview.jpg&w=3840&q=75)\
\
NODES\
\
Intersections\
\
See example](/examples/nodes/intersections)

Edges
-----

[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fedges%2Fcustom-connectionline%2Fpreview.jpg&w=3840&q=75)\
\
EDGES\
\
Connection Line\
\
See example](/examples/edges/custom-connectionline)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fedges%2Fcustom-edges%2Fpreview.jpg&w=3840&q=75)\
\
EDGES\
\
Custom Edges\
\
Svelte Flow has four edge types- bezier, straight, step and smoothstep. It’s also possible to create a custom edge, if you need a special edge routing or controls at the edge.\
\
See example](/examples/edges/custom-edges)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fedges%2Fedge-label-renderer%2Fpreview.jpg&w=3840&q=75)\
\
EDGES\
\
Edge Label Renderer\
\
The EdgeLabelRenderer component can be used to render labels\
\
See example](/examples/edges/edge-label-renderer)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fedges%2Fedge-markers%2Fpreview.jpg&w=3840&q=75)\
\
EDGES\
\
Edge Markers\
\
Example for demonstrating edge markers in Svelte Flow.\
\
See example](/examples/edges/edge-markers)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fedges%2Fedge-types%2Fpreview.jpg&w=3840&q=75)\
\
EDGES\
\
Edge Types\
\
example showing different kinds of edge types in svelte flow\
\
See example](/examples/edges/edge-types)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fedges%2Fsimple-floating-edges%2Fpreview.jpg&w=3840&q=75)\
\
EDGES\
\
Simple Floating Edges\
\
See example](/examples/edges/simple-floating-edges)

Layout
------

[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Flayout%2Fdagre%2Fpreview.jpg&w=3840&q=75)\
\
LAYOUT\
\
Dagre Tree\
\
You can integrate dagre.js with Svelte Flow to create tree layouts. A good alternative to dagre is elkjs if you are looking for a more advanced layouting library.\
\
See example](/examples/layout/dagre)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Flayout%2Felkjs%2Fpreview.jpg&w=3840&q=75)\
\
LAYOUT\
\
Elkjs Tree\
\
If you're looking for a more powerful alternative to dagre, you can also use elkjs to layout your Svelte Flow graphs.\
\
See example](/examples/layout/elkjs)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Flayout%2Fhorizontal-flow%2Fpreview.jpg&w=3840&q=75)\
\
LAYOUT\
\
Horizontal Flow\
\
See example](/examples/layout/horizontal-flow)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Flayout%2Fsubflows%2Fpreview.jpg&w=3840&q=75)\
\
LAYOUT\
\
Subflows\
\
You can create nested flows - known as subflows - with Svelte Flow. Here you can see how to implement them.\
\
See example](/examples/layout/subflows)

Interaction
-----------

[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Finteraction%2Fcomputing-flows%2Fpreview.jpg&w=3840&q=75)\
\
INTERACTION\
\
Computing Flows\
\
This example combines some hooks and helper functions for computing the data flow between nodes.\
\
See example](/examples/interaction/computing-flows)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Finteraction%2Fcontext-menu%2Fpreview.jpg&w=3840&q=75)\
\
INTERACTION\
\
Context Menu\
\
See example](/examples/interaction/context-menu)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Finteraction%2Fcontextual-zoom%2Fpreview.jpg&w=3840&q=75)\
\
INTERACTION\
\
Contextual Zoom\
\
See example](/examples/interaction/contextual-zoom)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Finteraction%2Fdrag-and-drop%2Fpreview.jpg&w=3840&q=75)\
\
INTERACTION\
\
Drag and Drop\
\
This example shows how to implement a sidebar with a drag and drop functionality.\
\
See example](/examples/interaction/drag-and-drop)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Finteraction%2Fvalidation%2Fpreview.jpg&w=3840&q=75)\
\
INTERACTION\
\
Validation\
\
This example explains how to validate new connections between nodes.\
\
See example](/examples/interaction/validation)

Styling
-------

[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fstyling%2Fbase-style%2Fpreview.jpg&w=3840&q=75)\
\
STYLING\
\
Base Style\
\
Svelte Flow comes with a default style and a base style. This example shows how the base style looks.\
\
See example](/examples/styling/base-style)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fstyling%2Fdark-mode%2Fpreview.jpg&w=3840&q=75)\
\
STYLING\
\
Dark Mode\
\
Svelte Flow comes with a default style and a base style. This example shows how the base style looks.\
\
See example](/examples/styling/dark-mode)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fstyling%2Ftailwind%2Fpreview.jpg&w=3840&q=75)\
\
STYLING\
\
Tailwind\
\
In this example we demonstrate how to use tailwind for styling a flow.\
\
See example](/examples/styling/tailwind)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fstyling%2Fturbo-flow%2Fpreview.jpg&w=3840&q=75)\
\
STYLING\
\
Turbo Flow\
\
This example showcases how you can recreate the style that is used in the turbo docs.\
\
See example](/examples/styling/turbo-flow)

Misc
----

[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fmisc%2Fdownload-image%2Fpreview.jpg&w=3840&q=75)\
\
MISC\
\
Download Image\
\
See example](/examples/misc/download-image)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fmisc%2Fthrelte-flow%2Fpreview.jpg&w=3840&q=75)\
\
MISC\
\
Threlte Flow\
\
This example shows how you can use Svelte Flow in combination with Threlte to create a flow that controls a 3D scene.\
\
See example](/examples/misc/threlte-flow)
[![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Fsvelte%2Fexamples%2Fmisc%2Fuse-svelte-flow%2Fpreview.jpg&w=3840&q=75)\
\
MISC\
\
useSvelteFlow\
\
The useSvelteFlow hook gives you access to the Svelte Flow store and provides some functions for updating the viewport.\
\
See example](/examples/misc/use-svelte-flow)

Last updated on February 20, 2025

[Feature Overview](/examples/overview "Feature Overview")

---

# Building a Flow - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Learn](/learn "Learn")
[Getting Started](/learn/getting-started/installation "Getting Started")
Building a Flow

Building a Flow
===============

In the following section we will show you how to create a Svelte component that displays a simple flow. We assume that you’ve installed Svelte Flow and hope that you are ready to create your first component with Svelte Flow.

Getting Started[](#getting-started)

------------------------------------

Let’s add a `SvelteFlow` component with a `Controls` and a `Background` component. For this we import the components from the `@xyflow/svelte` package:

`import { SvelteFlow, Background, Controls } from '@xyflow/svelte'; // 👇 always import the styles import '@xyflow/svelte/dist/style.css';`

Now you can use them in your component like this:

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow, Background, Controls } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable([]);   const edges = writable([]); </script>   <main>   <SvelteFlow {nodes} {edges}>     <Background />     <Controls />   </SvelteFlow> </main>   <style>   main {     height: 100vh;   } </style>`

You can now pan around by dragging the canvas, as well as zoom in and out by scrolling the mouse or using the control panel buttons.

There are three important things to keep in mind here:

1.  You need to **import the styles**. Otherwise Svelte Flow looks weird and doesn’t work.
2.  The **parent container needs a width and height**, because Svelte Flow uses its parent dimensions.
3.  If you have **multiple flows on one page**, you need to pass a unique `id` prop to each component to make Svelte Flow work properly.

Adding nodes[](#adding-nodes)

------------------------------

Now that the basics are set up, we can add a few nodes. For this, you need to create a [writable store](https://svelte.dev/docs/svelte-store#writable)
  with an array of [node objects](/api-reference/types/node)
 like this:

`import { writable } from 'svelte/store';   const nodes = writable([   {     id: '1', // required and needs to be a string     position: { x: 0, y: 0 }, // required     data: { label: 'hey' }, // required   },   {     id: '2',     position: { x: 100, y: 100 },     data: { label: 'world' },   }, ]);`

If we add these nodes to our `SvelteFlow` component, we can see them on the screen:

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow, Background, Controls } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable([     {       id: '1', // required and needs to be a string       position: { x: 0, y: 0 }, // required       data: { label: 'hey' } // required     },     {       id: '2',       position: { x: 100, y: 100 },       data: { label: 'world' }     }   ]);     const edges = writable([]); </script>   <main>   <SvelteFlow {nodes} {edges}>     <Background />     <Controls />   </SvelteFlow> </main>   <style>   main {     height: 100vh;   } </style>`

There are lots of options to configure nodes. You can see the full list of options on the [node option site](/api-reference/types/node)
.

This is a good start! You can already do a lot of things:

*   **drag nodes** around
*   **select nodes** by clicking on them
*   **delete nodes** by pressing the `Backspace` key
*   **multi select nodes** by holding down the `Shift` key create a selection box

Connecting nodes with an edge[](#connecting-nodes-with-an-edge)

----------------------------------------------------------------

Now that we have two nodes, let’s connect them with an edge.

To make an edge, we need to specify two attributes: the source node (edge start) and the target node (edge end). We use the `id` of the two nodes to specify this (in our example, our two nodes have ids of “1” and “2”). The edges are stored in a writable store, just like the nodes:

`import { writable } from 'svelte/store';   const edges = writable([{ id: '1-2', source: '1', target: '2' }]);`

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow, Background, Controls } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable([     {       id: '1', // required and needs to be a string       position: { x: 0, y: 0 }, // required       data: { label: 'hey' } // required     },     {       id: '2',       position: { x: 100, y: 100 },       data: { label: 'world' }     }   ]);     const edges = writable([{ id: '1-2', source: '1', target: '2' }]); </script>   <main>   <SvelteFlow {nodes} {edges}>     <Background />     <Controls />   </SvelteFlow> </main>   <style>   main {     height: 100vh;   } </style>`

Just like nodes, edges have a lot of options too. You can choose a type, define start and end markers, labels, and change the styling. You can see the full list of options on the [edge option site](/api-reference/types/edge)
.

Fine-tuning the flow[](#fine-tuning-the-flow)

----------------------------------------------

Now that we have a basic flow, let’s fine-tune it a bit. You can automatically fit all nodes into the viewport by using the `fitView` prop.

If you want something besides a white background, you can easily adjust it by using the `bgColor` prop of the `Background` component. As you can see, we also used the `patternColor` prop to change the color of the background pattern. You can also change the pattern with the `variant` prop.

By default the controls panel comes with a zoom-in, zoom-out, fit view and lock button. You can remove the lock button for example by setting `showLock={false}`.

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow, Background, Controls } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable([     {       id: '1', // required and needs to be a string       position: { x: 0, y: 0 }, // required       data: { label: 'hey' } // required     },     {       id: '2',       position: { x: 100, y: 100 },       data: { label: 'world' }     }   ]);     const edges = writable([{ id: '1-2', source: '1', target: '2' }]); </script>   <main>   <SvelteFlow {nodes} {edges} fitView>     <Background bgColor="rgba(126,159,219,0.5)" patternColor="white" />     <Controls showInteractive={false} />   </SvelteFlow> </main>   <style>   main {     height: 100vh;   } </style>`

There are way more things you can do! You can get a good overview by checking out the [examples](/examples)
 or the [API reference](/api-reference)
.

Last updated on February 20, 2025

[Installation](/learn/getting-started/installation "Installation")
[Custom Nodes](/learn/guides/custom-nodes "Custom Nodes")

---

# Support Svelte Flow - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

### Support

Support Svelte Flow
===================

Thanks for your interest in Svelte Flow! There are lots of ways you can help the library, ecosystem, and community grow.

Show us what you've made

We love to see works in progress and screenshots. Drop it in into our Discord Server, tweet at us, or drop us an email

[Discord](https://discord.gg/RVmnytFmGW)
 [Contact us](https://xyflow.com/contact)

Join the Community

Ask and answer questions in our Discord Server or jump in on Github discussions.

[Github Discussions](https://github.com/xyflow/xyflow/discussions)
 [Discord](https://discord.gg/RVmnytFmGW)

Squash Bugs

We can’t catch them all. Check existing issues and discussions first, then create a new issue to tell us what’s up.

[Github Issues](https://github.com/xyflow/xyflow/issues)

Financial Support

If you are an organization who wants to make sure Svelte Flow continues to be maintained, you can sponsor us on Github or OpenCollective, or reach out to us at info@xyflow.com

[Github Sponsors](https://github.com/sponsors/xyflow)
 [Open Collective](https://opencollective.com/xyflow)

Other ways to support us

You or your organization can also...

[Improve and edit our docs](https://github.com/xyflow/web)
[Star us on Github](https://github.com/xyflow/xyflow)
[Toot about us](https://fosstodon.org/@xyflow)

---

# Custom Nodes - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Learn](/learn "Learn")
GuidesCustom Nodes

Custom Nodes
============

A powerful feature of Svelte Flow is the ability to add custom nodes. You can render everything you want in your custom nodes. You can define multiple source and target handles and render form inputs or even interactive charts. In this guide we will implement two nodes with color input fields that update the background color of the flow.

Creating a custom node component[](#creating-a-custom-node-component)

----------------------------------------------------------------------

A custom node is just a Svelte component. Internally it gets wrapped to provide basic functionality like dragging and selecting. From the wrapper component we are passing props like the position or the data besides [other props](/api-reference/types/node-props)
.

Let’s start to implement the `ColorPickerNode`. We are using the [`Handle` component](/api-reference/components/handle)
 to connect our custom node with other nodes and add an input field with type=“color” to the node:

ColorPickerNode.svelte

`<script lang="ts">   import { Handle, Position, type NodeProps } from '@xyflow/svelte';   import type { Writable } from 'svelte/store';     type $$Props = NodeProps;     export let data: { color: Writable<string> };     const { color } = data; </script>   <div class="colorpicker">   <Handle type="target" position={Position.Left} />   <div>     color: <strong>{$color}</strong>   </div>   <input     class="nodrag"     type="color"     on:input={(evt) => data.color.set(evt.target?.value)}     value={$color}   />   <Handle type="source" position={Position.Right} /> </div>`
 

As you can see we’ve added the class name “nodrag” to the input. This prevents dragging within the input field, which in this case will allow us to select text inside the node.

Adding a new node type[](#adding-a-new-node-type)

--------------------------------------------------

You can add a new node type to Svelte Flow by adding it to the [`nodeTypes` prop](/api-reference/svelte-flow#nodetypes)
. The `nodeTypes` prop is an object where the key is the name of the node type and the value is the component that should be rendered for this node type. Let’s add the `ColorPickerNode` to the `nodeTypes` prop:

App.svelte

`<script>   import { SvelteFlow } from '@xyflow/svelte';   import ColorPickerNode from './ColorPickerNode.svelte';       const nodeTypes = {     'color-picker': ColorPickerNode   }; </script>   <SvelteFlow {nodeTypes} />`

After defining the “colorPicker” node type, you can apply it to a node by setting the `type` node option:

`const nodes = writable([   {     id: 'node-1',     // this type needs to match the newly defined node type     type: 'color-picker',     position: { x: 0, y: 0 },     // data is used to store the current color value     data: { color: writable('#ff4000') },   }, ]);`

The `data` field of a node can be used to store whatever data you like. In this case we are storing the current color value in a [writable store](https://svelte.dev/docs/svelte-store#writable)
 . This makes it easy to update it from within the custom node later. After putting it all together and adding some basic styles, we get a nice looking custom node with a color picker.

Open in Stackblitz

App.svelteColorPickerNode.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow } from '@xyflow/svelte';     import ColorPickerNode from './ColorPickerNode.svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable([     {       id: '1',       type: 'colorPicker',       data: { color: writable('#ff4000') },       position: { x: 0, y: 0 }     }   ]);     const edges = writable([]);     const nodeTypes = {     colorPicker: ColorPickerNode   }; </script>   <div style="height:100vh;">   <SvelteFlow {nodes} {edges} {nodeTypes} fitView attributionPosition="top-right" /> </div>`

Adjust the flow background color[](#adjust-the-flow-background-color)

----------------------------------------------------------------------

Now that we have a custom node with a color picker, we want to update the background color of the flow. To make this a bit more fun, we add another node and then mix both colors by using the CSS [color-mix](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)
  notation. For this we add another node to the nodes array and then subscribe to the color stores of both nodes. Whenever one of the colors changes, we update the background color of the flow:

Open in Stackblitz

App.svelteColorPickerNode.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow } from '@xyflow/svelte';     import ColorPickerNode from './ColorPickerNode.svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable([     {       id: '1',       type: 'colorPicker',       data: { color: writable('#ff4000') },       position: { x: 0, y: 0 }     },     {       id: '2',       type: 'colorPicker',       data: { color: writable('#ffffff') },       position: { x: 200, y: 0 }     }   ]);     const edges = writable([]);     const nodeTypes = {     colorPicker: ColorPickerNode   };     $: colorA = $nodes[0].data.color;   $: colorB = $nodes[1].data.color; </script>   <div style="height:100vh;">   <SvelteFlow     {nodes}     {edges}     {nodeTypes}     fitView     style="background-color: color-mix(in srgb, {$colorA}, {$colorB});"     attributionPosition="top-right"   /> </div>`

Suppress unknown prop warnings[](#suppress-unknown-prop-warnings)

------------------------------------------------------------------

Following this guide you will probably wonder why your browser console is flooded with warnings like this:

`<CustomNode /> was created with unknown prop 'height'`

This is due to the wrapper component always passing every prop to the custom node component, regardless whether you have implemented them in your svelte component or not. To suppress them, simply add `$$restProps` to a line, like this:

CustomNode.svelte

`<script>     // Your svelte flow code...       $$restProps; </script>`

Last updated on February 20, 2025

[Building a Flow](/learn/getting-started/building-a-flow "Building a Flow")
[Sub Flows](/learn/guides/sub-flows "Sub Flows")

---

# The SvelteFlow component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
<SvelteFlow />

<SvelteFlow />
==============

[Source on Github](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte)
 

The `<SvelteFlow />` component is the heart of your Svelte Flow application.

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow } from '@xyflow/svelte';     const nodes = writable([     { id: 'a', data: { label: 'node a' }, position: { x: 0, y: 0 } },     { id: 'b', data: { label: 'node b' }, position: { x: 0, y: 100 } }   ]);     const edges = writable([     { id: 'e1-2', source: 'a', target: 'b' }   ]); </script>   <SvelteFlow   nodes={nodes}   edges={edges}   fitView />`

This component takes a lot of different props, most of which are optional. We’ve tried to document them in groups that make sense to help you find your way.

Common props[](#common-props)

------------------------------

These are the props you will most commonly use when working with Svelte Flow.

| Name | Type | Default |
| --- | --- | --- |
| [#](#nodes)<br>`nodes` | `[Writable](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/store/public.d.ts#L37) <[Node](/api-reference/types/node) []>`<br><br>A writable store with an array of nodes. | writable([]) |
| [#](#edges)<br>`edges` | `[Writable](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/store/public.d.ts#L37) <[Edge](/api-reference/types/edge) []>`<br><br>A writable store with an array of edges. | writable([]) |
| [#](#node-types)<br>`nodeTypes` | `[Record](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type) <string, [ComponentType](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/internal/public.d.ts#L67) <[SvelteComponent](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/internal/Component.js#L451) <[NodeProps](/api-reference/types/node-props) >>>`<br><br>If you want to use custom nodes in your flow, you need to let Svelte Flow know about them. When rendering a new node, Svelte Flow will look up that node's type in this object and render the corresponding component. |     |
| [#](#edge-types)<br>`edgeTypes` | `[Record](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type) <string, [ComponentType](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/internal/public.d.ts#L67) <[SvelteComponent](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/internal/Component.js#L451) <[EdgeProps](/api-reference/types/edge-props) >>>`<br><br>As with node types, this prop lets you use custom edges in your flow by mapping edge types to Svelte components. |     |
| [#](#color-mode)<br>`colorMode` | `[ColorMode](/api-reference/types/color-mode) `<br><br>With this type you can switch between the built-in light and dark themes. | "light" |
| [#](#node-origin)<br>`nodeOrigin` | `[number, number]`<br><br>The origin of the node to use when placing it in the flow or looking up its x and y position. An origin of \[0,0\] means that a node's top left corner will be placed at the x and y position. | [0,0] |
| [#](#node-drag-threshold)<br>`nodeDragThreshold` | `number`<br><br>With a threshold greater than zero you can delay node drag events. If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired. | 0   |
| [#](#style)<br>`style` | `string` |     |
| [#](#class)<br>`class` | `string` |     |

Viewport props[](#viewport-props)

----------------------------------

| Name | Type | Default |
| --- | --- | --- |
| [#](#initial-viewport)<br>`initialViewport` | `[Viewport](/api-reference/types/viewport) `<br><br>Sets the initial position and zoom of the viewport. If a default viewport is provided but fitView is enabled, the default viewport will be ignored. | { x: 0, y: 0, zoom: 1 } |
| [#](#viewport)<br>`viewport` | `[Writable](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/store/public.d.ts#L37) <[Viewport](/api-reference/types/viewport) >`<br><br>If you need more control over the viewport, you can pass a writable store. | undefined |
| [#](#fit-view)<br>`fitView` | `boolean`<br><br>When true, the flow will be zoomed and panned to fit all the nodes initially provided. | false |
| [#](#fit-view-options)<br>`fitViewOptions` | `[FitViewOptions](/api-reference/types/fit-view-options) `<br><br>When you typically call fitView on a Svelte Flow instance, you can provide an object of options to customize its behaviour. This prop lets you do the same for the initial fitView call. |     |
| [#](#min-zoom)<br>`minZoom` | `number` | 0.5 |
| [#](#max-zoom)<br>`maxZoom` | `number` | 2   |
| [#](#snap-grid)<br>`snapGrid` | `[number, number] \| undefined`<br><br>This prop configures the grid that nodes will snap to. | undefined |
| [#](#only-render-visible-elements)<br>`onlyRenderVisibleElements` | `boolean`<br><br>You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport. | false |
| [#](#translate-extent)<br>`translateExtent` | `[CoordinateExtent](/api-reference/types/coordinate-extent) `<br><br>By default the viewport extends infinitely. You can use this prop to set a boundary. The first pair of coordinates is the top left boundary and the second pair is the bottom right.. | [[-∞,-∞], [+∞,+∞]] |
| [#](#prevent-scrolling)<br>`preventScrolling` | `boolean`<br><br>Disabling this prop will allow the user to scroll the page even when their pointer is over the flow. | true |
| [#](#attribution-position)<br>`attributionPosition` | `[PanelPosition](/api-reference/types/panel-position) `<br><br>By default, Svelte Flow will render a small attribution in the bottom right corner of the flow. You can use this prop to change its position in case you want to place something else there. | "bottom-right" |

Edge props[](#edge-props)

--------------------------

| Name | Type | Default |
| --- | --- | --- |
| [#](#default-marker-color)<br>`defaultMarkerColor` | `string` | "#b1b1b7" |
| [#](#default-edge-options)<br>`defaultEdgeOptions` | `[DefaultEdgeOptions](/api-reference/types/default-edge-options) `<br><br>Any defaults set here will be applied to all new edges that are added to the flow. Properties on a new edge will override these defaults if they exist. |     |
| [#](#onedgecreate)<br>`onedgecreate` | `(connection: [Connection](/api-reference/types/connection) ) => [Edge](/api-reference/types/edge) `<br><br>This handler gets called when a new edge is created. You can use it to modify the newly created edge. |     |

Event handlers[](#event-handlers)

----------------------------------

### General Events[](#general-events)

| Name | Type |
| --- | --- |
| [#](#oninit)<br>`oninit` | `() => void`<br><br>This handler gets called when the flow is initialized. |
| [#](#onerror)<br>`onerror` | `(code: string, message: string) => void`<br><br>Ocassionally something may happen that causes Svelte Flow to error. Instead of exploding your application, we log a message to the console and then call this handler. You might use it for additional logging or to show a message to the user. |
| [#](#ondelete)<br>`ondelete` | `(params: { nodes: [Node](/api-reference/types/node) []; edges: [Edge](/api-reference/types/edge) [] }) => void`<br><br>This handler gets called when the user deletes nodes or edges. |
| [#](#onbeforedelete)<br>`onbeforedelete` | `async (params: { nodes: [Node](/api-reference/types/node) []; edges: [Edge](/api-reference/types/edge) [] }) => boolean`<br><br>This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. |

### Node Events[](#node-events)

| Name | Type |
| --- | --- |
| [#](#on-nodeclick)<br>`on:nodeclick` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent \| TouchEvent; node: [Node](/api-reference/types/node)  }>) => void` |
| [#](#on-nodecontextmenu)<br>`on:nodecontextmenu` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; node: [Node](/api-reference/types/node)  }>) => void` |
| [#](#on-nodemouseenter)<br>`on:nodemouseenter` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; node: [Node](/api-reference/types/node)  }>) => void` |
| [#](#on-nodemousemove)<br>`on:nodemousemove` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; node: [Node](/api-reference/types/node)  }>) => void` |
| [#](#on-nodemouseleave)<br>`on:nodemouseleave` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; node: [Node](/api-reference/types/node)  }>) => void` |
| [#](#on-nodedragstart)<br>`on:nodedragstart` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; targetNode: [Node](/api-reference/types/node)  \| null; nodes: [Node](/api-reference/types/node) [] }>) => void`<br><br>This event is used for single nodes and selections. If you drag a selection, targetNode is null |
| [#](#on-nodedrag)<br>`on:nodedrag` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; targetNode: [Node](/api-reference/types/node)  \| null; nodes: [Node](/api-reference/types/node) [] }>) => void`<br><br>This event is used for single nodes and selections. If you drag a selection, targetNode is null |
| [#](#on-nodedragstop)<br>`on:nodedragstop` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; targetNode: [Node](/api-reference/types/node)  \| null; nodes: [Node](/api-reference/types/node) [] }>) => void`<br><br>This event is used for single nodes and selections. If you drag a selection, targetNode is null |

### Edge Events[](#edge-events)

| Name | Type |
| --- | --- |
| [#](#on-edgeclick)<br>`on:edgeclick` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; edge: [Edge](/api-reference/types/edge)  }>) => void` |
| [#](#on-edgecontextmenu)<br>`on:edgecontextmenu` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent; edge: [Edge](/api-reference/types/edge)  }>) => void` |

### Connection Events[](#connection-events)

| Name | Type |
| --- | --- |
| [#](#onconnectstart)<br>`onconnectstart` | `(event: MouseEvent \| TouchEvent, params: { nodeId?: string; handleId?: string; handleType?: 'source' \| 'target'; }) => void`<br><br>When a user starts to drag a connection line, this event gets fired. |
| [#](#onconnect)<br>`onconnect` | `(connection: [Connection](/api-reference/types/connection) ) => void`<br><br>This event gets fired when a connection successfully completes. |
| [#](#onconnectend)<br>`onconnectend` | `(event: MouseEvent \| TouchEvent) => void`<br><br>Whenever the user drops the connection line, this events get fired. No matter if a connection was created or not. |

### Pane Events[](#pane-events)

| Name | Type |
| --- | --- |
| [#](#on-paneclick)<br>`on:paneclick` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent \| TouchEvent }>) => void` |
| [#](#on-panecontextmenu)<br>`on:panecontextmenu` | `(event: [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) <{ event: MouseEvent }>) => void` |

Keyboard props[](#keyboard-props)

----------------------------------

| Name | Type | Default |
| --- | --- | --- |
| [#](#delete-key)<br>`deleteKey` | `[KeyDefinition](/api-reference/types/key-definition)  \| [KeyDefinition](/api-reference/types/key-definition) [] \| null` | "Backspace" |
| [#](#selection-key)<br>`selectionKey` | `[KeyDefinition](/api-reference/types/key-definition)  \| [KeyDefinition](/api-reference/types/key-definition) [] \| null` | "Shift" |
| [#](#multi-selection-key)<br>`multiSelectionKey` | `[KeyDefinition](/api-reference/types/key-definition)  \| [KeyDefinition](/api-reference/types/key-definition) [] \| null` | "Meta" for MacOs, "Control" for other systems |
| [#](#zoom-activation-key)<br>`zoomActivationKey` | `[KeyDefinition](/api-reference/types/key-definition)  \| [KeyDefinition](/api-reference/types/key-definition) [] \| null`<br><br>If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false. By setting this prop to null you can disable this functionality. | "Meta" for MacOs, "Control" for other systems |
| [#](#pan-activation-key)<br>`panActivationKey` | `[KeyDefinition](/api-reference/types/key-definition)  \| [KeyDefinition](/api-reference/types/key-definition) [] \| null`<br><br>If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false. By setting this prop to null you can disable this functionality. | "Space" |

Interaction props[](#interaction-props)

----------------------------------------

| Name | Type | Default |
| --- | --- | --- |
| [#](#nodes-draggable)<br>`nodesDraggable` | `boolean`<br><br>Controls whether all nodes should be draggable or not. Individual nodes can override this setting by setting their draggable prop. If you want to use the mouse handlers on non-draggable nodes, you need to add the "nopan" class to those nodes. | true |
| [#](#nodes-connectable)<br>`nodesConnectable` | `boolean`<br><br>Controls whether all nodes should be connectable or not. Individual nodes can override this setting by setting their connectable prop. | true |
| [#](#elements-selectable)<br>`elementsSelectable` | `boolean` | true |
| [#](#auto-pan-on-connect)<br>`autoPanOnConnect` | `boolean` | true |
| [#](#auto-pan-on-node-drag)<br>`autoPanOnNodeDrag` | `boolean` | true |
| [#](#pan-on-drag)<br>`panOnDrag` | `boolean \| (0 \| 1 \| 2 \| 3 \| 4)[]`<br><br>Enabling this prop allows users to pan the viewport by clicking and dragging. You can also set this prop to an array of numbers to limit which mouse buttons can activate panning. For example, \[0,2\] would allow panning with the left and right mouse buttons. | true |
| [#](#selection-on-drag)<br>`selectionOnDrag` | `boolean` | false |
| [#](#selection-mode)<br>`selectionMode` | `"partial" \| "full"`<br><br>When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected. | "full" |
| [#](#pan-on-scroll)<br>`panOnScroll` | `boolean` | false |
| [#](#pan-on-scroll-speed)<br>`panOnScrollSpeed` | `number` |     |
| [#](#pan-on-scroll-mode)<br>`panOnScrollMode` | `"free" \| "horizontal" \| "vertical"`<br><br>This prop is used to limit the direction of panning when panOnScroll is enabled. The "free" option allows panning in any direction. | "free" |
| [#](#zoom-on-scroll)<br>`zoomOnScroll` | `boolean` | true |
| [#](#zoom-on-pinch)<br>`zoomOnPinch` | `boolean` | true |
| [#](#zoom-on-double-click)<br>`zoomOnDoubleClick` | `boolean` | true |
| [#](#connection-mode)<br>`connectionMode` | `"loose" \| "strict"`<br><br>A loose connection mode will allow you to connect handles of any type to one another. The strict mode will only allow you to connect source handles to target handles. | "strict" |

Connection line props[](#connection-line-props)

------------------------------------------------

| Name | Type | Default |
| --- | --- | --- |
| [#](#is-valid-connection)<br>`isValidConnection` | `(connection: [Connection](/api-reference/types/connection) ) => boolean`<br><br>This prop allows you to control which connections are valid. It gets called before an edge is created. | () => true |
| [#](#connection-radius)<br>`connectionRadius` | `number`<br><br>The radius around a handle where you drop a connection line to create a new edge. | 20  |
| [#](#connection-line-type)<br>`connectionLineType` | `[ConnectionLineType](/api-reference/types/connection-line-type) `<br><br>The type of edge path to use for connection lines. Although created edges can be of any type, Svelte Flow needs to know what type of path to render for the connection line before the edge is created! | ConnectionLineType.Bezier |
| [#](#connection-line-style)<br>`connectionLineStyle` | `string` |     |
| [#](#connection-line-wrapper-styles)<br>`connectionLineWrapperStyles` | `string` |     |

Notes[](#notes)

----------------

*   The props of this component get exported as `SvelteFlowProps`

Last updated on February 20, 2025

[API Reference](/api-reference "API Reference")
[<SvelteFlowProvider />](/api-reference/svelte-flow-provider "<SvelteFlowProvider />")

---

# The SvelteFlowProvider component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
<SvelteFlowProvider />

<SvelteFlowProvider />
======================

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/components/SvelteFlowProvider/SvelteFlowProvider.svelte)
 

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 />`](/api-reference/svelte-flow)
 component. Many of the hooks we provide rely on this component to work.

App.svelte

`<script> import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte';   import Sidebar from './Sidebar.svelte'; </script>   <SvelteFlowProvider>   <SvelteFlow nodes={...} edges={...} />   <Sidebar /> </SvelteFlowProvider>`

Sidebar.svelte

`<script>   import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte'     // This hook will only work if the component it's used in is a child of a   // <SvelteFlowProvider />.   const nodes = useNodes() </script>   <aside>   {#each $nodes as node (node.id)}     <div key={node.id}>       Node {node.id} -         x: {node.position.x.toFixed(2)},         y: {node.position.y.toFixed(2)}     </div>   {/each} </aside>`

Notes[](#notes)

----------------

*   If you’re using a router and want your flow’s state to persist across routes, it’s vital that you place the `<SvelteFlowProvider />` component _outside_ of your router.
*   If you have multiple flows on the same page you will need to use a separate `<SvelteFlowProvider />`.

Last updated on February 20, 2025

[<SvelteFlow />](/api-reference/svelte-flow "<SvelteFlow />")
[Components](/api-reference/components "Components")

---

# Sub Flows - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Learn](/learn "Learn")
[Guides](/learn/guides/custom-nodes "Guides")
Sub Flows

Sub Flows
=========

A sub flow is essentially a flow contained within a node. A sub flow can either function as an independent entity or can be interconnected with nodes outside of its parent node. This feature can be used for grouping nodes. In this section of the documentation, we will implement a flow with sub flows and explain available options for child nodes.

⚠️

**Order of Nodes:** It’s important that your parent nodes appear before their children in the `nodes` array to get processed correctly.

### Defining child nodes[](#defining-child-nodes)

To define a node as a child of another node, you need to use the `parentId` option (you can find a list of all options in the [node options section](/api-reference/types/node)
). Once we do that, the child node is positioned relative to its parent. A position of `{ x: 0, y: 0 }` is at the top left corner of the parent.

`const nodes = writable([   // this is a regular node   {     id: 'A',     data: {},     position: { x: 0, y: 0 },   },   // this gets a child node by using the parentId option   {     id: 'B',     data: { label: 'child 1' },     position: { x: 10, y: 10 },     // 👇     parentId: 'A',   }, ]);`

In the following example, we define a fixed width and height of the parent node by using the `style` option. Additionally, we configure the child extent to ‘parent’ to restrict the movement of child nodes beyond the boundaries of the parent node.

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, Background, type Node } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable<Node[]>([     {       id: 'A',       type: 'group',       data: {},       position: { x: 0, y: 0 },       style: 'width: 170px; height: 140px;'     },     {       id: 'B',       type: 'input',       data: { label: 'child 1' },       position: { x: 10, y: 10 },       parentId: 'A',       extent: 'parent'     },     {       id: 'C',       data: { label: 'child 2' },       position: { x: 10, y: 90 },       parentId: 'A',       extent: 'parent'     }   ]);     const edges = writable([]); </script>   <div style="height:100vh;">   <SvelteFlow {nodes} {edges} fitView autoPanOnNodeDrag={false} attributionPosition="top-right">     <Background bgColor="rgba(255, 240, 137, 0.25)" />   </SvelteFlow> </div>`

### How child nodes work[](#how-child-nodes-work)

When you drag the parent node, you will notice that the child nodes move accordingly. Adding a node to another node with the `parentId` option positions it relative to its parent. In terms of markup, the child node is not a subordinate. You can drag or position the child outside of its parent (when the `extent: 'parent'` option is not set). Nevertheless, when you drag the parent, the child moves too.

In the provided example, we use the `group` type for the parent node. The ‘group’ type is a convenient node type without handles, but you can use any other node type for this.

Let’s continue by adding more nodes and edges. As you can see, we can connect nodes within a group and create connections that go from a sub flow to an outer node:

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable<Node[]>([     {       id: 'A',       type: 'group',       data: {},       position: { x: 0, y: 0 },       style: 'width: 170px; height: 140px;'     },     {       id: 'A-1',       type: 'input',       data: { label: 'child 1' },       position: { x: 10, y: 10 },       parentId: 'A',       extent: 'parent'     },     {       id: 'A-2',       data: { label: 'child 2' },       position: { x: 10, y: 90 },       parentId: 'A',       extent: 'parent'     },     {       id: 'B',       type: 'output',       position: { x: -100, y: 200 },       data: { label: 'node b' }     },     {       id: 'C',       type: 'output',       position: { x: 100, y: 200 },       data: { label: 'node c' }     }   ]);     const edges = writable<Edge[]>([     { id: 'a1-a2', source: 'A-1', target: 'A-2' },     { id: 'a2-b', source: 'A-2', target: 'B' },     { id: 'a2-c', source: 'A-2', target: 'C' }   ]); </script>   <div style="height:100vh;">   <SvelteFlow {nodes} {edges} fitView autoPanOnNodeDrag={false} attributionPosition="top-right">     <Background bgColor="rgba(255, 240, 137, 0.25)" />   </SvelteFlow> </div>`

### Any node can be a parent node[](#any-node-can-be-a-parent-node)

To demonstrate, let’s remove the label from node B and add some child nodes. This example highlights the flexibility of using one of the default node types as a parent. Furthermore, we set the child nodes to have `draggable: false`, rendering them non-movable.

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodes = writable<Node[]>([     {       id: 'A',       type: 'group',       data: {},       position: { x: 0, y: 0 },       style: 'width: 170px; height: 140px;'     },     {       id: 'A-1',       type: 'input',       data: { label: 'child 1' },       position: { x: 10, y: 10 },       parentId: 'A',       extent: 'parent'     },     {       id: 'A-2',       data: { label: 'child 2' },       position: { x: 10, y: 90 },       parentId: 'A',       extent: 'parent'     },     {       id: 'B',       type: 'output',       position: { x: -100, y: 200 },       data: {},       style: 'width: 170px; height: 140px;'     },     {       id: 'B-1',       data: { label: 'child 1' },       position: { x: 50, y: 10 },       parentId: 'B',       extent: 'parent',       draggable: false,       style: 'width: 60px;'     },     {       id: 'B-2',       data: { label: 'child 2' },       position: { x: 10, y: 90 },       parentId: 'B',       extent: 'parent',       draggable: false,       style: 'width: 60px;'     },     {       id: 'B-3',       data: { label: 'child 3' },       position: { x: 100, y: 90 },       parentId: 'B',       extent: 'parent',       draggable: false,       style: 'width: 60px;'     },     {       id: 'C',       type: 'output',       position: { x: 100, y: 200 },       data: { label: 'node c' }     }   ]);     const edges = writable<Edge[]>([     { id: 'a1-a2', source: 'A-1', target: 'A-2' },     { id: 'a2-b', source: 'A-2', target: 'B' },     { id: 'a2-c', source: 'A-2', target: 'C' }   ]); </script>   <div style="height:100vh;">   <SvelteFlow {nodes} {edges} fitView autoPanOnNodeDrag={false} attributionPosition="top-right">     <Background bgColor="rgba(255, 240, 137, 0.25)" />   </SvelteFlow> </div>`

Last updated on February 20, 2025

[Custom Nodes](/learn/guides/custom-nodes "Custom Nodes")
[Theming](/learn/guides/theming "Theming")

---

# Theming - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Learn](/learn "Learn")
[Guides](/learn/guides/custom-nodes "Guides")
Theming

Theming
=======

Svelte Flow comes with minimal default styles and was designed to be fully customizable. Many of our users fully transform the look and feel of Svelte Flow to match their own brand or design system. This guide will introduce you to the different ways you can customize Svelte Flow’s appearance.

Default styles[](#default-styles)

----------------------------------

Svelte Flow’s default styles are enough to get going with the built-in nodes. They provide some sensible defaults for styles like padding, border radius, and animated edges. You can see what they look like below:

`import '@xyflow/svelte/dist/style.css';`

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow, Background, Controls, Position } from '@xyflow/svelte';     import '@xyflow/svelte/dist/style.css';     const nodeDefaults = {     sourcePosition: Position.Right,     targetPosition: Position.Left   };     const nodes = writable([     {       id: '1',       position: { x: 0, y: 150 },       data: { label: 'default style 1' },       ...nodeDefaults     },     {       id: '2',       position: { x: 250, y: 0 },       data: { label: 'default style 2' },       ...nodeDefaults     },     {       id: '3',       position: { x: 250, y: 150 },       data: { label: 'default style 3' },       ...nodeDefaults     },     {       id: '4',       position: { x: 250, y: 300 },       data: { label: 'default style 4' },       ...nodeDefaults     }   ]);   const edges = writable([     {       id: 'e1-2',       source: '1',       target: '2',       animated: true     },     {       id: 'e1-3',       source: '1',       target: '3'     },     {       id: 'e1-4',       source: '1',       target: '4'     }   ]); </script>   <main>   <SvelteFlow {nodes} {edges}>     <Background />     <Controls />   </SvelteFlow> </main>   <style>   main {     height: 100vh;   } </style>`

Base styles[](#base-styles)

----------------------------

If you just want to load the very basic styles that are necessary for Svelte Flow to work, you can import the base styles instead:

`import '@xyflow/svelte/dist/base.css';`

Open in Stackblitz

App.svelteindex.htmlindex.tsstyles.css

`<script>   import { writable } from 'svelte/store';   import { SvelteFlow, Background, Controls, Position } from '@xyflow/svelte';     import '@xyflow/svelte/dist/base.css';     const nodeDefaults = {     sourcePosition: Position.Right,     targetPosition: Position.Left   };     const nodes = writable([     {       id: '1',       position: { x: 0, y: 150 },       data: { label: 'base style 1' },       ...nodeDefaults     },     {       id: '2',       position: { x: 250, y: 0 },       data: { label: 'base style 2' },       ...nodeDefaults     },     {       id: '3',       position: { x: 250, y: 150 },       data: { label: 'base style 3' },       ...nodeDefaults     },     {       id: '4',       position: { x: 250, y: 300 },       data: { label: 'base style 4' },       ...nodeDefaults     }   ]);   const edges = writable([     {       id: 'e1-2',       source: '1',       target: '2',       animated: true     },     {       id: 'e1-3',       source: '1',       target: '3'     },     {       id: 'e1-4',       source: '1',       target: '4'     }   ]); </script>   <main>   <SvelteFlow {nodes} {edges}>     <Background />     <Controls />   </SvelteFlow> </main>   <style>   main {     height: 100vh;   } </style>`

Customization[](#customization)

--------------------------------

There are different ways how you can customize the appearance of Svelte Flow:

*   Work with scoped CSS within your custom nodes and edges
*   Override the built-in classes with custom CSS
*   Override the CSS variables Svelte Flow uses
*   Pass inline styles through `style` props

### Working with built-in classes[](#working-with-built-in-classes)

If you want to override the default styles, you can do so by overriding the built-in CSS classes. You can find a list of all the classes used by Svelte Flow below:

| Class name | Description |
| --- | --- |
| `.svelte-flow` | The outermost container |
| `.svelte-flow__renderer` | The inner container |
| `.svelte-flow__zoompane` | Zoom & pan pane |
| `.svelte-flow__selectionpane` | Selection pane |
| `.svelte-flow__selection` | User selection |
| `.svelte-flow__edges` | The element containing all edges in the flow |
| `.svelte-flow__edge` | Applied to each [`Edge`](/api-reference/types/edge)<br> in the flow |
| `.svelte-flow__edge.selected` | Added to an [`Edge`](/api-reference/types/edge)<br> when selected |
| `.svelte-flow__edge.animated` | Added to an [`Edge`](/api-reference/types/edge)<br> when its `animated` prop is `true` |
| `.svelte-flow__edge-path` | The SVG `<path />` element of an [`Edge`](/api-reference/types/edge) |
| `.svelte-flow__edge-label` | The edge label |
| `.svelte-flow__connection` | Applied to the current connection line |
| `.svelte-flow__connection-path` | The SVG `<path />` of a connection line |
| `.svelte-flow__nodes` | The element containing all nodes in the flow |
| `.svelte-flow__node` | Applied to each [`Node`](/api-reference/types/node)<br> in the flow |
| `.svelte-flow__node.selected` | Added to a [`Node`](/api-reference/types/node)<br> when selected. |
| `.svelte-flow__node-default` | Added when [`Node`](/api-reference/types/node)<br> type is `"default"` |
| `.svelte-flow__node-input` | Added when [`Node`](/api-reference/types/node)<br> type is `"input"` |
| `.svelte-flow__node-output` | Added when [`Node`](/api-reference/types/node)<br> type is `"output"` |
| `.svelte-flow__node-group` | Added when [`Node`](/api-reference/types/node)<br> type is `"group"` |
| `.svelte-flow__nodesselection` | Nodes selection |
| `.svelte-flow__nodesselection-rect` | Nodes selection rect |
| `.svelte-flow__handle` | Applied to each [`<Handle />`](/api-reference/components/handle)<br> component |
| `.svelte-flow__handle-top` | Applied when a handle’s [`Position`](/api-reference/types/position)<br> is set to `"top"` |
| `.svelte-flow__handle-right` | Applied when a handle’s [`Position`](/api-reference/types/position)<br> is set to `"right"` |
| `.svelte-flow__handle-bottom` | Applied when a handle’s [`Position`](/api-reference/types/position)<br> is set to `"bottom"` |
| `.svelte-flow__handle-left` | Applied when a handle’s [`Position`](/api-reference/types/position)<br> is set to `"left"` |
| `.svelte-flow__handle.connecting` | Applied when a connection line is above a handle. |
| `.svelte-flow__handle.valid` | Applied when a connection line is above a handle **and** the connection is valid |
| `.svelte-flow__background` | Applied to the [`<Background />`](/api-reference/components/background)<br> component |
| `.svelte-flow__minimap` | Applied to the [`<MiniMap />`](/api-reference/components/mini-map)<br> component |
| `.svelte-flow__controls` | Applied to the [`<Controls />`](/api-reference/components/controls)<br> component |

⚠️

Be careful if you go poking around the source code looking for other classes to override. Some classes are used internally and are required in order for the library to be functional. If you replace them you may end up with unexpected bugs or errors!

### CSS variables[](#css-variables)

If you don’t want to replace the default styles entirely but just want to tweak the overall look and feel, you can override some of the CSS variables we use throughout the library.

These variables are mostly self-explanatory. Below is a table of all the variables you might want to tweak and their default values for reference:

| Variable name | Default |
| --- | --- |
| `--xy-edge-stroke-default` | `#b1b1b7` |
| `--xy-edge-stroke-width-default` | `1` |
| `--xy-edge-stroke-selected-default` | `#555` |
| `--xy-connectionline-stroke-default` | `#b1b1b7` |
| `--xy-connectionline-stroke-width-default` | `1` |
| `--xy-attribution-background-color-default` | `rgba(255, 255, 255, 0.5)` |
| `--xy-minimap-background-color-default` | `#fff` |
| `--xy-background-pattern-dot-color-default` | `#91919a` |
| `--xy-background-pattern-line-color-default` | `#eee` |
| `--xy-background-pattern-cross-color-default` | `#e2e2e2` |
| `--xy-node-color-default` | `inherit` |
| `--xy-node-border-default` | `1px solid #1a192b` |
| `--xy-node-background-color-default` | `#fff` |
| `--xy-node-group-background-color-default` | `rgba(240, 240, 240, 0.25)` |
| `--xy-node-boxshadow-hover-default` | `0 1px 4px 1px rgba(0, 0, 0, 0.08)` |
| `--xy-node-boxshadow-selected-default` | `0 0 0 0.5px #1a192b` |
| `--xy-handle-background-color-default` | `#1a192b` |
| `--xy-handle-border-color-default` | `#fff` |
| `--xy-selection-background-color-default` | `rgba(0, 89, 220, 0.08)` |
| `--xy-selection-border-default` | `1px dotted rgba(0, 89, 220, 0.8)` |
| `--xy-controls-button-background-color-default` | `#fefefe` |
| `--xy-controls-button-background-color-hover-default` | `#f4f4f4` |
| `--xy-controls-button-color-default` | `inherit` |
| `--xy-controls-button-color-hover-default` | `inherit` |
| `--xy-controls-button-border-color-default` | `#eee` |
| `--xy-controls-box-shadow-default` | `0 0 2px 1px rgba(0, 0, 0, 0.08)` |

These variables are used to define the _defaults_ for the various elements of Svelte Flow. This means they can still be overriden by inline styles or custom classes on a per-element basis. If you want to override a variable, you can do so by adding:

`.svelte-flow {   --xy-node-background-color-default: #ff5050; }`

⚠️

Be aware that these variables are defined under `.svelte-flow` and under `:root`.

### Tailwind[](#tailwind)

### TailwindCSS[](#tailwindcss)

Custom nodes and edges are just Svelte components, and you can use any styling solution you’d like to style them. For example, you might want to use [Tailwind](https://tailwindcss.com/)
  to style your nodes:

`<script lang="ts">   import { Handle, Position, type NodeProps } from '@xyflow/svelte';     type $$Props = NodeProps;   export let data: $$Props['data']; </script>   <div class="px-4 py-2 shadow-md rounded-md bg-white border-2 border-stone-400">   <div class="flex">     <div class="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100">       {data.emoji}     </div>     <div class="ml-2">       <div class="text-lg font-bold">{data.name}</div>       <div class="text-gray-500">{data.job}</div>     </div>   </div>   <Handle     type="target"     position={Position.Top}     class="w-16 !bg-teal-500 rounded-none border-none"   />   <Handle     type="source"     position={Position.Bottom}     class="w-16 !bg-teal-500 rounded-none border-none"   /> </div>`

⚠️

If you want to overwrite default styles, make sure to import Tailwinds entry point after Svelte Flows base styles.

`import '@xyflow/svelte/dist/style.css'; import 'tailwind.css';`

For a complete example of using Tailwind with Svelte Flow, check out the [tailwind example](/examples/styling/tailwind)
!

Last updated on February 20, 2025

[Sub Flows](/learn/guides/sub-flows "Sub Flows")

---

# Components - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
Components

Components
==========

[<Background />](/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.

[Read more](/api-reference/components/background)

[<BaseEdge />](/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.

[Read more](/api-reference/components/base-edge)

[<ControlButton />](/api-reference/components/control-button)

--------------------------------------------------------------

The ControlButton component is used to render custom/ additional buttons for the Controls component.

[Read more](/api-reference/components/control-button)

[<Controls />](/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.

[Read more](/api-reference/components/controls)

[<EdgeLabel />](/api-reference/components/edge-label)

------------------------------------------------------

The Edge Label component can be used to add labels to edges.

[Read more](/api-reference/components/edge-label)

[<EdgeLabelRenderer />](/api-reference/components/edge-label-renderer)

-----------------------------------------------------------------------

Edges are SVG-based. If you want to render more complex labels you can use the EdgeLabelRenderer component to access a div based renderer. This component is a portal that renders the label in a div that is positioned on top of the edges.

[Read more](/api-reference/components/edge-label-renderer)

[<Handle />](/api-reference/components/handle)

-----------------------------------------------

The Handle component is used in your custom nodes to define connection points.

[Read more](/api-reference/components/handle)

[<MiniMap />](/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.

[Read more](/api-reference/components/mini-map)

[<NodeResizeControl />](/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).

[Read more](/api-reference/components/node-resize-control)

[<NodeResizer />](/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.

[Read more](/api-reference/components/node-resizer)

[<NodeToolbar />](/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.

[Read more](/api-reference/components/node-toolbar)

[<Panel />](/api-reference/components/panel)

---------------------------------------------

The Panel component helps you position content above the viewport. It is used internally by the MiniMap and Controls components.

[Read more](/api-reference/components/panel)

Last updated on February 20, 2025

[<SvelteFlowProvider />](/api-reference/svelte-flow-provider "<SvelteFlowProvider />")
[<Background />](/api-reference/components/background "<Background />")

---

# The Background component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<Background />

<Background />
==============

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/plugins/Background/Background.svelte)
 

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`.

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, Background, BackgroundVariant } from '@xyflow/svelte';     const nodes = writable([]);   const edges = writable([]); </script>   <SvelteFlow nodes={nodes} edges={edges}>   <Background bgColor="#ccc" variant={BackgroundVariant.Dots} /> </SvelteFlow>`

Props[](#props)

----------------

| Name | Type | Default |
| --- | --- | --- |
| [#](#id)<br>`id?` | `string` |     |
| [#](#class)<br>`class?` | `string` |     |
| [#](#bg-color)<br>`bgColor?` | `string` |     |
| [#](#pattern-color)<br>`patternColor?` | `string` |     |
| [#](#pattern-class)<br>`patternClass?` | `string` |     |
| [#](#gap)<br>`gap?` | `number \| [number, number]`<br><br>The gap between patterns. Passing in a tuple allows you to control the x and y gap independently. | 28  |
| [#](#size)<br>`size?` | `number`<br><br>The radius of each dot or the size of each rectangle if BackgroundVariant.Dots or BackgroundVariant.Cross is used. This defaults to 1 or 6 respectively, or ignored if BackgroundVariant.Lines is used. |     |
| [#](#line-width)<br>`lineWidth?` | `number` | 1   |
| [#](#variant)<br>`variant?` | `[BackgroundVariant](/api-reference/types/background-variant) ` | BackgroundVariant.Dots |

Last updated on February 20, 2025

[Components](/api-reference/components "Components")
[<BaseEdge />](/api-reference/components/base-edge "<BaseEdge />")

---

# The MiniMap component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<MiniMap />

<MiniMap />
===========

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte)
 

The `<MiniMap />` component can be used to render 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.

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, MiniMap } from '@xyflow/svelte';     const nodes = writable([]);   const edges = writable([]); </script>   <SvelteFlow nodes={nodes} edges={edges}>   <MiniMap nodeStrokeWidth={3} /> </SvelteFlow>`

Props[](#props)

----------------

For TypeScript users, the props type for the `<MiniMap />` component is exported as `MiniMapProps`.

| Name | Type | Default |
| --- | --- | --- |
| [#](#class)<br>`class?` | `string` | -   |
| [#](#style)<br>`style?` | `string` | -   |
| [#](#width)<br>`width?` | `number` | -   |
| [#](#height)<br>`height?` | `number` | -   |
| [#](#bg-color)<br>`bgColor?` | `string` | "#fff" |
| [#](#node-color)<br>`nodeColor?` | `string \| (node: [Node](/api-reference/types/node) <T>) => string` | "#e2e2e2" |
| [#](#node-stroke-color)<br>`nodeStrokeColor?` | `string \| (node: [Node](/api-reference/types/node) <T>) => string` | "transparent" |
| [#](#node-class)<br>`nodeClass?` | `string \| (node: [Node](/api-reference/types/node) <T>) => string` |     |
| [#](#node-border-radius)<br>`nodeBorderRadius?` | `number` | 5   |
| [#](#node-stroke-width)<br>`nodeStrokeWidth?` | `number` | 2   |
| [#](#mask-color)<br>`maskColor?` | `string` | "rgb(240, 240, 240, 0.6)" |
| [#](#mask-stroke-color)<br>`maskStrokeColor?` | `string` | "none" |
| [#](#mask-stroke-width)<br>`maskStrokeWidth?` | `number` | 1   |
| [#](#position)<br>`position?` | `[PanelPosition](/api-reference/types/panel-position) ` | "bottom-right" |
| [#](#pannable)<br>`pannable?` | `boolean`<br><br>Determines whether you can pan the viewport by dragging inside the minimap. | false |
| [#](#zoomable)<br>`zoomable?` | `boolean`<br><br>Determines whether you can zoom the viewport by scrolling inside the minimap. | false |
| [#](#aria-label)<br>`ariaLabel?` | `string \| null`<br><br>There is no text inside the minimap for a screen reader to use as an accessible name, so it's important we provide one to make the minimap accessible. The default is sufficient but you may want to replace it with something more relevant to your app or product. | "Svelte Flow mini map" |
| [#](#inverse-pan)<br>`inversePan?` | `boolean` |     |
| [#](#zoom-step)<br>`zoomStep?` | `number` | 10  |

Examples[](#examples)

----------------------

### Making the mini map interactive[](#making-the-mini-map-interactive)

By default, the mini map is non-interactive. To allow users to interact with the viewport by panning or zooming the minimap, you can set either of the `zoomable` or `pannable` (or both!) props to `true`.

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, MiniMap } from '@xyflow/svelte';     const nodes = writable([]);   const edges = writable([]); </script>   <SvelteFlow nodes={nodes} edges={edges}>   <MiniMap pannable zoomable /> </SvelteFlow>`

### Customising mini map node color[](#customising-mini-map-node-color)

The `nodeColor`, `nodeStrokeColor`, and `nodeClassName` props can be a function that takes a [`Node`](/api-reference/types/node)
 and computes a value for the prop. This can be used to customise the appearance of each mini map node.

This example shows how to color each mini map node based on the node’s type:

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, MiniMap } from '@xyflow/svelte';     const nodes = writable([]);   const edges = writable([]);     function nodeColor(node) {     return node.type === 'input' ? 'blue' : 'red';   } </script>   <SvelteFlow nodes={nodes} edges={edges}>   <MiniMap nodeColor={nodeColor} /> </SvelteFlow>`

Last updated on February 20, 2025

[<Handle />](/api-reference/components/handle "<Handle />")
[<NodeResizeControl />](/api-reference/components/node-resize-control "<NodeResizeControl />")

---

# The Handle component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<Handle />

<Handle />
==========

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/components/Handle/Handle.svelte)
 

The `<Handle />` component is used in your [custom nodes](/learn/guides/custom-nodes)
 to define connection points.

CustomNode.svelte

`<script lang="ts">   import { Handle, Position } from '@xyflow/svelte'; </script>   <div>   {data.label} </div>   <Handle type="target" position={Position.Left} /> <Handle type="source" position={Position.Right} />`

Props[](#props)

----------------

For TypeScript users, the props type for the `<Handle />` component is exported as `HandleProps`.

| Name | Type | Default |
| --- | --- | --- |
| [#](#id)<br>`id?` | `string` |     |
| [#](#type)<br>`type` | `"source" \| "target"` |     |
| [#](#class)<br>`class?` | `string` |     |
| [#](#style)<br>`style?` | `string` |     |
| [#](#position)<br>`position` | `[Position](/api-reference/types/position) `<br><br>The position of the handle relative to the node. In a horizontal flow source handles are typically Position.Right and in a vertical flow they are typically Position.Top. |     |
| [#](#is-connectable)<br>`isConnectable?` | `boolean` | true |
| [#](#onconnect)<br>`onconnect?` | `(connection: [Connection](/api-reference/types/connection) []) => void` |     |
| [#](#ondisconnect)<br>`ondisconnect?` | `(connection: [Connection](/api-reference/types/connection) []) => void` |     |

Examples[](#examples)

----------------------

### Custom handle with validation[](#custom-handle-with-validation)

You can create your own custom handles by wrapping the `<Handle />` component. This example shows a custom handle that only allows connections when the connection source matches a given id.

`<script> 	import { Handle, Position } from '@xyflow/svelte';   	export let position; 	export let source;   	function isValidConnection(connection) { 		if (connection.source === source) { 			return true; 		} 		return false; 	}   </script>   <Handle 	type="target" 	position={position} 	{isValidConnection} 	style="background: #fff" />`

### Style handles when connecting[](#style-handles-when-connecting)

The handle receives the additional class names `connecting` when the connection line is above the handle and `valid` if the connection is valid. You can find an example which uses these classes [here](/examples/interaction/validation)
.

### Multiple handles[](#multiple-handles)

If you need multiple source or target handles you can achieve this by creating a custom node. Normally you just use the id of a node for the `source` or `target` of an edge. If you have multiple source or target handles you need to pass an id to these handles. These ids can be used by an edge with the `sourceHandle` and `targetHandle` options, so that you can connect a specific handle. If you have a node with an id = `1` and a handle with an id = `a` you can connect this handle by using the node `source=1` and the `sourceHandle=a`.

### Dynamic handles[](#dynamic-handles)

If you are programmatically changing the position or number of handles in your custom node, you need to update the node internals with the [`useUpdateNodeInternals`](/api-reference/hooks/use-update-node-internals)
 hook.

You can find an example of how to implement a custom node with multiple handles in the [custom node guide](/learn/guides/custom-nodes)
 or in the [custom node example](/examples/nodes/custom-node)
.

### Custom handle styles[](#custom-handle-styles)

Since the handle is a div, you can use CSS to style it or pass a style prop to customize a Handle. You can see this in the [Add Node On Edge Drop](/examples/nodes/add-node-on-edge-drop)
 and [Simple Floating Edges](/examples/edges/simple-floating-edges)
 examples.

Last updated on February 20, 2025

[<EdgeLabelRenderer />](/api-reference/components/edge-label-renderer "<EdgeLabelRenderer />")
[<MiniMap />](/api-reference/components/mini-map "<MiniMap />")

---

# The BaseEdge component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<BaseEdge />

<BaseEdge />
============

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte)
 

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.

CustomEdge.svelte

`<script lang="ts">   import { BaseEdge, getStraightPath } from '@xyflow/svelte';     const [edgePath] = getStraightPath({     sourceX,     sourceY,     targetX,     targetY,   }); </script>   <BaseEdge path={edgePath} {...$$props} />`

Props[](#props)

----------------

| Name | Type |
| --- | --- |
| [#](#id)<br>`id` | `string` |
| [#](#interaction-width)<br>`interactionWidth` | `number` |
| [#](#path)<br>`path` | `string` |
| [#](#style)<br>`style` | `string` |
| [#](#class)<br>`class` | `string` |
| [#](#marker-start)<br>`markerStart` | `string` |
| [#](#marker-end)<br>`markerEnd` | `string` |
| [#](#label)<br>`label` | `string` |
| [#](#label-x)<br>`labelX` | `number` |
| [#](#label-y)<br>`labelY` | `number` |
| [#](#label-style)<br>`labelStyle` | `string` |

Notes[](#notes)

----------------

*   If you want to use an edge marker with the `<BaseEdge />` component, you can pass the `markerStart` or `markerEnd` props passed to your custom edge through to the `<BaseEdge />` component. You can see all the props passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props)
     type.

Last updated on February 20, 2025

[<Background />](/api-reference/components/background "<Background />")
[<ControlButton />](/api-reference/components/control-button "<ControlButton />")

---

# The Controls component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<Controls />

<Controls />
============

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/plugins/Controls/Controls.svelte)
 

The `<Controls />` component renders a small panel that contain convenient buttons to zoom in, zoom out, fit the view, and lock the viewport.

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, Controls } from '@xyflow/svelte';     const nodes = writable([]);   const edges = writable([]); </script>   <SvelteFlow nodes={nodes} edges={edges}>   <Controls /> </SvelteFlow>`

Props[](#props)

----------------

For TypeScript users, the props type for the `<Controls />` component is exported as `ControlsProps`.

| Name | Type | Default |
| --- | --- | --- |
| [#](#position)<br>`position?` | `[PanelPosition](/api-reference/types/panel-position) ` | "bottom-left" |
| [#](#show-zoom)<br>`showZoom?` | `boolean` | true |
| [#](#show-fit-view)<br>`showFitView?` | `boolean` | true |
| [#](#show-lock)<br>`showLock?` | `boolean` | true |
| [#](#fit-view-options)<br>`fitViewOptions?` | `[FitViewOptions](/api-reference/types/fit-view-options) ` |     |
| [#](#button-bg-color)<br>`buttonBgColor?` | `string` | undefined |
| [#](#button-bg-color-hover)<br>`buttonBgColorHover?` | `string` | undefined |
| [#](#button-color)<br>`buttonColor?` | `string` | undefined |
| [#](#button-color-hover)<br>`buttonColorHover?` | `string` | undefined |
| [#](#style)<br>`style?` | `string` | undefined |
| [#](#class)<br>`class?` | `string` | undefined |
| [#](#orientation)<br>`orientation?` | `"horizontal" \| "vertical"` | "vertical" |

Additionally, the `<Controls />` component accepts any prop valid on a `<div />` element.

Notes[](#notes)

----------------

*   To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button)
     component

Last updated on February 20, 2025

[<ControlButton />](/api-reference/components/control-button "<ControlButton />")
[<EdgeLabel />](/api-reference/components/edge-label "<EdgeLabel />")

---

# The NodeResizeControl component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<NodeResizeControl />

<NodeResizeControl />
=====================

[Source on GitHub](https://github.com/xyflow/xyflow/blob/487b13c9ad8903789f56c6fcfd8222f9cb74b812/packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte)
 

To create your own resizing UI, you can use the `NodeResizeControl` component where you can pass children (such as icons).

Props[](#props)

----------------

For TypeScript users, the props type for the `<NodeResizeControl />` component is exported as `ResizeControlProps`.

| Name | Type | Default |
| --- | --- | --- |
| [#](#node-id)<br>`nodeId` | `string` |     |
| [#](#position)<br>`position?` | `"top" \| "bottom" \| "left" \| "right" \| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right"` | "bottom-right" |
| [#](#variant)<br>`variant?` | `"handle" \| "line"` | "handle" |
| [#](#keep-aspect-ratio)<br>`keepAspectRatio?` | `boolean` | false |
| [#](#min-width)<br>`minWidth?` | `number` | 10  |
| [#](#max-width)<br>`maxWidth?` | `number` | Number.MAX_SAFE_INTEGER |
| [#](#min-height)<br>`minHeight?` | `number` | 10  |
| [#](#max-height)<br>`maxHeight?` | `number` | Number.MAX_SAFE_INTEGER |
| [#](#color)<br>`color?` | `string` |     |
| [#](#style)<br>`style?` | `string` |     |
| [#](#class)<br>`class?` | `string` |     |
| [#](#children)<br>`children?` | `React.ReactNode` |     |
| [#](#should-resize)<br>`shouldResize?` | `(event: D3.DragEvent, params: ResizeParams & { direction: number[] }) => boolean` |     |
| [#](#on-resize-start)<br>`onResizeStart?` | `(event: D3.DragEvent, params: ResizeParams) => void` |     |
| [#](#on-resize)<br>`onResize?` | `(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => void` |     |
| [#](#on-resize-end)<br>`onResizeEnd?` | `(event: D3.DragEvent, params: ResizeParams) => void` |     |

Last updated on February 20, 2025

[<MiniMap />](/api-reference/components/mini-map "<MiniMap />")
[<NodeResizer />](/api-reference/components/node-resizer "<NodeResizer />")

---

# The ControlButton component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<ControlButton />

<ControlButton />
=================

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte)
 

The `<ControlButton />` component is used to render custom/ additional buttons for the `<Controls />` component.

`<script lang="ts">   import { Controls, ControlButton } from '@xyflow/svelte'; </script>   <Controls>   <ControlButton on:click={() => console.log('⚡️')}>     ⚡️   </ControlButton> </Controls>`

Last updated on February 20, 2025

[<BaseEdge />](/api-reference/components/base-edge "<BaseEdge />")
[<Controls />](/api-reference/components/controls "<Controls />")

---

# The EdgeLabelRenderer component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<EdgeLabelRenderer />

<EdgeLabelRenderer />
=====================

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte)
 

Edges are SVG-based. If you want to render more complex labels you can use the `<EdgeLabelRenderer />` component to access a div based renderer. This component is a portal that renders the label in a `<div />` that is positioned on top of the edges. You can see an example usage of the component in the [edge label renderer](/examples/edges/edge-label-renderer)
 example. We are using the EdgeLabelRenderer internally to render edge labels.

CustomEdge.svelte

``<script lang="ts">   import { getBezierPath, EdgeLabelRenderer, BaseEdge } from '@xyflow/svelte';     export let id: $$Props['id'];   export let data: $$Props['data'];     $: [edgePath, labelX, labelY] = getBezierPath($$props); </script>   <BaseEdge id={id} path={edgePath} /> <EdgeLabelRenderer>   <div     style={{       position: 'absolute',       transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,       background: '#ffcc00',       padding: 10,       borderRadius: 5,       fontSize: 12,       fontWeight: 700,     }}     class="nodrag nopan"   >     {data.label}   </div> </EdgeLabelRenderer>``

Props[](#props)

----------------

| Name | Type |
| --- | --- |
| [#](#children)<br>`children` | `[SvelteComponent](https://github.com/sveltejs/svelte/blob/3d20b392895b54b75b840fda6511840cc6a7a371/packages/svelte/src/runtime/internal/Component.js#L451) ` |

Notes[](#notes)

----------------

*   The `<EdgeLabelRenderer />` has no pointer events by default. If you want to add mouse interactions you need to set the style `pointerEvents: all` and add the `nopan` class on the label or the element you want to interact with.

Last updated on February 20, 2025

[<EdgeLabel />](/api-reference/components/edge-label "<EdgeLabel />")
[<Handle />](/api-reference/components/handle "<Handle />")

---

# The Edge Label component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<EdgeLabel />

<EdgeLabel />
=============

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte)
 

The `<EdgeLabel />` component is used in your custom edges to display an edge label that selects the edge when it is clicked.

CustomEdge.svelte

`<script lang="ts">   import { getBezierPath, type EdgeProps } from '@xyflow/svelte';     type $$Props = EdgeProps;     export let id: $$Props['id'] = undefined;   export let label: $$Props['label'] = undefined;   export let labelStyle: $$Props['labelStyle'] = undefined;     export let sourceX: $$Props['sourceX'];   export let sourceY: $$Props['sourceY'];   export let sourcePosition: $$Props['sourcePosition'];     export let targetX: $$Props['targetX'];   export let targetY: $$Props['targetY'];   export let targetPosition: $$Props['targetPosition'];     $: [path, labelX, labelY] = getBezierPath({     sourceX,     sourceY,     targetX,     targetY,     sourcePosition,     targetPosition,     curvature: pathOptions?.curvature   }); </script>   <path   {id}   d={path}   fill="none" />   {#if label}   <EdgeLabel x={labelX} y={labelY} style={labelStyle}>     {label}   </EdgeLabel> {/if}`

Props[](#props)

----------------

| Name | Type |
| --- | --- |
| [#](#style)<br>`style?` | `string` |
| [#](#x)<br>`x?` | `number` |
| [#](#y)<br>`y?` | `number` |

Last updated on February 20, 2025

[<Controls />](/api-reference/components/controls "<Controls />")
[<EdgeLabelRenderer />](/api-reference/components/edge-label-renderer "<EdgeLabelRenderer />")

---

# The NodeToolbar component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<NodeToolbar />

<NodeToolbar />
===============

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte)
 

The NodeToolbar component can be used to display a toolbar on a side of a node or display a tooltip for example.

CustomNode.svelte

`<script lang="ts"> 	import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';   	type $$Props = NodeProps;   	export let data: $$Props['data']; </script>   <NodeToolbar> 	<button>delete</button> 	<button>copy</button> 	<button>expand</button> </NodeToolbar> <div class="node"> 	<div>{data.label}</div> 	<Handle type="target" position={Position.Left} /> 	<Handle type="source" position={Position.Right} /> </div>`

Props[](#props)

----------------

| Name | Type |
| --- | --- |
| [#](#node-id)<br>`nodeId?` | `string \| string[]` |
| [#](#position)<br>`position?` | `[Position](/api-reference/types/position) ` |
| [#](#align)<br>`align?` | `Align` |
| [#](#offset)<br>`offset?` | `number` |
| [#](#is-visible)<br>`isVisible?` | `number` |

Notes[](#notes)

----------------

*   By default, the toolbar is only visible when a node is selected. If multiple nodes are selected it will not be visible to prevent overlapping toolbars or clutter. You can override this behavior by setting the `isVisible` prop to `true`.

Last updated on February 20, 2025

[<NodeResizer />](/api-reference/components/node-resizer "<NodeResizer />")
[<Panel />](/api-reference/components/panel "<Panel />")

---

# useNodeConnections() - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Hooks](/api-reference/hooks "Hooks")
useNodeConnections()

useNodeConnections()
====================

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/svelte/src/lib/hooks/useNodeConnections.ts)
 

This hook returns an array of connections on a specific node, handle type (‘source’, ‘target’) or handle ID.

 
`<script>   import { useNodeConnections } from '@xyflow/svelte';   const connections = useNodeConnections({ handleType: 'target', handleId: 'my-handle' }); </script>   <div>There are currently {connections.length} incoming connections!</div>`

Signature[](#signature)

------------------------

| Name | Type |
| --- | --- |
| [#](#params)<br>Params |     |
| [#](#id)<br>`id?` | `string`<br><br>ID of the node, filled in automatically if used inside custom node |
| [#](#handle-type)<br>`handleType?` | `"source" \| "target"`<br><br>What type of handle connections do you want to observer? |
| [#](#handle-id)<br>`handleId?` | `string`<br><br>ID of the handle |
| [#](#on-connect)<br>`onConnect?` | `(connections: [Connection](/api-reference/types/connection) []) => void` |
| [#](#on-disconnect)<br>`onDisconnect?` | `(connections: [Connection](/api-reference/types/connection) []) => void` |
| [#](#returns)<br>Returns |     |
| [#](#) | `[NodeConnection](/api-reference/types/node-connection) []` |

Last updated on February 20, 2025

[useInternalNode()](/api-reference/hooks/use-internal-node "useInternalNode()")
[useNodes()](/api-reference/hooks/use-nodes "useNodes()")

---

# The NodeResizer component - Svelte Flow



[📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!](https://next.svelteflow.dev)

[Reference](/api-reference "Reference")
[Components](/api-reference/components "Components")
<NodeResizer />

<NodeResizer />
===============

[Source on GitHub](https://github.com/xyflow/xyflow/blob/487b13c9ad8903789f56c6fcfd8222f9cb74b812/packages/svelte/src/lib/plugins/NodeResizer/NodeResizer.svelte)
 

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.

CustomNode.svelte

`<script lang="ts">   import { Handle, Position, NodeResizer } from '@xyflow/svelte';     export let data; </script>   <NodeResizer minWidth={100} minHeight={30} /> <Handle type="target" position={Position.Left} /> <div style={{ padding: 10 }}>{data.label}</div> <Handle type="source" position={Position.Right} />`

Props[](#props)

----------------

For TypeScript users, the props type for the `<NodeResizer />` component is exported as `NodeResizerProps`.

| Name | Type |
| --- | --- |
| [#](#node-id)<br>`nodeId?` | `string` |
| [#](#color)<br>`color?` | `string` |
| [#](#handle-class)<br>`handleClass?` | `string` |
| [#](#handle-style)<br>`handleStyle?` | `string` |
| [#](#line-class)<br>`lineClass?` | `string` |
| [#](#line-style)<br>`lineStyle?` | `string` |
| [#](#is-visible)<br>`isVisible?` | `boolean` |
| [#](#min-width)<br>`minWidth?` | `number` |
| [#](#min-height)<br>`minHeight?` | `number` |
| [#](#max-width)<br>`maxWidth?` | `number` |
| [#](#max-height)<br>`maxHeight?` | `number` |
| [#](#keep-aspect-ratio)<br>`keepAspectRatio?` | `boolean` |
| [#](#should-resize)<br>`shouldResize?` | `(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => boolean` |
| [#](#on-resize-start)<br>`onResizeStart?` | `(event: D3.DragEvent, params: ResizeParams) => void` |
| [#](#on-resize)<br>`onResize?` | `(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => void` |
| [#](#on-resize-end)<br>`onResizeEnd?` | `(event: D3.DragEvent, params: ResizeParams) => void` |

Examples[](#examples)

----------------------

Head over to the [example page](/examples/nodes/node-resizer)
 to see how this is done.

Open in Stackblitz

App.svelteCustomResizerNode.svelteResizableNode.svelteResizableNodeSelected.svelteindex.tsstyles.css

`<script lang="ts">   import { writable } from 'svelte/store';   import { SvelteFlow, Background, type Node, type Edge } from '@xyflow/svelte';     import ResizableNode from './ResizableNode.svelte';   import CustomResizerNode from './CustomResizerNode.svelte';   import ResizableNodeSelected from './ResizableNodeSelected.svelte';     import '@xyflow/svelte/dist/style.css';     const nodeStyle =     'background: #fff; border: 1px solid black; border-radius: 15px; font-size: 12px;';     const initialEdges: Edge[] = [];   const initialNodes: Node[] = [     {       id: '1',       type: 'ResizableNode',       data: { label: 'NodeResizer' },       position: { x: 0, y: 50 },       style: nodeStyle     },     {       id: '2',       type: 'ResizableNodeSelected',       data: { label: 'NodeResizer when selected' },       position: { x: 100, y: 300 },       style: nodeStyle     },     {       id: '3',       type: 'CustomResizerNode',       data: { label: 'Custom Resize Icon' },       position: { x: 150, y: 150 },       style: nodeStyle + 'padding: 5px; height: 100px;'     }   ];     const nodes = writable<Node[]>(initialNodes);   const edges = writable<Edge[]>(initialEdges);     const nodeTypes = {     ResizableNode,     CustomResizerNode,     ResizableNodeSelected   }; </script>   <div style="height:100vh;">   <SvelteFlow {nodes} {nodeTypes} {edges} fitView>     <Background />   </SvelteFlow> </div>`

### Custom Resize Controls[](#custom-resize-controls)

To build custom resize controls, you can use the [NodeResizeControl](/api-reference/components/node-resize-control)
 component and customize it.

Notes[](#notes)

----------------

*   Take a look at the docs for the [`NodeProps`](/api-reference/types/node-props)
     type or the guide on [custom nodes](/learn/guides/custom-nodes)
     to see how to implement your own nodes.

Last updated on February 20, 2025

[<NodeResizeControl />](/api-reference/components/node-resize-control "<NodeResizeControl />")
[<NodeToolbar />](/api-reference/components/node-toolbar "<NodeToolbar />")

---