RoadmapSnap is a config-driven roadmap dashboard for program managers and enterprise teams. Milestones, Gantt timelines, dependency graphs — zero backend, zero build step.
Program managers and PMOs waste hours turning raw plans into stakeholder-ready visuals — only for them to go stale within days.
Excel timelines break under complexity. Formulas drift, columns misalign, and stakeholders receive outdated snapshots that erode trust.
Blocking relationships between workstreams are buried in footnotes. Critical failures go unnoticed until it's too late.
CxOs need KPIs and status at a glance — not dense project tables. The gap between detail and executive summary costs programs momentum.
Enterprise tools require servers, licenses, and months of IT approval. A roadmap dashboard shouldn't need a deployment pipeline.
Full feature set configured from a single JavaScript file. Edit and refresh — no recompilation, no servers.
Model any workflow with alternating states and milestones. Status auto-calculates from real dates — no manual updates.
Visualize blocking relationships with directional arrows. Define simple or advanced milestone-to-milestone dependencies per deliverable.
3, 6, or 12-month views with milestone markers overlaid on bars. Toggle groups, sort, filter, and search interactively.
Export as PNG for presentations, CSV for data analysis, or JSON for integration. Presentation-ready in one click.
Auto-calculated cards showing total, in-progress, done, and at-risk counts. Click any card to filter the timeline instantly.
Flag deliverables as at-risk or descoped. Visual indicators surface issues immediately without digging through data.
Crisp dark theme for presentations and low-light environments. Toggle without any configuration changes.
Runs entirely in the browser. No server, no database, no build step. Open index.html and you're done.
Real screenshots from a live RoadmapSnap deployment — no mock-ups, no illustrations, no fake data.
Dependency graph, dark mode, export panel, timeline zoom, filter bar — all running live.
Clean separation between your data (config.js) and the rendering engine. Edit one file, reload, done.
Each deliverable has a name, group, milestone dates, optional dependencies, risk flags, tags, and external links.
Define your milestone lifecycle and set timeline bounds. Labels, colors, and group order are fully customizable.
The engine reads your config and renders KPI cards, Gantt timeline, dependency graph, and filter bar instantly.
Host on GitHub Pages, Cloudflare Pages, Netlify, or a shared drive. No backend, no hosting costs, no ops burden.
From PMO governance to consulting engagements — wherever you need a stakeholder-ready roadmap fast.
Maintain a single source of truth across all programs. Export for weekly status reports and board packs with one click.
Map multi-stream transformation programs with complex cross-dependencies. Keep executives aligned on the critical path.
Track schema discovery, ETL pipelines, data quality rules, and dashboard delivery with clear milestone accountability.
Manage long-running upgrade programs with phase gates. Surface at-risk workstreams and critical dependencies instantly.
White-label by swapping logos and CSS. Deliver polished client presentations without expensive tooling licenses.
Filter by group, status, or risk to surface what needs executive attention. Export presentation-ready snapshots on demand.
Three ways to get started — pick the one that fits your workflow.
Clone and open directly in any browser. No server needed.
js/config.js → refresh → done.Free global CDN. No build command needed.
/ → DeployFree hosting straight from your repository.
username.github.io/RoadmapSnap/Everything is driven by js/config.js. No code changes, no recompilation — edit and refresh.
// js/config.js — your entire roadmap in one file const CONFIG = { TIMELINE: { TODAY: "16/02/2026", // DD/MM/YYYY or "" for auto START_MONTH: "01/2026", END_MONTH: "12/2026" }, ENTITY_LABELS: { singular: "Feature", // e.g. "Project", "Epic", "Initiative" plural: "Features", scopeLabel: "features" }, // States and milestones must alternate WORKFLOW: [ { type: 'state', key: 'NS', title: 'Not Started' }, { type: 'milestone', key: 'M0', title: 'Dev Start', color: '#6554c0' }, { type: 'state', key: 'DEV', title: 'In Development' }, { type: 'milestone', key: 'M1', title: 'Dev Complete', color: '#00b894' }, { type: 'milestone', key: 'M2', title: 'UAT Complete', color: '#fdcb6e' }, { type: 'milestone', key: 'M3', title: 'Production', color: '#e17055' }, { type: 'state', key: 'DONE',title: 'Done' } ], GROUP_ORDER: ["Frontend", "Backend", "Database", "Infra"], DELIVERABLES: [ { name: "User Authentication", // required, must be unique group: "Backend", atRisk: false, descoped: false, tags: ["security", "P0"], link: "https://jira.com/PROJ-123", dependencies: [ "Database Setup", // simple { task: "API Gateway", from: "M2", to: "M1" } // advanced ], milestones: { M0: "01/03/2026", M1: "30/03/2026", M2: "15/04/2026", M3: "01/05/2026" } } ] };
| Parameter | Type | Required | Description |
|---|---|---|---|
name | string | Required | Unique deliverable name shown in the timeline |
milestones | object | Required | Key-date pairs matching WORKFLOW keys (DD/MM/YYYY) |
group | string | Optional | Stream/group for organising rows in the timeline |
dependencies | array | Optional | String names or {task, from, to} objects |
atRisk | boolean | Optional | Shows a risk indicator icon (default: false) |
descoped | boolean | Optional | Strikes through and greys out the deliverable |
tags | array | Optional | Searchable keywords for the filter bar |
link | string | Optional | External URL (Jira, Confluence…) shown as an info icon |
showInTimeline | boolean | Optional | Control timeline row visibility (default: true) |
js/config.js to define your deliverables, groups, milestones, and dates. Open index.html in any browser. No terminal commands, no package installs, no configuration beyond that one file.dependencies array to any deliverable. Simple string names link to the last milestone of the referenced deliverable. Advanced {task, from, to} objects let you link specific milestones. RoadmapSnap renders a recursive dependency graph with directional arrows automatically./, and deploy. Global CDN is included at no cost.No backend. No build step. No license fees. Clone, configure, and ship a stakeholder-ready roadmap dashboard today.