Svelvet 8.0 officially released!

[RuxinZ]

We are excited to announce that 🚀 Svelvet v8.0 🚀 has been released!

With this update, we are introducing several requested features, enhancing performance, and updating the documentation to provide example usecases of Svelvet.

Drawer Component

An optional drag-and-drop component that can create default and custom Nodes, Anchors, and Edges as props and add them to the canvas via the UI.

Knob Component

An accessible, flexible input component that directly interfaces with Svelvet’s custom input and output stores. It can be controlled via keyboard input, arrow keys, scroll, and click and drag.

An Examples Section in the Documentation

We have added an example of using Svelvet as a Database Visualizer. And plan to expand on this section to include more use cases for Svelvet. Want to showcase an example of how you're using Svelvet on our website? Reach out to the team with your project here!

Composable Edges

Custom Edge components can now be passed as children to Anchor and Node components, allowing developers to set props and labels for Edges based on context. As before, these Edge components do not represent connections, but are rather abstract representations of the type and style of Edge to be rendered. When connections are made via props or during runtime, an instance of this component will be rendered.

Performance Optimizations

When rendering out Nodes that are passed fixed sizes via props and have not been made resizable via the resizable flag or the Resizer component, developers can now render hundreds more Nodes than was previously possible.

Component Instance Binding

The Anchor and Node components now feature exported stores and functions available via component instance binding. As an example, to update or read the position of a Node programmatically, bind to the particular Node component using bind:this={myNodeVariable} and access the position store via myNodeVariable.position. Standard Svelte store syntax applies.

Check out our website (www.svelvet.io) to learn more about Svelvet!

The Svelvet team works hard to add new features to this Svelte library and will continue to do so. If you enjoy our product, give us a star 🌟 on GitHub (we’re so close to 2k!) and follow us on LinkedIn for updates. Your support is greatly appreciated!

Discussions

We’re using Discussions as a place to connect with other members of our community. We hope that you:

Ask questions you’re wondering about.

• 💡 Share ideas.
• 🌱 Engage with other community members.
• 🤝 Welcome others and are open-minded. Remember that this is a community webuild together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community!