Dang, the kids grow up so fast. It feels like yesterday when Svelte Flow was taking its first steps, and then bam–its now a full-grown library, complaining about our lame music taste…

And like any decent coming-of-age flick, there are some bumps along the way before you see the end credits roll over the sunset. For us, this meant rewriting Svelte Flow twice before landing where we are today. And it is better than ever! A good chunk of the glow-up comes from new possibilities in Svelte 5, and the rest comes down to building a Svelte library from the ground up.

While there are many things to unpack about our journey with Svelte 5, that’s a story for another day.

TL;DR

• Lots of new features like reconnecting edges, improved fitView, key navigation, and better accessibility.
• Written from the ground up for Svelte 5.
• Better DX via TSDoc comments.
• An overhauled learn section  and automatically generated API references .
• Feature parity with React Flow  for present and upcoming features.

Wait, what’s Svelte Flow?

For those new to Svelte Flow, it is a Svelte library for building node-based applications like workflow editors, data pipelines, or visual programming environments. With just a few lines of code, you get an interactive flow with zooming, panning, connecting nodes, and much more.

<script>
  import { SvelteFlow, Background, Controls, Minimap } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([
    {
      id: '1',
      type: 'input',
      position: { x: 0, y: 0 },
      data: { label: 'Hello' },
    },
    {
      id: '2',
      type: 'output',
      position: { x: 100, y: 100 },
      data: { label: 'World' },
    },
  ]);
 
  let edges = $state.raw([
    { id: '1-2', source: '1', target: '2', type: 'smoothstep', label: 'to the' },
  ]);
</script>
 
<SvelteFlow bind:nodes bind:edges fitView>
  <Background />
  <Controls />
  <Minimap />
</SvelteFlow>

New features and improvements

One of the goals of our first major release was to close the last remaining gaps between Svelte Flow and React Flow. For us, this also marks a new commitment to develop new features for both libraries in tandem. So keep your eyes peeled for future releases! 👀

• Reconnect edges : You can reconnect your edges by using the new <EdgeReconnectAnchor /> component. It can be used to add custom reconnection points on custom edges.
• Keyboard Navigation & A11y: We added support for keyboard navigation and improved accessibility for screen readers. You can now navigate through nodes and edges using the arrow keys.
• Click Connect: You can now create a new connection by clicking on a handle one by one.
• Enhanced ViewportPortal : We added a new <ViewportPortal /> component that allows you to render content in the viewport of the flow. This is useful for rendering custom overlays or tooltips.
• Improved fitView : We finetuned the fitView function to better work with dynamically added nodes.
• And countless other small improvements…

Embracing runes

To create a stable API for the future, we fully embraced signals by converting all stores  to runes . In some instances, this was as easy as replacing writable with $state. In some other cases, this required us to rethink our general architecture. However, after a fair amount of tinkering, benchmarking, and restless nights spent dreaming about runes, we managed to simplify many parts of the library and even make it more performant.

A big shoutout goes out to the Svelte team for their help during the turbulent era of the Svelte 5 Release Candidate! Fixes were delivered either within a couple of hours  or sometimes in a matter of minutes !?

Svelte Flow in the wild

I had a great time mingling with the community at Svelte Summit ! In case you couldn’t make it to Barcelona, Ilja  wrote a highly accurate report  that is worth a read. I even got to chat with people who are already using Svelte Flow - in production - today! And to prove to y’all we are not just pushing some vaporware here, take a look at some of these projects out in the wild!

Windmill 

An open-source developer platform and workflow engine using Svelte Flow to view and edit workflows.

Sparrow 

A collaborative API testing workspace utilizing Svelte Flow for visualizing the shape and status of test runs.

Whimsy 

A tiny game engine’s visual scripting tool is powered by Svelte Flow.

Okay, next.

Now that the cat is finally out of the bag, all that’s missing is you! Do you have any feedback, ideas, need help, or just want to show us what you are building? Feel free to reach out and say hi on our Discord .

Thanks to everyone who test, use, share, subscribe, and support our libraries and ecosystems.

Sincerely, your xyflow team

Abbey, Christopher, Moritz, and Peter