0.1.31 • Published 5 months ago

@xyflow/svelte v0.1.31

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

readme-header readme-header-dark

GitHub License MIT npm downloads

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

☣️ Svelte Flow is still alpha and currently under heavy development. The API is relatively stable but some things might change. ☣️

🚀 Getting Started | 📖 Documentation | 📺 Examples | ☎️ Discord

Key Features

  • Easy to use: Seamless zooming and panning, single- and multi selection of graph elements and keyboard shortcuts are supported out of the box
  • Customizable: Different node and edge types and support for custom nodes with multiple handles and custom edges
  • Fast rendering: Only nodes that have changed are re-rendered
  • Hooks and Utils: Hooks for handling nodes, edges and the viewport and graph helper functions
  • Plugin Components: Background, MiniMap and Controls
  • Reliable: Written in Typescript and tested with Playwright

Installation

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

npm install @xyflow/svelte

Getting started

You only need a few lines to get a fully interactive (e.g. select and drag nodes or pan and zoom) flow. If you want to learn more, please refer to the learn section, the examples or the API reference.

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

  // you need to import the styles for Svelte Flow to work
  // if you just want to load the basic styleds, you can import '@xyflow/svelte/dist/base.css'
  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. This also makes it easier to update nodes in user land.
  const nodes = writable([
    {
      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 }
    }
  ]);

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

<SvelteFlow {nodes} {edges} fitView on:nodeclick={(event) => console.log('on node click', event)}>
  <Controls />
  <Background variant={BackgroundVariant.Dots} />
  <MiniMap />
</SvelteFlow>

How to Contribute

Show us what you make: Drop it in into our Discord Server, tweet at us, or email us at info@xyflow.com

Community Participation: Ask and answer questions in our Discord Server 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

And of course, we love Github stars ⭐

Development

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

  1. pnpm install - install 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

Maintainers

Svelte Flow is maintained by the team behind xyflow. If you need help or want to talk to us about a collaboration, reach out through our contact form or by joining our Discord Server.

License

Svelte Flow is MIT licensed.

0.1.31

5 months ago

1.0.0-next.4

5 months ago

1.0.0-next.2

6 months ago

1.0.0-next.3

5 months ago

0.1.30

5 months ago

1.0.0-next.0

6 months ago

1.0.0-next.1

6 months ago

0.1.29

6 months ago

0.1.27

6 months ago

0.1.28

6 months ago

0.1.26

7 months ago

0.1.25

7 months ago

0.1.24

8 months ago

0.1.22

8 months ago

0.1.23

8 months ago

0.1.20

10 months ago

0.1.21

9 months ago

0.1.17

11 months ago

0.1.18

10 months ago

0.1.19

10 months ago

0.1.16

11 months ago

0.1.15

11 months ago

0.1.14

12 months ago

0.1.10

1 year ago

0.1.11

1 year ago

0.1.12

12 months ago

0.1.13

12 months ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.9

1 year ago

0.1.6

1 year ago

0.1.4

1 year ago

0.1.5

1 year ago

0.1.0

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.3

1 year ago

0.0.41

1 year ago

0.0.40

1 year ago

0.0.39

1 year ago

0.0.38

1 year ago

0.0.37

1 year ago

0.0.36

1 year ago

0.0.35

1 year ago

0.0.34

1 year ago

0.0.33

1 year ago

0.0.32

2 years ago

0.0.30

2 years ago

0.0.31

2 years ago

0.0.29

2 years ago

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.23

2 years ago

0.0.24

2 years ago

0.0.25

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.10

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.26

2 years ago

0.0.9

2 years ago

0.0.27

2 years ago

0.0.8

2 years ago

0.0.28

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago