← All projects
SoftwareReactViteSVGProductivityCompleted

HighLevel Gantt — SVG Roadmap Timeline

A browser-based Gantt chart and executive scorecard builder that renders everything in pure SVG. Paste text, upload CSV, or load JSON — export to PNG or PDF instantly.

March 5, 2026


Overview

I kept running into the same problem building roadmaps: every tool either locks you into a subscription, produces blurry exports, or requires wrestling with a spreadsheet. I wanted something that runs entirely in the browser, accepts plain text, and produces crisp output at any size — so I built HighLevel Gantt.

Everything renders as pure SVG — no canvas, no D3. That means the chart scales perfectly for PDF and PNG exports at any resolution.

How It Works

You bring your data in one of three ways:

  • Structured text — paste a simple format directly into the Input panel and hit Ctrl+Enter
  • CSV upload — drag-and-drop a .csv onto the panel; a ready-to-use template is included
  • JSON round-trip — save the full chart state (data + all settings) and reload it later exactly as-is

The parser handles eight date formats, from Mar 2026 to 20260315, all snapped to the first of the month for timeline placement.

Two Views

Gantt is the main timeline view. Tasks group into workstreams, bars show optional completion percentage as a progress overlay, and a draggable "We Are Here" line marks the current date. Columns are resizable, label placement is configurable (inside bars or in a dedicated column), and the timeline scale switches between Weeks, Months, Quarters, or Years.

Scorecard flips the same data into an executive-ready artifact — one card per workstream, with a donut chart per task showing completion. Multi-page layouts export as separate PNG or SVG files per page.

Controls

  • Period to Show — crop the visible window without touching the underlying data
  • Time Labels — switch between calendar dates or relative labels (Y1 / M1 / W1)
  • Per-workstream colors — bar fill and lane background, each independently configurable
  • Export — PNG at 2× resolution, landscape PDF, or SVG

Stack

LibraryRole
React 18 + Vite 5UI framework and build tool
date-fns 3Date parsing, formatting, tick generation
jsPDFPDF export
html2canvasSVG → raster for PNG/PDF

No backend, no dependencies beyond npm — ships as a static site.