Build your first useful graph

Start from the maintained project or add OGJS to an existing Vite application. TypeScript declarations ship with the package.

npm install @mizansec/ogjs

Use ids that survive filtering, grouping, editing, and reloads. Put business meaning in data; avoid renderer indices in application state.

import { Ogjs } from '@mizansec/ogjs';

const og = new Ogjs({ container: '#graph', theme: 'dark' });
og.setGraph(investigation);

Result: the 36 entities and 45 relationships enter one validated graph.

The sample data names semantic roles such as account, identity, transaction, and alert. One call applies tested node, edge, label, and contrast rules while preserving graph state.

og.present({ theme: 'dark' });

Result: color and emphasis communicate domain roles consistently.

Ask for the outcome. OGJS reads the topology, chooses a suitable shipped layout, animates positions, and frames the result around visible controls.

await og.arrange();

Result: the graph becomes readable without canvas dimensions, coordinate calculations, or camera math.

Events expose stable ids. Your application decides what selecting an entity means; OGJS keeps picking and visual state synchronized.

og.on('nodeclick', ({ nodeId }) => {
  if (nodeId === undefined) return;
  openRecord(og.getNode(nodeId));
});

Try it: select an entity in the retained graph beside this tutorial.

Return the domain key already stored on each node. OGJS places the communities, contains their members, animates the change, and retains framing.

await og.group(
  ({ data }) => (data as { group: string }).group,
  { fit: true },
);

Result: meaningful communities remain visible and selectable without application coordinates.

Export uses the same camera, presentation, and retained layers the user sees. The returned blob can be downloaded or sent to application storage.

const image = await og.export.png({
  scale: 2,
  backgroundColor: '#0b0e12',
});

Result: a print-ready PNG of the current investigation state.

Load credentials and graph-database queries through your backend, handle application errors around awaited calls, and release OGJS when the page or framework component unmounts.

addEventListener('pagehide', () => og.destroy(), { once: true });

The same public lifecycle maps to the React, Vue, Svelte, Angular, and Jupyter bindings.