A Gantt chart view for Todoist projects. One self-contained HTML file, no backend, no build step, no dependencies.
Use it here: https://bingb0t5.github.io/gantist/
Or download index.html and open it in any browser - it works identically as a local file.
- Renders any Todoist project (or all projects at once) as a Gantt timeline
- Shows who owns each task as a coloured initials chip, marks unassigned work with a dashed outline, and narrows the chart to one person - or to nobody - from an assignee dropdown
- Groups by section, project or assignee, with subtasks nested under their parents
- Filters with Todoist's own query language -
assigned to: me & overdue,!assigned,deadline before: +7 days,search: launch @design. Your saved Todoist filters appear in a dropdown, and quick chips write into the same box - Drag bars to reschedule: drag a bar to move a task, drag its edges to change the start or end. Dragging a parent takes its subtasks with it, in a single request. Changes save straight back to Todoist, and Ctrl+Z undoes the last one
- Shows progress as a fill inside a parent's bar, from how many of its subtasks are done
- Draws deadline-only tasks as milestone diamonds, and flags tasks that have been rescheduled a lot
- The Completed chip adds recently completed tasks to the chart as rows, so a half-finished project doesn't look half-empty. Their dates are loaded either way, because the subtask progress fill needs them. Completed work follows the project and assignee you picked but not the filter box, so "3 of 5 subtasks done" stays the same number whatever you type
- Baseline snapshot: save the current dates, then see the original plan as a ghost bar behind the live one
- Auto-refresh, day/week/month zoom, non-working-day shading, today line, dark mode, compact rows
- Exports to CSV, or prints/saves the timeline as a PDF
- The current view lives in the URL, so a link reproduces exactly what you are looking at
| Task has | Bar |
|---|---|
| Due date + deadline | Spans from due date to deadline (diamond marker at the deadline) |
| Due date + duration | Spans from due date across the duration |
| Due date only | Single day |
| Deadline only | A milestone diamond |
| No dates | Listed in an "Unscheduled" group |
Overdue bars get an outline. If a task's deadline is before its due date, the bar renders striped as a data warning. Colors follow Todoist priority (P1 red, P2 orange, P3 blue, P4 grey); completed tasks are green and muted. Recurring tasks display normally but cannot be dragged, so a drag can never destroy a recurrence rule.
Dates respect your Todoist account, not your browser: a task due "tomorrow at 9am Pacific/Auckland" sits on the day you see it, and dragging it keeps the 9am. Weekend shading follows your account's days-off rather than assuming Saturday and Sunday.
| Key | Does |
|---|---|
/ |
Focus the filter box |
t |
Scroll to today |
← → |
Nudge a focused bar by a day |
Ctrl+Z |
Undo the last change |
Esc |
Close the legend or menu |
Bars are focusable, so the chart is usable without a mouse. Dragging uses pointer events, so it works with a mouse, a trackpad, a pen or a finger.
- In Todoist, go to Settings → Integrations → Developer and copy your API token
- Open Gantist and paste the token into the connect screen
- Pick a project
- The page calls the Todoist API directly from your browser. Your token and your task data never touch any other server, including the one hosting this page
- No external requests of any kind. Assignees render as coloured initials computed from the user id rather than avatars fetched from a CDN, so
api.todoist.comis the only host this page ever contacts - Each load and each refresh makes two calls to Todoist: one
/syncfor your projects and open tasks, and one for tasks completed in the last few months, which is what makes the subtask progress fill accurate. Typing in the filter box adds one/tasks/filtercall per pause in typing; between refreshes the completed call is re-issued only when you switch project or the span of your task dates changes - The token is stored only in your browser's localStorage. Use the Disconnect button to wipe it (do this on shared computers) - it rebuilds the page from scratch, so every project, task, collaborator, saved baseline, selected project, collapsed group, filter you typed and the shareable URL go with it. A disconnected tab is indistinguishable from a first-ever visit
- Baselines and view preferences are also local to your browser and are never written back to Todoist
- The shareable URL carries only the view (project, filter, assignee, grouping, zoom, whether completed tasks are shown) - never any task data and never the token
- A Todoist personal API token grants full access to your account, so only paste it into pages you trust. This page is a single static file with no external scripts, so what you see in this repo is exactly what runs
Todoist has no dependency model, so there are no dependency arrows and no critical path - drawing them would mean inventing a convention that lives in your task descriptions and looks like noise in Todoist's own clients. There is also no time tracking, cost or capacity planning, because Todoist stores none of it, and no calendar, list or board view, because Todoist already has those. Anything needing a server (webhooks, notifications, public share links carrying data) is out of scope by design.
Everything lives in index.html (vanilla JS and CSS, around 1,600 lines). Open it in a browser and edit. No tooling required.
Loading goes through Todoist's /sync endpoint, which returns the user, projects, sections, tasks, labels, collaborators and saved filters in one request; refreshes are incremental via sync_token. Completed tasks live on their own paginated endpoint (capped by Todoist at a three-month window) and are fetched alongside each sync. Writes go through batched item_update commands, so a drag that touches ten tasks is still one request. Every /sync call, read or write, runs one at a time on a single promise chain: they all move sync_token, and a response arriving out of order would walk it backwards.