# TopoKit

> 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. The SDK ships seven layout algorithms (force-directed, hierarchical, circular, dagre, radial, concentric, grid), level-of-detail rendering for tens of thousands of nodes, force-directed edge bundling, clustering, progressive expand, web-worker layout, and first-class React 18+ bindings. Source-available under the Business Source License 1.1 (converts to Apache 2.0 four years after each release).

## Getting Started

- [Installation and quick start](https://topokit.io/docs/getting-started): npm install instructions, minimum viable example, configuration options, React quick start.
- [Core concepts](https://topokit.io/docs/core-concepts): the graph model, nodes and edges, events, batch operations, themes.
- [API reference](https://topokit.io/docs/api): full type-annotated reference for `create()`, the `Graph` class, the canvas renderer, React hooks, and core types.

## Features

- [Layout algorithms](https://topokit.io/docs/features/layouts): force-directed, hierarchical, dagre, circular, radial, concentric, grid — when to use each.
- [Filtering and highlighting](https://topokit.io/docs/features/filtering): show, hide, or dim nodes and edges dynamically.
- [Force-directed edge bundling](https://topokit.io/docs/features/edge-bundling): reduce visual clutter in dense graphs.
- [Clustering](https://topokit.io/docs/features/clustering): group nodes by field, aggregate edges, collapse interactively.
- [Progressive expand](https://topokit.io/docs/features/progressive-expand): explore large graphs by expanding neighbors on demand.
- [Data mapping](https://topokit.io/docs/features/data-mapping): map any JSON structure to nodes and edges with dot-paths and function resolvers.

## Components

- [Legend](https://topokit.io/docs/components/legend): manual and auto-generated category legends.
- [Node badges](https://topokit.io/docs/components/badges): multi-badge notifications with built-in icons.
- [Minimap, toolbar, search, tooltip, context menu, info panel](https://topokit.io/docs/components/minimap): UI surface components.

## Advanced

- [Web Worker layout](https://topokit.io/docs/advanced/web-worker): off-main-thread layout computation, performance tuning, white-label, commercial licensing.

## Examples (copy-paste recipes)

- [Examples overview](https://topokit.io/examples): production-ready code recipes.
- [React network graph](https://topokit.io/examples/react-network-graph): drop-in React component with hover, click, pan, zoom.
- [Force-directed layout](https://topokit.io/examples/force-directed-layout): tunable force layout configuration.
- [Dagre flowchart](https://topokit.io/examples/dagre-flowchart): top-down or left-right layered flowchart.
- [Minimap and search](https://topokit.io/examples/minimap-and-search): compose minimap, search bar, and tooltip components.
- [Custom node rendering](https://topokit.io/examples/custom-node-rendering): avatars, multi-line labels, status badges via the renderer hook.
- [Web Worker layout](https://topokit.io/examples/web-worker-layout): off-main-thread layout for large graphs.

## Showcases (live, interactive demos)

- [Feature explorer](https://topokit.io/showcases/feature-explorer): every TopoKit capability in a single interactive demo.
- [Stress test](https://topokit.io/showcases/stress-test): renders 5,000–20,000 nodes with real-time FPS and adjustable LOD.
- [Telecom network topology](https://topokit.io/showcases/telecom-topology): service topology with RTN/PTN/eNodeB elements.
- [Social network analysis](https://topokit.io/showcases/social-network): community detection and influence mapping.
- [Organization chart](https://topokit.io/showcases/org-chart): hierarchical employees with department grouping.
- [Dependency tree](https://topokit.io/showcases/dependency-tree): npm-style dependency visualization with cycle detection.

## Use cases (industry-specific landing pages)

- [Use cases overview](https://topokit.io/use-cases): all verticals where TopoKit is deployed.
- [Network topology visualization](https://topokit.io/use-cases/network-topology): NMS, OSS, telecom, ISP, datacenter, SDN/NFV dashboards.
- [Org charts](https://topokit.io/use-cases/org-chart): interactive enterprise organization charts with combos, custom rendering, search, and PNG export.
- [Dependency graphs](https://topokit.io/use-cases/dependency-graph): npm-style package graphs, cycle detection, critical-path highlighting, and dev/peer/prod filters.
- [Social network analysis](https://topokit.io/use-cases/social-network-analysis): community detection, influence mapping, ego networks for SNA, fraud, AML, and intelligence platforms.

## Pricing and policies

- [Pricing](https://topokit.io/pricing): Pro $1,499/yr, Enterprise $1,999/yr, Education free. Per-developer licensing, 30-day refund, perpetual fallback.
- [FAQ](https://topokit.io/faq): licensing, framework support, browser compatibility, performance, security.
- [License (BSL 1.1)](https://topokit.io/license): full license text, permitted uses, commercial-license requirements.
- [Privacy policy](https://topokit.io/privacy): GDPR / UK GDPR / KVKK / CCPA-aligned policy.

## Glossary (term definitions)

- [Glossary overview](https://topokit.io/glossary): graph visualization, layout, rendering, and licensing definitions.
- [Force-Directed Layout](https://topokit.io/glossary/force-directed-layout)
- [Dagre Layout](https://topokit.io/glossary/dagre-layout)
- [Hierarchical Layout](https://topokit.io/glossary/hierarchical-layout)
- [Force-Directed Edge Bundling (FDEB)](https://topokit.io/glossary/edge-bundling)
- [Level of Detail (LOD) Culling](https://topokit.io/glossary/lod-culling)
- [Spatial Indexing](https://topokit.io/glossary/spatial-indexing)
- [Web Worker Layout](https://topokit.io/glossary/web-worker-layout)
- [Graph Clustering](https://topokit.io/glossary/graph-clustering)
- [Progressive Expand](https://topokit.io/glossary/progressive-expand)
- [Canvas Renderer](https://topokit.io/glossary/canvas-renderer)
- [Minimap](https://topokit.io/glossary/minimap)
- [Business Source License 1.1](https://topokit.io/glossary/bsl-1-1)

## Project

- [About](https://topokit.io/about): mission, principles, story.
- [Changelog](https://topokit.io/changelog): release history with new features, behavior changes, and bug fixes.
- [Contact](https://topokit.io/contact): sales, support, partnerships, security.