Build Gantt charts with a headless engine
GanttKit splits a Gantt chart into a headless engine and thin plugins. The engine owns the data model, time-scale, layout geometry and interaction logic it touches no DOM and depends on no UI framework. It emits a declarative scene of vector primitives that any renderer can paint.
The mental model
Everything in GanttKit flows one way. The core runs a compute pipeline over your rows and produces a scene. A renderer subscribes to scene changes and paints primitives to the DOM, forwarding pointer events back to the engine. Feature plugins sit in the middle, transforming the data or the scene through hooks.
@ganttkit/core
Rows → time-scale → layout → scene. Zero DOM, zero framework. Pure, unit-testable logic.
columns · tree · i18n · …
Tap hooks.rows to transform data, or hooks.scene to add layers.
SVG · HTML · Canvas
Paints primitives, forwards pointer events, hosts plugin UI slots.
The engine is just a JavaScript object. You can construct it, feed it rows and read back its scene in Node with no browser at all which is exactly how it's tested. A renderer is the only piece that touches the DOM.
A first chart in 15 lines
The vanilla SVG renderer needs nothing but a target element:
import { createGantt } from '@ganttkit/svg'
import '@ganttkit/svg/styles.css'
const gantt = createGantt({
target: '#chart',
theme: 'dark',
rows: [
{
id: 'r1',
name: 'Design',
tasks: [
{ id: 't1', name: 'Wireframes', start: '2026-07-01', end: '2026-07-08', progress: 1 },
{ id: 't2', name: 'Mockups', start: '2026-07-09', end: '2026-07-20', progress: 0.4 },
],
},
],
})Where to go next
Getting started
Install, render your first chart, and learn the row / task data model.
Read →The core engine
Options, state, events, the two-pass compute pipeline and virtualization.
Read →Using plugins
Every renderer and all 11 feature plugins, with options and examples.
Read →Writing a plugin
The plugin contract, hooks, services, commands and UI slots with a worked example.
Read →API & types
Full export list, data-model interfaces, scene primitives and the events table.
Read →Live demo
20 000 tasks with every feature enabled, painted by the SVG renderer.
Launch →Package map
| Package | Role | Export |
|---|---|---|
@ganttkit/core | Headless engine + plugin host | GanttEngine |
@ganttkit/svg | Vanilla SVG renderer | svgRenderer, createGantt |
@ganttkit/html | Vanilla <div> renderer | htmlRenderer |
@ganttkit/canvas | 2D canvas renderer | canvasRenderer |
@ganttkit/plugin-columns | Sidebar columns | createColumns |
@ganttkit/plugin-filter | Row / task filtering | createFilter, filters |
@ganttkit/plugin-progress | Completion fill | progressPlugin |
@ganttkit/plugin-markers | Date markers / bands | createMarkers, todayMarker |
@ganttkit/plugin-tree | Hierarchical rows | createTree |
@ganttkit/plugin-dependencies | Auto-scheduling + link drag | createDependencies |
@ganttkit/plugin-baseline | Planned-vs-actual ghosts | createBaseline |
@ganttkit/plugin-toolbar | View-mode / zoom / today | toolbarPlugin |
@ganttkit/plugin-tooltip | Hover detail card | tooltipPlugin |
@ganttkit/plugin-selection | Select / rubber-band / menu | createSelection |
@ganttkit/plugin-i18n | Localized dates + strings | createI18n |