Examples

Every demo on these pages is a real Nodus instance running in your browser — not a video or a screenshot. Pan, zoom, drag nodes, click, and use the controls. Each one is a self-contained page; use Open in new tab to see it full-screen or to view its source.

Try it now

A full diagram editor — draw shapes, connect them, add notes, sketch freehand, and (open it in two tabs) edit together in real time.

Diagram editor — draw, connect & collaborate live Open in new tab ↗

A polished graph combining shapes, icons, labels, layout and interaction.

Showcase — a styled network Open in new tab ↗

Every node shape Open in new tab ↗

Switch between all seven layouts Open in new tab ↗

Hover to highlight, click to select Open in new tab ↗

Browse by feature

Gallery	What it covers
Nodes	Shapes, size & colour, pie fills, strokes, outline, halo, labels, pulse
Edges	Arrowheads & extremities, dashes, curvature, width/colour, halo, labels, self-loops
Layouts	Force, force-link, hierarchical, radial, concentric, grid, sequential
Interaction	Hover, select, lasso, rectangle-select, connect-nodes, drag, tooltips
Styling	Rules, classes, and data-driven styling
Algorithms	Shortest path, components, spanning tree, betweenness, cycles
Data & camera	Generators, live add/remove, building from data, fit & focus
Transformations	Reshape and re-map a graph: filter, group, collapse, transform
Animations	Animated attribute transitions, easing and timed effects
Advanced & integrations	Layers & overlays, export, performance, and integration patterns
Hypergraphs	Simplify, lay out and render hypergraphs; primal/dual views

How the demos work

Each demo loads the published engine as a plain ES module and builds a small graph:

import { Nodus } from '@kortexya/nodus';

const nodus = new Nodus({ container: document.getElementById('graph') });
await nodus.setGraph({ nodes: [/* ... */], edges: [/* ... */] });
await nodus.layouts.force({ duration: 0 });
await nodus.view.locateGraph();

That’s the same code you’d write in your own app — see the Quick Start to set it up.

Running the examples locally

The demos in this gallery live under docs/public/examples/ and run against the built engine, which the docs site copies into place automatically. To work on them:

# 1. Build the engine once (repo root) so the bundle exists:
npm run build

# 2. Start the docs site (it syncs the engine and serves the demos):
cd docs
npm install
npm run dev

Then open any demo, for example http://localhost:4321/examples/nodes/shapes.html.

A headless check that every demo still loads and renders is wired up too:

cd docs
npm run test:examples

Feature coverage at a glance

Nodus ships a broad example set used in development, spanning these areas:

Area	Area	Area
Layouts	Transformations	Interaction
Node styles	Edge styles	Text styles
Layers & overlays	Graph operations	Graph generators
Analysis / algorithms	Data import	Data & image export
Animations	Performance (100k–1M nodes)	UI (themes, legend, minimap)
Geo / map mode	Timeline	Hypergraphs

The galleries above provide hands-on, interactive demos across this surface — including Transformations, Animations, and Advanced & integrations (layers, export and performance); the API Reference documents the full set of methods.