Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/biginformatics/roadmap

Roadmap Template
https://github.com/biginformatics/roadmap

Last synced: 13 days ago
JSON representation

Roadmap Template

Awesome Lists containing this project

README 

          
# Product Roadmap



A lightweight, interactive product roadmap template rendered entirely in a single HTML file.



## Features



- **Single-file** — no build step, no server, no dependencies. Open the HTML in any browser.

- **Interactive timeline** — swimlane grid view with years, months, and status-colored due-date chips spanning 2026–2032.

- **Linear due-date view** — the default view shows a top-to-bottom chronological list of due-date items with a 10px product-color bar on each row.

- **D3-style initiative timeline** — third view mode renders a self-contained SVG timeline for the current visible/tag-filtered items, with unified or product-grouped lanes, month/quarter/year zoomable timeframes, horizontal scrolling, and no CDN dependency.

- **Coordination Matrix view** — low-noise cross-product matrix with auto/calendar/Federal FY/year phase grouping, current-period highlighting, and a native canvas PNG export button.

- **GitHub Pages ready** — `index.html` redirects to the roadmap artifact and the Pages workflow publishes the static site from `main`.

- **Provided product schema support** — product JSON documents include `project`, `title`, `subtitle`, `lastUpdated`, `owner`, and `deliverables`.

- **Due-date rendering** — parseable `MM/DD/YYYY` due dates appear as chips in the matching `Mon YYYY` month column using each due date's own status color; no long start-to-end task bars are drawn.

- **Per-date status, notes, and actions** — each `dueDates[]` item can store its own `status`, `note`, and optional timestamped `actions`; legacy string due dates are migrated automatically.

- **Multiple product JSON documents** — each product has its own JSON card in the edit drawer; optional product `order` controls display sequence and optional `color` controls list-view color bars.

- **Collapsed raw JSON** — product JSON is hidden by default in the drawer and expands only when you click **Edit JSON**.

- **Deliverable creation** — add deliverables to any product card, including newly-created empty product JSON documents.

- **File import** — click **Load JSON Document** in the edit drawer to import one or more `.json` files instead of pasting JSON manually.

- **Product toggles** — turn product roadmaps on/off and render enabled products together on one timeline; use **Check All / Uncheck All** to change the full list at once.

- **Grid section collapse** — collapse or expand all product swimlanes at once, or use an individual product header chevron.

- **Empty-state onboarding** — with no JSON loaded, start from large **Open existing roadmap document** and **Create a new product roadmap** actions instead of embedded example data.

- **Current month highlight** — the present month is highlighted in gold on the timeline.

- **Current week highlight** — the linear view highlights due-date rows in the current week in gold.

- **Month/year filtering** — use the header Month and Year dropdowns to filter both grid and list views. A selected year with All Months shows every due date in that year; selecting a month and year narrows to that month. Month headings still filter directly to that month/year and highlight matching columns green.

- **Search and tag filtering** — use the header search box to filter tasks by phrase, toggle **Tags** to search tags only, or pick an exact tag from the **All Tags** dropdown.

- **Favorites filtering** — optional `favorite: true` tasks can be starred and filtered with the header **Favorites** toggle in both grid and list views.

- **Live editing** — click **Edit Data** to paste or update product roadmap JSON, add deliverables, and re-render instantly.

- **localStorage caching** — save your product JSON documents and toggle states locally; survives page reloads. The drawer **Clear Cache** action resets to defaults.

- **Status changes + notes** — click a due-date chip or linear list row, change that date's status, and enter a date-specific note.

- **Filtering** — filter visible deliverables by task or due-date status across all enabled products.

- **Stats dashboard** — at-a-glance counts for enabled products, total deliverables, in-progress, at-risk, blocked/on-hold, completed, and due-this-month.

- **Dark theme** — clean, modern design.



## Quick Start



1. Open `Product-Roadmap.html` in a browser.

2. Use the empty-state buttons to **Open an existing roadmap document** or **Create a new product roadmap**.

3. In the edit drawer, add or edit one product JSON document per card, click **Add Deliverable** on a product card, click **Edit JSON** for raw edits, or click **Load JSON Document** to import `.json` files.

4. Check/uncheck product cards to toggle products on/off, or use **Check All / Uncheck All** at the end of the product list.

5. Click **Save & Render** — data and toggle states auto-save to `localStorage`.

6. Use the header tag, Month/Year, status, and favorite filters, then click the direct **Grid**, **List**, **Timeline**, or **Matrix** view buttons. **List** is the default view. In grid view, use **Collapse All / Expand All** or each product header chevron to manage product sections. In timeline view, choose **Unified** or **By Product** grouping, then zoom to **All Time**, **1 Year**, **1 Quarter**, or **1 Month** and pan Earlier/Later. In Matrix view, choose Auto, Calendar Quarter, Federal FY, or Year phases and use the image download button to export a PNG.

7. Use the icon-only **Copy Markdown** button to copy the currently displayed roadmap as a chronological Markdown table.

8. Use **Download Enabled JSONs** or **Download All JSONs** to export backups.

9. Click **Clear Cache** in the drawer to reset to an empty starting state.



## Product JSON Schema



Each editor card contains one product roadmap JSON document:



