TopoKit is a TypeScript-native graph visualization SDK with zero runtime dependencies. It renders interactive network graphs, organizational charts, dependency trees, and topology maps using a hardware-accelerated HTML5 canvas with seven built-in layout algorithms and first-class React 18+ bindings.

How is TopoKit licensed?

TopoKit is source-available under the Business Source License 1.1 (BSL 1.1). Non-production use, prototyping, and educational use are free. Production and commercial use require a Pro ($1,499/year per developer) or Enterprise ($1,999/year per developer) license. Each version automatically converts to the Apache License 2.0 four years after release.

Which frameworks does TopoKit support?

The TopoKit core SDK is framework-agnostic and works in vanilla JavaScript, Vue, Svelte, and Angular. The @topokit/react package provides first-class React 18+ bindings (GraphCanvas component, useGraph hook) compatible with Next.js, Remix, and React Router. Server-side rendering is supported.

How many nodes can TopoKit render?

TopoKit renders 20,000+ nodes at 60fps on commodity hardware using level-of-detail (LOD) culling, spatial indexing, and an off-main-thread layout web worker. A live stress test demo is available at /showcases/stress-test.

Does the TopoKit SDK send any telemetry?

No. The TopoKit SDK does not contain telemetry, analytics, error reporting, or remote license verification at runtime. Whatever graph data you visualize stays in your environment. This makes TopoKit safe for on-premise deployment in fraud, AML, intelligence, and compliance contexts.

Now in public beta

Graph Visualization
for the Modern Web

TopoKit is a TypeScript-native graph visualization SDK with zero dependencies, built for the modern web. Render interactive network graphs, org charts, dependency trees, and topology maps in minutes.

Get Started Try it now New View Showcases

7

Layout Algorithms

50+

API Methods

< 80KB

Gzipped

0

Dependencies

New topokit.io/play

TopoKit Play

Paste JSON, get a topokit.io/t/<hash> URL. Share it in chat and it unfurls with a rich preview. Iframe it into your site with your license attached. No install, no sign-up, no SDK setup.

Paste & render

Drop TopoKit JSON into the editor and see it render live as you type. Pick a layout, theme, and UI components from the toolbar. Five starter samples one click away.

Share & embed

Click Generate share link for a short topokit.io/t/<hash> URL. Drop it in Slack, X, or Discord and it unfurls with a real preview image. Iframe /t/<hash>?embed into your site with your license attached — see the embed guide.

AI agent-ready

Tell your LLM: "here's my data, render it via topokit.io". Your agent POSTs JSON to /api/topos and hands you back a share URL in one shot.

Built for the LLM age

Every modern team has an agent now. Give it your raw data and a one-line prompt; it returns a short URL you can drop in any chat, ticket, or doc. TopoKit is the graph visualization layer for the way your team actually works in 2026.

Open the playground See an example

Free to use. No account required. Share links work forever.

prompt.txt

Here's my data: [paste anything — CSV, JSON, log dump].

Convert it to TopoKit graph JSON, POST it
to https://topokit.io/api/topos,
and give me the topokit.io/t/<hash> URL.

New iframe embed

Embed it anywhere

Every shared topo is an iframe-ready URL. Drop one snippet into your docs, your product UI, your customer dashboard — the graph renders in place with full pan, zoom, and search.

Basic embed · chrome-less view

your-page.html

<iframe
  src="https://topokit.io/t/abc123?embed"
  width="800" height="600"
  style="border: 0;"
  loading="lazy">
</iframe>

?embed strips the surrounding page chrome — no nav, no edit button, just the canvas.

With your license · suppresses watermark on your domain

your-page.html

<iframe
  src="https://topokit.io/t/abc123?embed#license=tk_pro_eyJ2..."
  width="800" height="600"
  style="border: 0;">
</iframe>

License binds to your parent page origin via ancestorOrigins / referrer — a leaked key only works on your domains.

Read the embed guide

Everything You Need

A complete toolkit for building production-grade graph visualizations, from data mapping to interactive exploration.

Multiple Layouts

Force, Hierarchical, Circular, Dagre, Radial, Concentric, and Grid algorithms.

Canvas Rendering

Hardware-accelerated 2D canvas with level-of-detail rendering for smooth performance.

Filtering & Highlighting

Show, hide, or dim nodes and edges dynamically. Spotlight matching subgraphs.

Edge Bundling

Force-directed edge bundling (FDEB) reduces visual clutter in dense graphs.

Clustering

Group nodes by any field. Aggregate edges and collapse clusters interactively.

Progressive Expand

Explore graphs incrementally. Expand neighbors on demand for large datasets.

Web Worker Layout

Off-main-thread computation keeps the UI responsive even with large graphs.

React Components

First-class React 18+ support with hooks, components, and controlled state.

Themes

Seven built-in themes from light to dark. Create custom themes with the API.

Legend & Badges

Auto-generated legends and notification badges for visual context.

Search & Minimap

Full-text search to find nodes and a minimap for overview navigation.

Data Mapping

Map any JSON structure to graph data with a flexible transformation API.

Get Started in 3 Lines

Import, configure, render. TopoKit's API is designed for developer ergonomics without sacrificing power.

Zero configuration needed for basic graphs
Full TypeScript autocompletion and type safety
Swap layout algorithms with a single property
Works in Node.js, browsers, and web workers

app.ts

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

const app = create(document.getElementById('graph'), {'{'}
  nodes: [
    {'{'} id: 'a', data: {'{}'}, style: {'{'} fill: '#3B82F6' {'}'} {'}'},
    {'{'} id: 'b', data: {'{}'}, style: {'{'} fill: '#8B5CF6' {'}'} {'}'},
    {'{'} id: 'c', data: {'{}'}, style: {'{'} fill: '#10B981' {'}'} {'}'},
  ],
  edges: [
    {'{'} id: 'e1', source: 'a', target: 'b', data: {'{}'} {'}'},
    {'{'} id: 'e2', source: 'b', target: 'c', data: {'{}'} {'}'},
  ],
  layout: 'force',
  theme: 'dark',
{'}'});

Built for Scale

Level-of-detail rendering, spatial indexing, and off-main-thread layout computation keep everything smooth, no matter how large the graph.

10,000+

Nodes

Smooth rendering with spatial indexing and LOD culling. Pan and zoom without jank.

< 16ms

Frame Time

Hardware-accelerated canvas keeps frame time under 16ms for 60fps interactions.

Web Worker

Non-Blocking

Layout algorithms run in a Web Worker so the main thread stays responsive.

Built for real workloads

TopoKit ships in production NMS dashboards, enterprise org-chart products, dependency explorers, and SNA platforms. Pick the workload that matches yours.

Use case New