KladCanvas Org Chart

κλάδος, “branch” — a fast, framework-agnostic org chart for very large trees

An org chart of six cards in perspective, floating above their connectors

⚡ Built for Large Trees

Renders 5,000–50,000 nodes at 60fps. Layout and drawing run on a canvas inside a Web Worker, so the main thread stays free. No DOM per node, ever.

🧩 Your Components on Top

A Vue slot, a React render prop, or plain DOM. Real components mount only for the nodes on screen and zoomed in far enough to read — about fifty at a time, pooled and reused.

🛠️ Developer-Friendly

TypeScript throughout, four orientations, RTL, minimap, SVG and PNG export, full keyboard navigation and a screen-reader tree. ESM only, with Vue 3 and React adapters.

Quick Start

bash

npm install @klad/core

import { createKlad } from '@klad/core'

const chart = createKlad(document.getElementById('chart')!, {
  data: [
    { id: 'ceo', name: 'Jamie Fox', title: 'CEO' },
    { id: 'cto', parentId: 'ceo', name: 'Amy Chen', title: 'CTO' },
    { id: 'cfo', parentId: 'ceo', name: 'Priya Rao', title: 'CFO' },
  ],
  nodeSize: { w: 180, h: 64 },
  label: (item) => String(item.name ?? ''),
})

Pan, zoom, click, keyboard navigation. data is flat — { id, parentId?, ...yours } — so the array from your API is usually already the right shape.

One Thing to Know

nodeSize is declared, not measured. Layout runs in a Web Worker, where there is no element to call getBoundingClientRect() on — that is what buys the 50,000. Your content fits the box you declare.

If your chart is a hundred nodes and every card is a different height decided by its content, use a DOM-based chart instead. Sizing has the whole trade.