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 node graphs with ease.
Key Features:
- Easy to use: Requires only node and edge data to get started, with comprehensive documentation available.
- Interactive: Smooth drag-and-drop functionality for nodes.
- Customizable: Fully customizable edges, nodes, backgrounds, and other components.
- Reliable: Built with TypeScript and tested using Vitest, Playwright, and Svelte Testing Library.
- Accessibility: Includes features like keyboard navigation, high-contrast mode, and persistent canvas state.
Target Audience: Svelte developers looking for tools to create node-based diagrams or interactive interfaces, particularly those needing flexibility and customization.
Svelte Support: Primarily built for Svelte, with no explicit mention of other framework support.
Recent Updates (v11.0.0):
- Snap-grid functionality: Toggle between free movement and snap-to-grid modes.
- Padlock functionality: Lock nodes in place with visual indicators.
- Dynamic node addition: "Add Node" button for creating nodes with default anchors.
- Save/reload improvements: Enhanced canvas state capture (though reload functionality still needs refinement).
Documentation & Resources:
Community & Contribution: Encourages community involvement with a roadmap for future features like JSON import/export, additional input components, and improved test coverage. Contributions can be discussed via GitHub discussions .
License: MIT licensed.
