What this tool does

The Timeline Builder turns a list of dated events into a clean horizontal timeline you can drop into a slide, a README, or a roadmap doc. Each event has a name, start and end dates, a lane (the row it sits in), and a color, and the chart auto-bounds, scrolls, and zooms around them.

When you're done, hit Export SVG and you get a vector file that scales to any size without re-rendering.

How to use it

1. Edit events on the left. The default sample shows six events across four lanes (Engineering, Design, Launch, Research). Click into any field to change name, dates, lane, or color. Add new events with the + button; remove with the trash icon. 2. Pan and zoom on the right. Drag inside the chart to pan horizontally. Wheel-scroll to pan; Shift + wheel to zoom. Or use the +/- buttons in the toolbar. The "Fit" button resets to show all events. 3. Switch the layout between side-by-side (editor + chart) and stacked (editor above, chart below), useful on narrow screens. 4. Export. The SVG export contains the lane labels, axis ticks, every bar, and the dot for single-day events. Open it in any vector editor or paste it into a Markdown doc.

How the chart is built

The horizontal axis is time in days, computed from the earliest start date to the latest end date plus 5% padding on each side. Zoom multiplies the visible day range; pan offsets it. All the math runs in pure JS, there's no D3 or chart library, which makes the SVG export trivial because the rendered chart is the export target.

Lanes are drawn as horizontal stripes. Events sit inside their lane at the date range you specified. ==Single-day events (start = end) render as a 10px dot==; multi-day events render as a colored bar with the name inside if it fits, or above if it doesn't.

The axis emits one tick per month; year labels appear above the month strip and stick to the visible range as you pan, so you always know what year you're looking at.

Picking lanes and colors

The four default lanes are a starting suggestion (Engineering / Design / Launch / Research), not a constraint, type any string and that becomes a lane. New lanes appear automatically; empty lanes disappear when you remove their last event.

Seven swatch colors are pre-baked: ink, brand blue, green, ochre, red, purple, teal. Use color to encode something meaningful, phase, owner, risk level, rather than picking randomly. A timeline with one color per phase reads instantly; a rainbow timeline reads like noise.

Auto-save and reload

Your current event list is auto-saved to localStorage under the key zk-tb-current. Reload the page and the timeline restores. There's no "save" button because the save is implicit; there's no "open" button because there's no file format. To clear the timeline, delete every event or clear your browser's site data.

Common gotchas

  • Date format is YYYY-MM-DD. The native HTML5 date input enforces this. If you paste from another format, the input rejects it silently, keep dates in ISO 8601 form.
  • Events are sorted by lane, not by date. Within each lane they appear in the order you added them. Drag-reordering inside a lane isn't supported in this version, the chart shows everything regardless of array order, so it doesn't matter visually.
  • Single-day events vs. one-day-range. start = end = 2026-03-28 renders as a dot. start = 2026-03-28, end = 2026-03-29 renders as a one-day bar. Both are valid; pick whichever reads better in your context.
  • The SVG is not a Gantt chart. There are no dependencies, no critical path, no resource leveling. It's a visual timeline, if you need scheduling logic, use a real project tool.

Privacy

Events, the rendered chart, and the SVG export are all generated in your browser. The auto-save uses localStorage, which is per-origin and never sent to a server. Nothing about your timeline (event names, dates, customer names you might use as labels) leaves the device.

Frequently asked

Are my events stored on a server?

No. Events live in your browser's localStorage under the key zk-tb-current. They're not synced, not backed up, not visible to anyone else. Clearing site data removes them.

What's the difference between a single-day event and a one-day range?

A single-day event (start = end on the same date) renders as a small dot. A one-day range (e.g. start 2026-03-28, end 2026-03-29) renders as a thin bar. Both are valid; pick whichever reads cleaner in context — dots for milestones, bars for short tasks.

Can I import a CSV or JSON file?

Not in the current version. Events are entered through the structured editor. To bulk-load, paste a JSON array into localStorage under zk-tb-current via your browser devtools — the schema is { id, name, start, end, lane, color } per event.

How do I add or remove a lane?

Lanes are derived from the events themselves — every distinct lane string appears as a row. Type a new lane name on any event to create it; remove the last event in a lane and that row disappears automatically. There's no separate lane manager.

What does the SVG export include?

Lane labels, the month/year axis, every event bar (and dot), and the visible viewport. It's a static snapshot of the current zoom and pan — adjust the view before exporting if you want a different range. The file scales to any size in Figma, Illustrator, or print.

Why doesn't this support dependencies or critical path?

It's a timeline, not a Gantt chart. Dependencies, slack, and critical-path analysis belong to project-management tools that own the scheduling model. This tool is for sketching a visual narrative quickly without that overhead.

How do I share a timeline with someone else?

Export the SVG and send the file. There's no shareable link because nothing is server-side — your data lives in your browser only. The SVG renders identically in any modern browser or vector editor.

Can I have overlapping events in the same lane?

Yes — the chart draws them in array order, so a later event paints over an earlier one in the overlap region. If you want both visible, give them different lanes. Splitting overlapping work into separate lanes is usually clearer anyway.

Related tools