@windmill-labs/svelvet
Advanced tools
A lightweight Svelte component library for building interactive node-based flow diagrams
Svelvet is a lightweight Svelte component library for building interactive node-based diagrams.
⚡ Getting Started | 📚 Documentation | ⌨️ Blog | 💬 Twitter | 💼 LinkedIn
Shout out to our contributors! Here's what's new:
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
Start by importing Svelvet into your application:
import Svelvet from 'svelvet';
A Svelvet component consists of nodes and edges (or just nodes). You can pass nodes and edges as props to the Svelvet component. By default, Svelvet components allow for the ability to move nodes and edges as well as pan and zoom. However, if you would like to render a fixed diagram, simply pass in the movement attribute and set it's value to false! You can add a dot-grid background like the example below. With the information that you provide for your nodes and edges, Svelvet will do all of the work behind-the-scenes to render your flowchart!
<Svelvet nodes={nodes} edges={edges} movement background />
Visit our website to learn more on how to customize your nodes and edges to your liking!
Testing is done with Vitest and the Svelte Testing Library. You can find tests in the /tests folder. In order to run the tests use the command:
For Unit testing
npm run test:unit
For End-to-End testing
npm run cypress:open
If you'd like to fork the repository and run it locally, you'll need to perform a couple of steps to in order to get everything working properly:
Once that is done you should be able to render the website locally on localhost:3000, although you will be missing some minor functionality tied to the production database (e.g. OAuth login).
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!
Inspired by React Flow, Svelvet expands the tools available to Svelte developers and makes Svelte more inviting to both new and seasoned software engineers. Under the hood, Svelvet depends on the d3-zoom library to zoom and pan across the graph.
Svelvet is developed under the MIT license.
FAQs
A lightweight Svelte component library for building interactive node-based flow diagrams
We found that @windmill-labs/svelvet demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.