Infinitely Customizable Node-Based User Interfaces with Svelvet!

Svelvet is a lightweight Svelte component library for building interactive node-based user interfaces and diagrams.

⚡ Website | 📚 Documentation | ⌨️ Blog | 💬 Twitter | 💼 LinkedIn

Version Updates

Shout out to our contributors! We appreciate your continous efforts. Here's what's new:

Changelog

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

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