Svelvet
Purpose: Svelvet is a lightweight Svelte component library designed for building interactive node-based user interfaces and diagrams. It enables developers to create customizable, dynamic, and visually appealing node graphs with ease.
Key Features:
- Easy to use: Requires only node and edge data to get started, with comprehensive documentation .
- Interactive: Smooth drag-and-drop functionality for nodes.
- Customizable: Fully customizable edges, nodes, backgrounds, and components.
- Reliable: Built with TypeScript and tested using Vitest, Playwright, and Svelte Testing Library.
- Accessibility: Includes keyboard navigation, high-contrast mode, and persistent canvas state (saved to local storage).
Target Audience: Svelte developers looking to create node-based diagrams, flowcharts, or interactive data visualizations.
Notable Components:
- Nodes: Customizable with anchors for dynamic connections.
- Edges: Supports various styles (e.g., step, smoothstep, arrow) and dynamic attachment.
- Controls: Zoom, reset, lock, and theme toggle functionality.
- Minimap: Visual overview of large diagrams.
- Drawer: Drag-and-drop component for adding nodes/edges via UI.
Recent Updates (V11.0.0):
- Snap-to-grid and padlock functionality for precise node placement.
- Dynamic node addition via an "Add Node" button.
- Improved state management for saving/reloading canvas configurations.
Framework Support: Primarily for Svelte, with no explicit mention of other frameworks.
Community & Contribution: Actively maintained by a team of developers, with a roadmap for future features. Encourages contributions, especially for accessibility, testing, and new components.
Inspiration: Inspired by React Flow , tailored for the Svelte ecosystem.
License: MIT.
