Echo JS 0.11.0

Svelvet 11 takes the dynamic Svelte component library to new heights with an exciting set of updates that prioritize flexibility, user experience, and performance. Building on the feedback from our growing user base, we’ve fine-tuned existing features and introduced several new tools that make Svelvet even more intuitive and powerful.

What’s New in Svelvet 11?
This release brings fresh features that empower users to create and interact with visual components in ways never before possible.

Snap-Grid Functionality:
Introducing the Snap-Grid functionality, a game-changer for node placement. Users can now freely drag nodes anywhere on the canvas or quickly snap them into position using a simple keyboard click. This feature offers the best of both worlds — complete freedom to position nodes or precise control for a cleaner, more organized layout.

Persistent Canvas State:
The Save & Reload feature stores your entire canvas state as a JSON object, ensuring all nodes and properties are preserved. First introduced in Svelvet 10 and enhanced in Svelvet 11, it now enables full reconstruction of the canvas. The Save button captures every node with its complete properties, while Reload accurately restores them, maintaining layout integrity. This ensures a seamless workflow, allowing users to pick up right where they left off.

Add Node Feature:
The Add Node button in the Svelvet Graph Editor allows users to dynamically expand their graphs by adding new nodes with a single click. Each new node increments the total node count and is placed at a randomized position on the canvas, maintaining full draggable functionality for easy repositioning.

Redesigned Padlock Functionality:
In Svelvet 11, we’ve refined the Padlock feature to make node locking more intuitive. Previously, locked nodes could still be moved, which didn’t fully align with user expectations. Now, locking a node keeps it stationary, while unlocking allows free movement. This improvement ensures a more logical and organized workflow when managing nodes.

Core Improvements:
Improved Documentation: The documentation has been revamped for better clarity, focusing on new features, advanced use cases, and best practices.

Snap-Grid Feature: Introduced a Snap-Grid feature, allowing users to toggle between free movement and grid snapping for precise node placement.

New Add Node Button: Added an “Add Node” button in the Svelvet Graph Editor, allowing users to dynamically add new nodes with randomized positions and full draggable functionality.

Graph State & Event Handling Fixes: Addressed issues with graph initialization, drawer prop behavior, and event dispatching to ensure smoother operations.

Visit our updated documentation to explore all the new features and start building with Svelvet 11 today.

Final Thoughts:
Svelvet 11 introduces exciting new capabilities while improving ease of use and accessibility. We can’t wait to see what you build with these new features. Your feedback is essential in helping us shape the future of Svelvet, so please don’t hesitate to share your thoughts or report issues on our GitHub repository.

Happy coding, and thank you for being part of the Svelvet community!