Skip to content

Copy-paste examples.

Production-quality recipes for the patterns you actually ship. Each example is a complete, runnable snippet you can drop into your project.

React TypeScript

React Network Graph

Drop-in React component that renders an interactive force-directed network graph with hover, click, and pan/zoom. Copy-paste into any React 18+ app.

View example
Layout TypeScript

Force-Directed Layout

Configure attraction, repulsion, gravity, and link distance for a force-directed layout that converges quickly without overlapping nodes.

View example
Layout TypeScript

Dagre Flowchart

Build a top-down flowchart with the Dagre layered layout. Configure rank direction, alignment, ranker, and edge separation.

View example
Components TypeScript

Minimap, Search, and Tooltip Together

Combine the minimap, search bar, and tooltip components into a single dashboard surface. Search-to-jump and click-to-pan included.

View example
Customization TypeScript

Custom Node Rendering with Avatars and Badges

Render rich nodes with avatar images, multi-line labels, status badges, and hover details using the canvas renderer hook.

View example
Performance TypeScript

Off-Main-Thread Layout with a Web Worker

Move force or dagre layout computation into a Web Worker so the main thread stays responsive on graphs with thousands of nodes.

View example

Need a recipe we don't have yet? Tell us what to build next.