KladCanvas Tree Engine

Quick Start ​

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.

Same Data, Four Shapes ​

An org chart is one thing a tree can look like. Add layout and the same array draws as something else entirely — no second data structure, no second library.

createKlad(el, { data, layout: 'file' }) // indented rows, folder guide lines
createKlad(el, { data, layout: 'radial' }) // root at the centre, generations as rings
createKlad(el, { data, layout: 'sunburst' }) // nested arcs you can drill into

File explorers, ASTs, taxonomies, dependency trees, family trees, disk usage — all the same shape of problem, and the reason this is a tree engine rather than an org chart component. Try them in the playground.

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 scale. Your content fits the box you declare — more in Sizing.

If you like this library, please consider giving it a star on GitHub or sponsoring the project.