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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “Next steps”