xyflow/packages/svelte

SvelteFlow

A highly customizable Svelte component for building interactive graphs and node-based editors. This package is currently under heavy development and the API is very likely to change.

Getting started

If you want to check out the current version you need to run the following command from the root directory:

1. pnpm install - installs dependencies
2. pnpm build - needs to be done once
3. pnpm dev - starts dev server

You can now access the examples under http://127.0.0.1:5173

A basic flow

A basic flow looks like this:

<script lang="ts">
  import SvelteFlow, {
    SvelteFlowProvider,
    Controls,
    Background,
    BackgroundVariant,
    Minimap,
    Panel,
    createNodes,
    createEdges,
    type NodeTypes
  } from '../../lib/index';
  import { CustomNode } from './CustomNode';

  const nodeTypes: NodeTypes = {
    custom: CustomNode
  };
  
  const nodes = createNodes([
    {
      id: '1',
      type: 'input',
      data: { label: 'Input Node' },
      position: { x: 0, y: 0 }
    },
    {
      id: '2',
      type: 'custom',
      data: { label: 'Node' },
      position: { x: 0, y: 150 }
    }
  ], { style: 'width: 125px;' });

  const edges = createEdges([
    {
      id: '1-2',
      type: 'default',
      source: '1',
      target: '2',
      label: 'Edge Text'
    }
  ], { animated: true });
</script>

<SvelteFlowProvider
  {nodes}
  {edges}
>
  <SvelteFlow
    {nodeTypes}
    fitView
    snapGrid={[25, 25]}
    on:node:click={(event) => console.log('on node click', event)}
  >
    <Controls />
    <Background variant={BackgroundVariant.Dots} />
    <Minimap />
  </SvelteFlow>
</SvelteFlowProvider>