npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@windmill-labs/svelvet

v4.0.20

Published

A lightweight Svelte component library for building interactive node-based flow diagrams

Downloads

9

Readme

banner

MIT License NPM Downloads GitHub Stars GitHub Forks NPM Version

Simplify Diagramming with Svelvet!

Svelvet is a lightweight Svelte component library for building interactive node-based 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 flowchart!
  • Interactive: Elegant and smooth interface when selecting a node to drag it across the graph.
  • Customizable: Ability to customize your nodes and edges (node size, color, border and edge type, label, anchor). More coming soon!
  • Fast rendering: Re-rendering is based on changes to initial values for nodes, edges and optional background and movement (collaborator credit to dvisockas).
  • Reliable: Svelvet is written in TypeScript and tested with Vitest, Cypress 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 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

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

The Svelvet Team

Forking the Repository

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:

  • Create an account on Supabase
  • Create a new project in Supabase (you can name this whatever you want)
  • Rename the 'supabase_env' file to '.env' and paste in the API keys from your newly created supabase project into the .env file

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).

How to Contribute

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!

  • Customize d3 background options
  • Customize nodes via html templates/Svelte components
  • Multiple sockets and socket compatibility for links
  • Custom error handling
  • Increase test coverage for scalability
  • More styling and customization of nodes and edges for complex Svelvet flow diagrams
  • Community Forum

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. Under the hood, Svelvet depends on the d3-zoom library to zoom and pan across the graph.

License

Svelvet is developed under the MIT license.