Svelte Flow – a library for rendering interactive node-based UIs

At this time we’re excited to launch Svelte Movement! 🎉⚡️ Svelte Movement is a library for creating workflow builders, database visualizers, knowledge processing instruments, and anything you’ll be able to think about with nodes on a display.

open example in Stackblitz

Strive it out with npm set up @xyflow/svelte, or try the Github repo. Svelte Movement is MIT Licensed and was constructed from the ground-up by the workforce who created and maintains React Flow.

🕹 Interactivity out-of-the-box: dragging nodes, zooming, panning, choosing a number of nodes, and including/eradicating edges are all built-in.

💅🏻 Simply customizable: Svelte Movement nodes are simply customizable parts, made to be tweaked and modified to your coronary heart’s content material. Svelte Movement is targeted on the UI and canvas of your utility, you deliver the info and layouting libraries.

🔌 Constructed-in Parts: Background, Minimap, Controls, and Panel parts are ready-to-use on set up.

Docs & Examples

We simply launched svelteflow.dev the place you could find docs, guides, reference, and a bunch of copy-pasteable code examples, and we’ll hold including new sources and enhance those which can be already there as we proceed to keep up the library.

Get working with only a few strains of code

After putting in @xyflow/svelte, copy-paste this into your venture to get to Hiya World.

<script lang="ts">
  import { writable } from 'svelte/retailer';
  import {
    SvelteFlow,
    Controls,
    Background,
    MiniMap,
  } from '@xyflow/svelte';

  import '@xyflow/svelte/dist/model.css'

  const nodes = writable([
    {
      id: '1',
      data: { label: 'Hello' },
      position: { x: 0, y: 0 }
    },
    {
      id: '2',
      data: { label: 'World' },
      position: { x: 100, y: 100 }
    }
  ]);

  const edges = writable([
    {
      id: '1-2',
      source: '1',
      target: '2',
    }
  ]);
</script>

<SvelteFlow {nodes} {edges} fitView>
  <Controls />
  <Background />
  <MiniMap />
</SvelteFlow>

The consequence ought to appear to be this:

And past…

Svelte Movement is unopinionated on the way you the content material of nodes, edges, and handles, so you are able to do no matter you want with them.

Be part of within the dialog

We even have an lively Discord server the place we’re speaking about Svelte Movement, new options, and reporting bugs. Join the Discord

Sam Lavigne has already constructed a software utilizing Svelte Movement to assist folks discover ffmpeg filters within the browser! Try it out here

Who constructed Svelte Movement?

We’re the xyflow team*, the creators of React Movement and Svelte Movement. We have been sustaining the React Movement library and its ecosystem since 2019. Earlier this 12 months we had been impressed by the Svelte neighborhood, and created a prototype of what our software may appear to be if it was inbuilt Svelte. This result in us abstracting the core of React Movement to vanilla js and porting the library to Svelte, enhancing the efficiency of each libraries alongside the best way.

Now that Svelte Movement is launched, we’re excited to see how the Svelte neighborhood makes use of the library, and are able to hold enhancing it and squash any bugs you discover alongside the best way.

See you round and thanks for testing Svelte Movement ✌🏻

Christopher, Hayleigh, John, Moritz, and Peter

*till now, we referred to ourselves because the “React Movement workforce”. Now that we’re not simply constructing React Movement, we’re now calling ourselves the “xyflow workforce”. Hello!