Basic Vanilla Graph
Mounts the engine with object graph input, the Canvas renderer, circular layout, fit-to-view, and labels.
- graph input
- canvas renderer
- circular layout
- fit to view
- labels
- lifecycle events
Examples
Open a live demo to try a behavior, then inspect its main source file. Some examples import styles and helper modules; the full project currently requires repository access. The getting-started guides explain how to run and modify examples in a source checkout.
Vanilla TypeScript
Use the framework-agnostic engine directly.
Data Roundtrip
Maps domain records into RawGraph, saves a normalized snapshot as JSON, and reloads it into a new engine.
- graph input
- business data builder
- json roundtrip
- canvas renderer
- circular layout
Force Layout
Runs the force layout against a styled relationship graph and fits the resulting graph into view.
- force layout
- fit to view
- styled edges
Grid Layout
Runs the deterministic grid layout and a no-overlap post pass before fitting the graph into view.
- grid layout
- no overlap
- fit to view
Measured Layout Geometry
Runs Dagre with mixed-radius Canvas nodes, then demonstrates user-triggered measured rectangle separation.
- canvas renderer
- hierarchical layout
- measured layout
- measured no overlap
- fit to view
- style attributes
Interaction
Exercises hover, click selection, node dragging, and interaction render state without React.
- hover
- click selection
- node dragging
- interaction state
Custom Styles
Light/dark themes, item overrides and cached data-driven rules with retained selection and load-driven node sizes.
- theme
- style attributes
- labels
- style rules
Composable Filters
Composes node and edge filters over an engine-owned visible view, lays it out in a browser Worker, and reports source provenance from picking.
- composable filters
- derived graph
- worker layout
- source provenance
- canvas renderer
Clustering
Derives a clustered visible graph with synthetic cluster nodes, grouped edges, and source membership metadata.
- clustering
- derived graph
- synthetic nodes
- grouped edges
- fit to view
Expand Collapse
Uses app-owned group visibility state to toggle collapsed synthetic nodes while preserving the source graph.
- expand collapse
- derived graph
- visibility state
- synthetic nodes
- fit to view
Image Export
Exports the current Canvas viewport to a PNG data URL with output dimensions and background metadata.
- image export
- canvas renderer
- viewport export
- fit to view
Node Shapes
Four built-in node shapes with straight, curved, reciprocal and loop edges and exact fill picking.
- canvas renderer
- style attributes
- styled edges
Atomic Batch Mutations
Applies related changes in one commit, demonstrates rollback, and highlights downstream neighbors through runtime collections.
- batch mutations
- runtime collections
- canvas renderer
- graph input
Your First Vanilla Graph
The exact getting-started tutorial: three services, two directed dependencies, and a first color change.
- graph input
- canvas renderer
- circular layout
- fit to view
- labels
Obstacle-aware Routing
Measured obstacle detours, parallel lanes, loops, selective rerouting and alternative label placement.
- canvas renderer
- obstacle routing
- measured layout
- node dragging
- selection
- label placement
Bounded Dependency Exploration
Explore incoming or outgoing dependencies with hop and result limits, exact traversal paths and visible partial-result explanations.
- bounded traversal
- canvas renderer
- directed graph
- style attributes
Canvas and HTML Layers
World/screen layers, scoped HTML input, activation cleanup, remount and bitmap export.
- canvas renderer
- custom layers
- html overlay
- lifecycle events
- image export
CSV Graph Import
Map CSV or TSV columns to nodes and edges, with physical-line diagnostics and atomic validated imports.
- csv import
- canvas renderer
- directed graph
React
Use the thin React adapter over the same engine.
React Basic Graph
Mounts the React wrapper with object graph input, the Canvas renderer, circular layout, fit-to-view, labels, and theme overrides.
- react wrapper
- graph input
- canvas renderer
- circular layout
- fit to view
- labels
React Callbacks And Selection
Shows node click callbacks, controlled selection, canvas clearing, onReady, and GraphRef fit-to-view usage.
- react wrapper
- callbacks
- controlled selection
- graph ref
- fit to view
Dependency Explorer
Find components, filter a commerce system, inspect dependencies and switch layouts in one interactive workspace.
- react wrapper
- force layout
- circular layout
- grid layout
- selection
- node dragging
- fit to view
- hover
- hierarchical layout
- dag layout
- directed graph
Your First React Graph
The exact getting-started tutorial: three services, two directed dependencies, and a first color change.
- graph input
- canvas renderer
- circular layout
- fit to view
- labels
Performance
Exercise realistic graph sizes and runtime behavior.
Performance Medium Graph
Renders a deterministic medium graph with force layout, fit-to-view, hover, and click selection as a smoke check for obvious regressions.
- performance smoke
- force layout
- canvas renderer
- fit to view
- hover
- selection