A lightweight Svelte component library for building dynamic, node-based user interfaces
npm install svelvet!MIT License
!NPM Downloads
!GitHub Stars
!GitHub Forks
!NPM Version
Svelvet is a lightweight Svelte component library for building interactive node-based user interfaces and diagrams.
⚡ Website | 📚 Documentation | ⌨️ Blog | 💬 Twitter | 💼 LinkedIn
Shout out to our contributors! We appreciate your continous efforts. Here's what's new:
💥V11.0.0💥
- Features:
-Snap-grid functionality- our new introduced feature allows users to toggle between free movement and snap-to-grid modes for precise node placement on the canvas. This functionality enhances flexibility by enabling easy drag-and-drop node positioning as well as alignment through keyboard controls.
-Padlock functionality-The padlock functionality was updated to ensure that locked nodes cannot be moved, providing a more intuitive and predictable behavior. The lock and unlock status is visually represented with a padlock icon, and users can easily toggle between locked and unlocked states to manage node positions.
-A new "Add Node" button was introduced within the Svelvet Graph Editor, allowing users to dynamically add new nodes to the graph. Clicking the button increments the total node count and places new nodes at randomized positions, with draggable functionality.
-Save-button-The saveStore and reloadStore were updated to improve canvas state capture, now saving complete node information (including positions and properties) for more accurate reconstruction. However, reloadStore still needs work to properly render nodes and rebuild the graph after a reload, requiring focus on better graph store integration in future development.
- Refactoring:
- We have recreated the Svelvet canvas by removing the default nodes.
- We added an "Add Node" button that allows for the creation of nodes with default anchors.
- Edges can now be created and connected to nodes.
- Accesibility Enhancement by Svelvet 10 are mantained with the exception of 1; "Press Option + Tab || Ctrl + Tab for Node selection".
- In the main Svelvet canvas various issues were addressed, including ensuring graph initialization with local storage, tracking the drawer prop, improving edge management, and handling zoom/translation behavior more consistently. Specific fixes were made to event dispatching, edge removal, and ensuring reactivity for properties like zoom and drawer.
- Documentation:
- We created an individual ReadMe file detailing our journey with Svelvet, our approach to this new technology, our trials, errors and our effortless attempts and contributions to Svelvet.
- Improved directions on how to navigate updating Documentation using Mintlify in original README.
🛸 v10.0.0 🛸
- Features:
- Accessibility Enhancement: Now users can navigate the canvas using the keyboard.
- Press 'l' to turn on light/dark mode.
- Press 'd' to show drawer component, and 'D' to open/close drawer component.
- Press Option + Tab || Ctrl + Tab for Node selection.
- Press 'm' to toggle the minimap component.
- Press 'c' to toggle control component.
- Press 'e' to bring up editor component.
- Persistent Canvas State: Added the ability to save the state persistently to local storage.
- High Contrast Mode: Introduced a new high contrast accessibility component tailored for the visually impaired.
- Refactoring:
- Improved Keyboard Accessibility: Enhanced the keyboard accessibility of the drawer component through refactoring.
- Documentation:
- Updated Guidance: Documentation now includes instructions on utilizing keyboard accessibility features.
- Miscellaneous:
- Test Enhancements: Added comprehensive testing for drawer components.
- Maintenance: Updated Playwright tests and configuration for improved stability.
🚀 v9.0.0 🚀
v8.0.0
v7.0.0
v6.0.0
v5.0.0
v4.0.0
v3.0.0
v2.0.2
v1.0.3
v1.0.2
- 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 how to contribute.
Svelvet is available as both an npm and a yarn package. You can install it by running one of the two commands:
``bash`
npm install svelvet
`bash`
yarn add svelvet
Start by importing the Svelvet and Node components into your application:
`js`
import { Svelvet, Node, Anchor, Edge, Controls } 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 our website.
`jsx`
Testing is done with Playwright, Vitest, and the Svelte Testing Library. You can find tests in the /tests folder. We dramatically expanded test coverage, but there are still opportunities to improve it. In order to run the tests use the command:
For End-to-End testing
`bash`
npx playwright test
For unit testing
`bash``
npm run test:unit [filename]
- Christopher Yhap • Github
- Carlos Salcedo • LinkedIn • Github
- Salisu Ibrahim • LinkedIn • Github
- Tyler Polite • LinkedIn • Github
- Mason Lee • LinkedIn • Github
- Isaac Bocage • LinkedIn • Github
- Julian Bos • LinkedIn • Github
- Solomon Moon • LinkedIn • Github
- Henry Sweat • LinkedIn • Github
- Jeremy David • LinkedIn • Github
- John Costello • LinkedIn • Github
- Spencer Huey • LinkedIn • Github
- Rathna Chinthalapalli • LinkedIn • Github
- Ruxin Zheng • LinkedIn • Github
- Samuel Alvarez • LinkedIn • Github
- Wesley Waters • LinkedIn • Github
- 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
Please refer to the roadmap for the full list of ideas for iteration.
Some ideas inspired by v10.0.0 include:
- Example Showcase: we've added a new section to the documentation which will contain example sandboxes of features and potential usecases of Svelvet. If you would like to contribute to the showcase with an example of how you’re using Svelvet, reach out to the team with your project via Github discussion.
- Importing/Exporting canvas as JSON: we had planned to look into this as a way to maintain state through a page refresh.
- Additional Data Input Components: we plan on creating additional input/parameter components that integrate with our data flow system and can be used when composing custom Nodes.
- Extensive Test Converage: We expect to have full E2E and unit test coverage relatively soon. Especially the newly added features in contrast themes.
- Accessibility Linter: We aim to ensure our components are accessible and compliant with accessibility standards. Implementation of an accessibility linter would streamline the process of identifying and rectifying accessibility issues within our components.
- Persistent Canvas State saveStore.ts and reloadStore.ts lay the foundation for the save feature. They work together to get the state object of the canvas by turning it into a JSON string for storage and then parsing it into a JSON object for reconstruction. But they need further development as they only save the camera position and theme. Specifically, the traverse function in saveStore.ts needs to properly detect and expand each element inside the canvas (graph) state object. A good place to start on this would be addressing the anchors and edges property of the graph's state object. Use the "nodes" property on this object for reference on how this data should be unraveled and stored. Additionally, the createGraph function is used in reloadStore.ts to render a graph onMount of the Svelvet component according to the state object that was saved last in local storage on the user's browser. This implementation is simplified, however, so it only recreates the graph from partially saved data.
GET CREATIVE!! Svelvet is an amazing project that has so much room to grow.
Inspired by React Flow, Svelvet expands the tools available to Svelte developers and makes Svelte more inviting to both new and seasoned software engineers.
Svelvet is developed under the MIT license.