PowerRoadmap
Calendar-true Gantt charts you can actually present.
PowerRoadmap is a presentation-grade Gantt chart authoring tool — task bars, milestones, brackets, dependency arrows, critical path highlighting, baseline drift tracking, today line, percent-complete fills — with every element directly editable by dragging, typing, or via a Linear-style Cmd+K command palette.
It ships as a single-file portable HTML app — no install, no account, no server. Open the file in any modern browser and start planning. Press Ctrl+S to save; your chart is embedded back into the same HTML file.
Gallery
Web app
The single-file web app — switch time scales (week → month → quarter → year → fit), edit dates by dragging, and export.
PowerPoint add-in (native, on-slide editor)
A native C++ COM add-in (think-cell style) that emits the chart as real, editable PowerPoint shapes — not an image — and turns the slide itself into the editor: an input-capturing overlay with its own selection model, drag gestures, scoped keyboard shortcuts, context menus, and a docked contextual app bar.
Hero card — task selected with full app bar:
Full-context cards for every selection context and feature:
Every gesture and command is one undo entry, every command also lives in the right-click menus (derived from the same command registry as the app bar), and dragging a bar reflows dates with dependencies and the embedded data kept in sync:
Build the DLL and test it in PowerPoint on any 64-bit-Office PC — see docs/native-addin-install.md (prebuilt DLL + register.bat, no admin or Visual Studio needed to register).
Get started
- Download
PowerRoadmap.html from the latest release.
- Open it in any browser (Chrome / Edge / Safari / Firefox).
- Start editing.
- Press Ctrl+S to save back to the HTML file.
- Email or share the file. Recipients get a fully editable copy with no install.
What's inside
Direct manipulation
- Click anywhere with the Task tool (T) to add a task at that date and row
- Drag bars to move dates; drag edges to resize; drag from edge handles to wire dependencies
- Type dates in the inspector — the bar moves
- F2 or double-click to rename inline
- Right-click anything — context menu for everything
- Marquee select (R), multi-select with Shift+click
Linear-style command palette
- ⌘K (or Ctrl+K) opens a fuzzy-searchable palette
- Every action available: create, switch tools, change scale, toggle views, switch theme, save, open, all exports, load templates
- Arrow-key navigation, Enter to run
Templates
Start fast with built-in starters: Product Launch, Two-Week Sprint, Hiring Plan, Marketing Campaign, or Blank.
Pro features
- Critical Path Method — toggle on to highlight tasks with zero float in red
- Baselines — capture a snapshot of your schedule, then visualize drift as you replan
- Minimap — compact overview rail at the bottom of the chart; click to pan
Calendar
- Day / Week / Month / Quarter / Year scales (switch with the bottom toolbar or ⇧D/⇧W/⇧M/⇧Q/⇧Y)
- Custom fiscal-year start month
- Weekend shading and working-day calendar
- Today line with a TODAY pill label that updates automatically
Persistence & export
- Save embedded HTML —
Ctrl+S embeds the chart JSON into the file itself
- Auto-save to localStorage every second (with a non-blocking restore banner on next launch)
- Export PNG (1× or 2×), SVG, JSON, YAML; print to PDF
- Open any prior
.html, .json, or .yaml via file picker or drag-drop
Themes
Light by default, with Dark and Print (high-contrast for paper-quality output) available from the theme switcher.
Keyboard shortcuts
| Key | Action |
|---|
| ⌘K / Ctrl+K | Open command palette |
| ? | Open shortcuts overlay |
| V / T / Y / R / H | Select / Task / Milestone / Marquee / Pan tools |
| ⇧D/⇧W/⇧M/⇧Q/⇧Y | Day / Week / Month / Quarter / Year scale |
| N / M / B | Quick-add task / milestone / bracket |
| F2 / dbl-click | Rename selected task |
| ←/→ | Nudge by 1 day (Shift = 7 days) |
| Del | Delete selection |
| + / − | Zoom in / out |
| Home | Fit to data |
| S | Toggle snap-to-scale |
| Esc | Clear selection / revert to Select tool |
| ⌘Z / ⌘⇧Z | Undo / Redo |
| ⌘S | Save (embeds chart in HTML) |
| Wheel | Zoom at cursor |
| Shift+wheel | Pan horizontally |
How it works
Each PowerRoadmap file is a standalone HTML application. When you save, the chart is serialized to JSON and embedded inside a <script type="application/json" id="powerplanner-data"> tag in the same HTML file. Reopen the file to continue editing. The renderer is pure SVG, so PNG/SVG/PDF exports are crisp at any resolution.
Roadmap
PowerRoadmap is built so the same engine powers multiple surfaces:
- ✅ Portable HTML — this release
- 🟡 Web app — hosted edition with accounts and sharing
- 🟡 PowerNote node — embeddable Gantt node inside PowerNote
- 🟡 PowerPoint add-in — Office.js task pane that emits native, vector-editable shapes
See PLAN.md for the full roadmap and PRD.md for product details.
Development
npm install
npm run addin:certs # Trust the localhost dev certificate (run once per machine)
npm run dev # Dev server at http://localhost:5180
npm run dev:addin # HTTPS dev server for PowerPoint sideload (port 5180)
npm run build:template # Build standalone PowerRoadmap.html → dist-template/
npm test # Unit tests (vitest)
npm run test:e2e # Playwright E2E tests
Agent guidance for Codex, Claude, and other coding assistants lives in
AGENTS.md. CLAUDE.md delegates to the same shared instructions.
Stack
React 19 + TypeScript + Vite + SVG renderer + Zustand. Single-file build via vite-plugin-singlefile. Around 270 KB total (82 KB gzipped). 38 unit tests + 4 E2E tests, all passing.
License
MIT.
