15 November 2023

Why Svelte Flow?

John Robb
is typing...

A lot of people have asked us if React Flow (opens in a new tab) will be ported to their favorite front-end framework. Two people went as far as to create their own libraries (Svelvet (opens in a new tab) and Vue Flow (opens in a new tab)), both citing React Flow as a jumping-off point. Even though there is an obvious need for this sort of tool in other framework, we've stuck with React until only recently.

A collection of messages on discord where people ask us to port React Flow to other front-end frameworks like solidjs, svelte, preact, flutter, and angular.

Earlier this year, we felt we had the time and space to choose what would come next for us as a team. We ended up spending the next months developing Svelte Flow (opens in a new tab) and launched it earlier this month. This naturally raises the question:

Why Svelte?

1. Newsroom roots

Before working on React Flow, we worked on lots of interactive data visualizations with newsrooms under the name of webkid (opens in a new tab). While we were doing that, we would see Rich Harris’ work from the New York Times (like this (opens in a new tab)), and followed the development on Svelte since its beginnings.

In 2020, we tried using Svelte on one of our projects to build an interactive map (below), and had a great time using it. It left a good impression on us and we were excited to return to it.

An interactive map with the title Where do our products come from? It shows which countries this company's groceries come from, sorted by type of grocery like snacks, nuts, or dry fruits.

Our first project with Svelte in 2020. live demo (opens in a new tab)

2. Happy and growing community

Although Svelte has less than half of the usage of React, Vue, or Angular, it has a high retention rate, usage, and interest according to the 2022 stateofjs survey (opens in a new tab). We’ve heard lots of anecdotal evidence that the developer experience is great, and we were happy to experience it for ourselves. On top of that, recent funding from Vercel (opens in a new tab) gave us a confidence-boost that the core Svelte team will be sticking around.

A graph showing the ratio of retention over time for popular front-end technologies. Svelte and Solid have the highest retention around 90 percent. React is around 83 percent. Ember and Angular have the lowest at 19 and 42 percent, respectively.

3. We just like… wanted to?

In the spirit of experimentation, we built the first prototype of Svelte Flow in a couple of weeks. It worked, and it we had fun doing it. We like to follow those impulses when they arrive, so we kept going.

Working with Svelte is different, because it's a compiler and has lot of great stuff built-in. We especially liked that it comes with scoped styles, built-in stores and an easy to understand reactivity system. There are also things that still feel weird like handling events or typing a component with TypeScript but that's for another blog post :)

A prototype of Svelte Flow. There are 6 nodes in the viewport with a minimap, controls to zoom in and out, and nodes and edges with various colors

Svelte Flow prototype after a few weeks of work

Why not just stick to React?

We’re financially stable from funded organizations paying for React Flow Pro, and that is dependent on the current ubiquity of React as the industry standard. Frameworks do die (opens in a new tab), and being able to port our library to other languages means that we’re more flexible as a company, rather than relying on the success of React (and by proxy, Meta).

So how is it going?

The launch went really well. We got featured in lots of newsletters and front-pages. We changed our github repo name (from react-flow to xyflow (opens in a new tab)) with the launch and folks seemed excited about the rebrand, without a single pitchfork in sight. And there are already projects (opens in a new tab) out in the wild using Svelte Flow. Cool beans.

Also along the way, we refactored the core of the library, abstracting a bunch of it to vanillaJS, fixing bugs that we found along the way, benefitting both libraries. We’re really happy about that too.

All in all, we’re excited to bring Svelte Flow to its beta release and to see what else people build with it. We’ll see you around!

Get Pro examples, prioritized bug reports, 1:1 support from the maintainers, and more with React Flow Pro