SVGnet
A powerful TypeScript library for creating interactive, customizable graph visualizations with SVG. Built for performance, flexibility, and beautiful user experiences.
Powerful Features
Everything you need to create stunning graph visualizations
High Performance
Optimized SVG rendering with efficient physics simulation and smooth animations. Handles thousands of nodes with ease.
Modular Architecture
Clean, extensible codebase with dependency injection. Easy to customize and extend for your specific needs.
Touch & Mobile Ready
Full touch support with gesture recognition. Works seamlessly on desktop, tablet, and mobile devices.
Highly Customizable
Comprehensive theming system with CSS-in-JS styling. Create beautiful, branded visualizations.
TypeScript First
Built with TypeScript for excellent developer experience. Full type safety and IntelliSense support.
Physics Simulation
Advanced force-directed layout with customizable physics parameters for natural, organic layouts.
Layout Persistence
Save and restore graph layouts with exportState/importState. Users never lose their manually arranged views.
Custom Shapes
Register diamond, hexagon, or any SVG shape. Extensible factory pattern with a simple registration API.
Directed Edges
Per-edge control of arrowhead rendering. Mix directed and undirected edges in the same graph.
Pluggable Layouts
Swap force-directed physics for tree, radial, or grid layouts via the LayoutStrategy interface.
Interactive Examples
Explore what's possible with SVGnet
Module Dependencies
Interactive visualization of the library's own module dependencies. Shows 35 TypeScript modules and their relationships with filtering and search.
npm Dependency Explorer
Visualize npm package dependencies with path tracing, vulnerability overlays, and interactive filtering. A real-world showcase of directed graphs.
Basic Network
Simple network graph with drag-and-drop interaction, zoom controls, and physics simulation. Perfect starting point for new projects.
Advanced Features
Showcases advanced features including custom node shapes, dynamic styling, selection handling, and complex interactions.