Skip to content
Nodus

Quick Start

This guide takes you from an empty page to an interactive, styled graph in a few steps. It assumes you’ve installed @kortexya/nodus.

1. Add a container

Nodus renders into a DOM element that has a size. Give it one in your HTML and CSS:

<div id="graph"></div>


<style>
  html, body { margin: 0; height: 100%; }
  #graph { width: 100vw; height: 100vh; }
</style>

2. Create the instance

Pass the container element (or its id) to the constructor. The WebAssembly core is already initialized by the time the import resolves, so this is synchronous.

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


const nodus = new Nodus({ container: document.getElementById('graph') });

3. Load a graph

A graph is plain JSON: a list of nodes and a list of edges. Nodes need an id; edges reference nodes by source and target. Anything under attributes controls appearance; anything under data is your own payload.

await nodus.setGraph({
  nodes: [
    { id: 'a', data: { label: 'Alice' } },
    { id: 'b', data: { label: 'Bob' } },
    { id: 'c', data: { label: 'Carol' } },
  ],
  edges: [
    { source: 'a', target: 'b' },
    { source: 'b', target: 'c' },
    { source: 'c', target: 'a' },
  ],
});

4. Run a layout

A fresh graph has no positions yet. Apply a layout to arrange the nodes. Layouts are async; duration: 0 runs the layout to its final positions instantly (use a positive duration in milliseconds to animate).

await nodus.layouts.force({ duration: 0 });

5. Frame the graph

view.locateGraph() zooms and pans the camera so the whole graph fits in the viewport.

await nodus.view.locateGraph();

6. Style it

Use style rules and classes instead of mutating elements one by one. A rule applies to every node or edge that matches; the attributes you set are visual attributes like color, radius, shape and text.

// Every node: a teal circle with a label drawn from its data.
nodus.styles.addNodeRule({
  color: '#0f766e',
  radius: 16,
  text: { content: (node) => node.getData().label, position: 'bottom' },
});


// Every edge: a thin grey line with an arrowhead at the target.
nodus.styles.addEdgeRule({
  color: '#94a3b8',
  width: 2,
  shape: { head: 'arrow' },
});

7. React to interaction

Register pointer handlers through the tooltip tool, and graph-lifecycle handlers through events.

nodus.tools.tooltip.onNodeClick((node) => {
  console.log('Clicked', node.getData().label);
});


nodus.events.on('addNodes', () => {
  console.log('Graph now has', nodus.getNodes().size, 'nodes');
});

Putting it together

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


const nodus = new Nodus({ container: document.getElementById('graph') });


await nodus.setGraph({
  nodes: [
    { id: 'a', data: { label: 'Alice' } },
    { id: 'b', data: { label: 'Bob' } },
    { id: 'c', data: { label: 'Carol' } },
  ],
  edges: [
    { source: 'a', target: 'b' },
    { source: 'b', target: 'c' },
    { source: 'c', target: 'a' },
  ],
});


nodus.styles.addNodeRule({
  color: '#0f766e',
  radius: 16,
  text: { content: (node) => node.getData().label, position: 'bottom' },
});
nodus.styles.addEdgeRule({ color: '#94a3b8', width: 2, shape: { head: 'arrow' } });


await nodus.layouts.force({ duration: 600 });
await nodus.view.locateGraph();


nodus.tools.tooltip.onNodeClick((node) => console.log('Clicked', node.getData().label));

Try it live — this is the finished graph; hover the nodes and click to select:

The finished graph — hover & click Open in new tab ↗

Next steps