```json

{

  "project": "Backend Platform",

  "title": "Product Roadmap",

  "subtitle": "Interactive Deliverables & Timeline",

  "lastUpdated": "2026-05-08 14:30:00 ET",

  "owner": "Engineering Team",

  "order": 1,

  "color": "#3b82f6",

  "deliverables": [

    {

      "id": "bp-001",

      "title": "API Authentication",

      "owner": "Engineering Team",

      "status": "in-progress",

      "start": "May 2026",

      "end": "Jun 2026",

      "desc": "Implement OAuth2 and JWT token management for API endpoints.",

      "tags": ["api", "security"],

      "favorite": true,

      "dueDates": [

        { "date": "05/15/2026", "status": "in-progress", "note": "Token endpoint handoff.", "actions": [

          { "name": "Architecture review", "note": "Security sign-off captured.", "timestamp": "2026-05-12 14:30:00 ET" }

        ] },

        { "date": "06/30/2026", "status": "not-started", "note": "", "actions": [] }

      ],

      "notes": []

    }

  ]

}

```



Schema status values: `not-started`, `in-progress`, `at-risk`, `blocked`, `completed`, `on-hold`, `cancelled`.



Machine-readable schema: `roadmap.schema.json`. It validates a single product object, an array of product objects, or the wrapped `{ "documents": [...] }` export format.



Timeline date format: `"Mon YYYY"` — e.g., `"Jun 2027"`, `"Dec 2028"`.



Due date format: preferred `dueDates` entries are objects with `date`, `status`, `note`, and optional `actions`. Each `actions[]` entry can include `name`, `note`, and `timestamp`; entries added in the UI are timestamped automatically. Legacy `"MM/DD/YYYY"` string entries are still accepted and migrated by the UI.



Optional product metadata: `order` may be a number; lower numbers render first across product toggles, grid swimlanes, and list-view grouping. `color` may be a 6-digit hex color such as `#3b82f6`; use the edit drawer swatches or hex input to set it. The list view shows this product color as a 10px bar on the left side of each row.



Optional task metadata: `tags` may be an array such as `["api", "security"]` or a comma-separated string; `favorite` may be `true` to star a task.



See `Product-Roadmap.md` for the full schema documentation.



## Due Dates



`dueDates` are rendered as deliverable boxes in the timeline:



1. As small chips in the matching timeline month column when the value is a parseable `MM/DD/YYYY` date

2. No long grey start-to-end duration bar is drawn



Example: `"05/15/2026"` appears as a deliverable chip in the `May 2026` month column.



## Linear Timeline View



The app opens in the linear due-date view by default. It shows one row per due-date item, sorted chronologically from top to bottom. Each row includes task, due date, contract/product, and status; the row color follows the due date status, and the 10px bar on the far left shows the product color. Rows due in the current week are highlighted in gold. Tags and favorite stars are shown in this view too. The same Month and Year dropdowns, tag search, and Favorites toggle filter the list.



## D3-Style Timeline View



Click the direct **Timeline** view button to see the currently visible due-date items on a self-contained SVG timeline inspired by D3/Observable timelines. The timeline uses the same filters as the grid and list views, including the exact **All Tags** dropdown. Use **Unified** to show one initiative stream, or **By Product** to split the same filtered items into product lanes. Product color drives each timeline dot, status remains visible in the card text, and clicking a timeline item opens the existing due-date drawer.



The timeline timeframe control supports **All Time**, **1 Year**, **1 Quarter**, and **1 Month**. Year, quarter, and month modes zoom into a window and provide **Earlier** / **Later** controls plus horizontal scrolling for dense initiative timelines. Timeline cards are automatically packed into additional vertical rows when dates are close together so items do not cover each other.



## Multi-Product Workflow



Downloads use a wrapper so toggle state can be preserved:



```json

{

  "documents": [

    {

      "id": "backend-platform",

      "enabled": true,

      "data": { "project": "Backend Platform", "deliverables": [] }

    }

  ]

}

```



For day-to-day editing, use one product JSON object per editor card. Raw JSON starts collapsed; click **Edit JSON** to reveal it. **Add Deliverable** appends a normalized deliverable object to that product, and **Load JSON Document** accepts a single product object, an array of product objects, or the wrapped `{ "documents": [...] }` export format.



## Customization



- **Products** — add one product JSON document per editor card. Add optional `order` numbers (`1`, `2`, `3`, …) when you want a fixed product sequence. Pick a product color from the edit drawer defaults or enter a custom hex code.

- **Deliverables** — click **Add Deliverable** on a product card to append a new task with owner, status, start/end month, due date, description, optional comma-separated tags, and optional favorite star.

- **Visibility** — use product checkboxes to toggle swimlanes on/off.

- **Title/Subtitle** — set `title` and `subtitle` in product JSON. The first enabled product controls the page title.

- **Date range** — edit the year loop in the `MONTHS` generator at the top of the HTML (default: 2026–2032).

- **Theme** — adjust the CSS variables in the `:root` block.



## Files



| File | Description |

|---|---|

| `Product-Roadmap.html` | The interactive roadmap artifact |

| `Product-Roadmap.md` | Schema and workflow documentation |

| `roadmap.schema.json` | Machine-readable JSON Schema for roadmap product objects, arrays, and wrapped exports |



## License



See `LICENSE`.