klad

The frameworkless API for Klad — a tree engine that stays smooth where a chart made of elements cannot, by laying out and drawing the tree on a <canvas> inside a Web Worker, overlaying real DOM only for the nodes currently on screen and zoomed in far enough to read.

One flat array of { id, parentId } in; whichever shape reads best out — tiered, indented rows, radial rings, or a wheel you can drill into.

This package is one function.

npm install @klad/core

import { createKlad, type Options } from '@klad/core'

const options: Options = {
  data: [
    { id: 'ceo', name: 'Jamie Fox', title: 'CEO' },
    { id: 'cto', parentId: 'ceo', name: 'Amy Chen', title: 'CTO' },
  ],
  renderNode(element, context) {
    element.innerHTML = `<strong>${String(context.item.name ?? '')}</strong>`
  },
}

const chart = createKlad(document.getElementById('chart')!, options)
chart.on('nodeClick', ({ id, item }) => console.log(id, item))
// chart.destroy() when done

Using Vue? Use @klad/vue instead — it's built on this package and adds a #node scoped slot.

Guide, API reference and roadmap: the documentation.

Licence

Dual-licensed: GNU AGPL v3 or later, or a commercial licence for use the AGPL does not permit — see LICENSE-COMMERCIAL.md, or email [email protected].