Introducing Svelvet 8 — New Features for a User Friendly Svelte Component Library
The svelte component library - Svelvet, known for creating dynamic node-interfaces and diagrams, underwent enhancements to introduce additional features within the application to make it more user friendly. Since its release in early 2022, Svelvet underwent some major changes and updates, taking in the feedback and suggestions from it’s ever growing user base.
The Svelvet 8 update brings a host of new features to the library, offering both extensive customization options, as well as added functionality and improvements to the core features of the library itself. The team also introduced sandboxes to showcase the functionality of the library for a new user, to increase the accessibility and to streamline the on-boarding experience. The team has worked on growing the testing suite to add unit and component testing to the existing features and functionality of the library.
New Features:
Drawer Component:
The Drawer Component is an exciting new feature that allows users the ability to visualize and interact with the UI to create and customize Svelvet components. The styling of these components, such as Nodes, Edges and Anchors, are fully configurable by selecting the props that are available to them to change their visualization and interaction behavior.
All the props that are available to the Svelvet component are available to be passed on to the Drawer component. See Svelvet for the list of available props to be passed on to the Drawer component.
How can I render and use a Drawer? It’s easy peasy…All you need to do is import the Drawer Component and render it with the canvas height and voila!
<script>
import { Drawer } from '$lib';
</script>
<Drawer height={1000}></Drawer>Here’s a small demo of the Drawer functionality Svelvet 8 — Drawer Functionality .
Also, check out our documentation for more use cases and examples!
Knob Component:
Another cool feature that we have added is a Knob Component. It is part of the Svelvet’s data flow system, along with the Slider, Radio Group, and Color Picker components.
The Knob is a flexible and accessible 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. Users also have the option to customize the color, range of output value, range of rotation angles, and many other properties of the Knob component.
Here’s a demo of using three customized Knob components to control the volume, bass and treble of a loaded audio.
Documentation:
Database Visualizer:
Still confused as to what Svelvet actually is? At first glance it’s hard for a new user to understand what a data-flow visualizing tool does. That’s why we went ahead and created a database visualizer as the first of our sandbox examples to begin showcasing the many ways the library can be used.
Already using the Svelvet library? Click here if you want to share how you use the Svelvet library to our sandbox examples!
Additional Updates:
The team has also implemented unit-testing using Vitest and Svelvet Testing Library to ensure codebase integrity and to enable future refactoring and scalability without compromising functionality. Additionally, we have revamped our documentation to ensure clarity and improve the overall user experience.
Installation:
Svelvet 8 is available as an npm package.
To install, run the command below using npm:
npm install svelvetOr yarn:
yarn add svelvetThen checkout our docs as well as the full change log to get started building.
Final Thoughts
We want to thank the Svelte and the Svelvet community for all the support we have received! Please feel free to suggest new features (and notify us about bugs) on Github . If our product was helpful we would appreciate a star on GitHub. Your support is greatly appreciated!
