KladCanvas Tree Engine

Draw a tree the way it wants to be read — tiered, indented, radial or as a wheel

Get Started

Reference

View on GitHub

A tree of six cards in perspective, floating above their connectors

⚡ Built for very large trees
The tree is laid out and drawn on a canvas inside a Web Worker, so the main thread stays free. No DOM per node, ever — which is the one thing a chart made of elements cannot avoid.
🌳 The shape is a setting
An org chart, a file explorer, a radial dendrogram, a wheel you can drill into. Change one option; the data stays exactly as it was.
🧩 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, pooled and reused as you move.

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.

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

KladCanvas Tree Engine

⚡ Built for very large trees

🌳 The shape is a setting

🧩 Your components on top

Quick Start ​

Quick Start