Sourcerepo

Gantt

A Gantt chart in plain TypeScript: drag, stretch and link tasks and the work after them moves along, with the critical path, zoom and undo. MIT, no dependencies.

Status
Open source
Language
TypeScript
License
MIT
Updated
Oct 2026
GitHub
A MacBook and an iPhone running the chart in Safari: on the MacBook, a task is dragged two days later and eight tasks after it follow, another is stretched, a link is drawn that pushes the phone pass along, progress is pulled forward, then the critical path turns red and the view zooms out to weeks; on the iPhone, the task list folds away, a task is moved and another stretched by finger, then the critical path and the wider view

A Gantt chart for the browser. Tasks sit in a tree beside a timeline: drag a bar to move it, pull an end to make it longer, slide its progress, or draw a link from one task to another, and every task waiting on it moves later. The critical path shows which tasks decide the end date, and every change can be undone. Charts like this are usually sold per developer; this one is MIT licensed, plain TypeScript, with no dependencies.

Install

Clone
git clone https://github.com/drkxbt/gantt
Install
npm install github:drkxbt/gantt
Use
gantt(element, { tasks, links, onChange })

Features

  • Drag a bar to move it, pull either end, slide its progress; a summary task moves with everything in it
  • Draw a link from one task to the next and every task waiting on it moves later; a link that would loop is refused
  • The critical path: the tasks with no slack, the ones that move the end date if they slip
  • Tasks in a tree with summaries and milestones, edited in place, every change one step to undo
  • Days, weeks or months, a keyboard for everything, touch that still scrolls, and a strict Content Security Policy

How it works

  • A date is a whole number of days since 1970, read as a calendar date with no time zone, so a task is two integers and a clock change never shifts it.
  • Links to and from summary tasks are spread out to the tasks inside them; tasks are then visited after everything they wait for, and each starts no earlier than its latest predecessor ends plus the lag.
  • Tasks only ever move later, so one with room to spare keeps its date; tasks caught in a loop are left where they are, and a new link that would close one is refused.
  • The critical path works back from the plan's last day: a task whose latest possible finish is its own end has no slack.
  • While a bar is held the plan is worked out again from where the drag began, so pulling back undoes the push; letting go makes it one step in the history.

Where it shows here

Only in its own demo for now.

Screenshots

  • On the MacBook, the scheduling task is dragged two days later and the eight tasks waiting on it slide along with it
    MoveTwo days later, and the rest follows
  • The tests are stretched by two days, then a link is drawn from the tests to the phone pass, which moves later to wait for them
    LinkStretch a task, then make another wait
  • The progress handle under a task is pulled forward from 40 to 75 percent done
    ProgressPull the progress along
  • The critical path turns the tasks with no slack red, then the view zooms out from days to weeks to show the whole plan
    Critical pathWhat sets the end date

Stack

  • TypeScript
  • SVG
  • Pointer Events
  • Node test runner

Run it locally

git clone https://github.com/drkxbt/ganttcd ganttnpm installnpm run demo