Skip to content

Web Worker Layout

Move layout computation off the main thread to keep the UI responsive during large graph layouts.

Setup

1. Create the Worker Script

layout-worker.js 
import { WorkerLayoutRunner } from '@topokit/layouts/worker';

const runner = new WorkerLayoutRunner();
runner.listen();

2. Use in Your App

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

const worker = new Worker(
  new URL('./layout-worker.js', import.meta.url),
  { type: 'module' }
);

const layoutRunner = new WorkerLayoutRunner(worker);

const app = create(container, {
  nodes: largeDataset.nodes,
  edges: largeDataset.edges,
  layout: 'force',
  theme: 'dark',
  layoutRunner: layoutRunner.toLayoutRunner(),
});

Most modern bundlers (Vite, Webpack 5, Rollup) support the new URL(..., import.meta.url) pattern automatically.

LayoutRunnerFn Signature

TypeScript 
type LayoutRunnerFn = (
  algorithm: string,
  nodes: Node[],
  edges: Edge[],
  options?: Record<string, any>
) => Promise<{ positions: Map<string, { x: number; y: number }> }>;

You can implement your own layout runner (e.g., server-side) as long as it matches this interface.

Performance Tips

  • Level-of-Detail: Renderer automatically simplifies nodes at low zoom. No config needed.
  • Spatial Indexing: Quadtree for O(log n) hit-testing and viewport culling.
  • Batch Updates: Always use graph.batch() for bulk changes.
  • Reduce Edges: Filter, cluster, or bundle to reduce edge count.
Node CountPerformanceStrategy
< 500Smooth anywhereNo optimization needed
500 -- 2,000Smooth on modern devicesConsider Web Worker
2,000 -- 10,000Needs optimizationWorker + expand + clustering
> 10,000AdvancedAll above + filtering + server-side layout

White Label

Enterprise license holders can remove all TopoKit branding.

TypeScript 
const app = create(container, {
  nodes: [...],
  edges: [...],
  license: 'your-enterprise-license-key',
  whiteLabel: true,
});

Licensing

FeatureTrialProEnterprise
Duration30 days1 year1 year
Node limit50UnlimitedUnlimited
WatermarkYesNoNo
All featuresYesYesYes
White labelNoNoYes
SSONoNoYes
SupportCommunityEmailPriority + SLA
Perpetual fallbackNoYesYes
TypeScript 
const app = create(container, {
  nodes: [...],
  edges: [...],
  license: 'GK-PRO-XXXX-XXXX-XXXX',
});

Without a license key, TopoKit runs in Trial mode (30 days, 50 nodes, watermark). See pricing for details.

Next Steps