Skip to content

Getting Started

Install TopoKit and render your first graph in under five minutes.

Installation

bash 
# npm
npm install @topokit/core @topokit/layouts @topokit/renderer-canvas

# yarn
yarn add @topokit/core @topokit/layouts @topokit/renderer-canvas

# pnpm
pnpm add @topokit/core @topokit/layouts @topokit/renderer-canvas

For React projects, also install:

bash 
npm install @topokit/react

IIFE Bundle (No Bundler)

HTML 
<script src="https://cdn.topokit.io/topokit.js"></script>

Quick Start

TypeScript 
import { create } from '@topokit/renderer-canvas';

const app = create(document.getElementById('graph'), {
  nodes: [
    { id: 'alice',   data: { name: 'Alice' },   style: { fill: '#3B82F6', label: 'Alice' } },
    { id: 'bob',     data: { name: 'Bob' },     style: { fill: '#8B5CF6', label: 'Bob' } },
    { id: 'charlie', data: { name: 'Charlie' }, style: { fill: '#10B981', label: 'Charlie' } },
  ],
  edges: [
    { id: 'e1', source: 'alice',   target: 'bob',     data: {} },
    { id: 'e2', source: 'bob',     target: 'charlie', data: {} },
    { id: 'e3', source: 'charlie', target: 'alice',   data: {} },
  ],
  layout: 'force',
  theme: 'dark',
});

TopoKit renders the nodes, connects them, runs force layout, and enables pan/zoom/drag automatically.

Configuration Options

OptionTypeDefaultDescription
nodesNode[][]Initial node array
edgesEdge[][]Initial edge array
layoutstring'force'Layout algorithm name
themestring'dark'Built-in theme name
directedbooleantrueShow edge direction arrows
interactivebooleantrueEnable pan, zoom, drag
layoutRunnerfunctionundefinedCustom layout runner (e.g., Web Worker)
autoResizebooleantrueResize canvas on container resize

React Quick Start

App.tsx 
import { GraphCanvas, useGraph } from '@topokit/react';

function App() {
  const { graph, renderer } = useGraph({
    nodes: [
      { id: 'a', data: { name: 'Alice' }, style: { label: 'Alice' } },
      { id: 'b', data: { name: 'Bob' },   style: { label: 'Bob' } },
    ],
    edges: [
      { id: 'e1', source: 'a', target: 'b', data: {} },
    ],
    layout: 'force',
    theme: 'dark',
  });

  return (
    <GraphCanvas
      graph={graph}
      renderer={renderer}
      style={{ width: '100%', height: '600px' }}
    />
  );
}

export default App;

useGraph returns a reactive graph instance and renderer ref. GraphCanvas handles canvas lifecycle and cleanup.

Next Steps