Svelvet-test NPM

NPM Downloads GitHub Stars GitHub Forks NPM Version

Infinitely Customizable Node-Based User Interfaces with Svelvet!

Svelvet is a lightweight Svelte component library for building interactive node-based user interfaces and diagrams.

⚡ Getting Started | 📚 Documentation | ⌨️ Blog | 💬 Twitter | 💼 LinkedIn

Version Updates

Shout out to our contributors! Here's what's new:

Changelog

Key Features

Easy to use: To get started with Svelvet, all you need is data for nodes and edges. Visit our documentation website for streamlined, user-friendly tutorials and examples on how to get the most out of your Svelvet interfaces!
Interactive: Elegant and smooth interface when selecting a node to drag it across the graph.
Customizable: Fully customizable Edges, Nodes, Backgrounds and components
Reliable: Svelvet is written in TypeScript and tested with Vitest, Playwright and Svelte Testing Library. Svelvet is maintained by motivated engineers seeking to contribute to the larger Svelte developer community and library ecosystem.
Room to Grow: There is so much we can do to improve, add features and make Svelvet the best version of itself - we welcome feedback and contributions! Scroll below for suggestions on what to contribute.

screenshot

Installation

Svelvet is available as both an npm and a yarn package. You can install it by running one of the two commands:

npm install svelvet

yarn add svelvet

Quick Start

Start by importing the Svelvet and Node components into your application:

import { Svelvet, Node, Anchor, Edge } from 'svelvet';

A Svelvet canvas primarily consists of Nodes. You can pass any number of Nodes as children to the Svelvet wrapper. You can use all the standard conditional rendering syntax to populate nodes within the Svelvet component. Basic parameters like color, input and output count, label and more can be specified and feature two-way data binding with passed props. For greater customization, wrap your own custom components in our Node component and pass the whole thing to Svelvet.

Nodes, Edges and Anchors all feature click events, properties and functions to allow developers to fully customize the state of their graphs.

When creating custom Nodes, you can position any number of our Anchor components to enable dynamic connections. You can also wrap Nodes in a Group component to limit their boundaries and move them as one. These groups can be created dynamically by Shift + Click and dragging.

Finally, you can render our Controls, Minimap, Background and Theme Toggle components via props or named slots. In the latter use case, you can pass props to further customize them. The Controls component can wrap your own set of buttons as we expose the zoom/reset/lock actions using a let directive.

Svelvet is focused on dynamic edge connections, but if you'd like to specify edges ahead of time, you can pass an array of connections to any Anchor component. You can also pass a custom Edge component!

For more detailed use cases and examples, please visit svelvet.io.

<Svelvet width={500} height={500} theme="dark" initialZoom={0.6} minimap>
	<Node />
	<Node label="Demo Node" TD />
	<Node id="node-id" inputs={2} />
	<Node bgColor="red" inputs={10} outputs={5} height={200} position={{ x: 100, y: 100 }} />
	<Controls slot="controls" horizontal />
</Svelvet>

Visit our website to learn more!

Testing

Testing is done with Playwright and the Svelte Testing Library. You can find tests in the /tests folder. We plan on dramatically expanding test coverage very soon. In order to run the tests use the command:

For End-to-End testing

npx playwright test

The Svelvet Team

Brian Holmes • LinkedIn • Github
Britta Ager • LinkedIn • Github
Thomas Kady • LinkedIn • Github
Jen Lee • LinkedIn • Github
Ernesto Gonzalez • LinkedIn • Github
Michael Chiang • LinkedIn • Github
Rachel He • LinkedIn • Github
Horacio Vallejo • LinkedIn • Github
Aaron Willett • LinkedIn • Github
Alexander Zambrano • LinkedIn • Github
Andrew Widjaja • LinkedIn • Github
Anu Sharma • LinkedIn • Github
Justin Wouters • LinkedIn • Github
Walter DeVault • LinkedIn • Github
Ali Adams • LinkedIn • Github
Von Garcia • LinkedIn • Github
Damian Lim • LinkedIn • Github
Christopher Mander • LinkedIn • Github
David Jakubiec • LinkedIn • Github
Jeffrey Wentworth • LinkedIn • Github
Johnny Tran • LinkedIn • Github
Samee Vohra • LinkedIn • Github
Abhi Gullapalli • LinkedIn • Github
Ian Hnizdo • LinkedIn • Github
Mauricio Castro • LinkedIn • Github
Ryan Potter • LinkedIn • Github
Emma Ferguson • LinkedIn • Github
Dillon McKenna • LinkedIn • Github
Taylor Alan • LinkedIn • Github
Timmy Lem • LinkedIn • Github
Tony Lim • LinkedIn • Github

How to Contribute

Read src/lib/doc/README.md for suggestions on how to get started!

The following is a list of features and improvements by ourselves and the larger Svelte community for any open source developer to contribute. If you have any additional ideas, feel free to raise the issue or implement them as well!

Premade node menu with drag & drop abilities
Rotating of nodes
Add documentation/video tutorial on how to set up a Svelvet demo
Custom error handling
Increase test coverage for scalability
GET CREATIVE!! Svelvet is an amazing project that has so much room to grow.

Credits

Inspired by React Flow, Svelvet expands the tools available to Svelte developers and makes Svelte more inviting to both new and seasoned software engineers.