Timeline Maker

What a timeline communicates that a list cannot

A bullet list tells you what happened; a timeline tells you when, and in what order, at a single glance. Laying events along an axis makes sequence, gaps, and clustering instantly visible — the three-month lull before a launch, the burst of activity around a release. This tool lets you build that view interactively: add events with a date, title, description, colour, and emoji icon, then arrange them on a vertical or horizontal axis. Everything is stored locally in your browser, so your timeline persists between visits and never touches a server.

How the tool builds your timeline

Each event you add becomes a card pinned to the axis. Internally the events are always sorted by date before rendering, so no matter what order you enter them in, they display chronologically. Dates are compared as plain YYYY-MM-DD strings, which sort correctly without any timezone surprises. You control three things about the presentation:

• Layout. Toggle between a vertical column — events stacked top to bottom along a coloured spine, good for reading on a phone — and a horizontal row that reads left to right like a classic history chart.
• Scale. Choose days, weeks, months, or years as the conceptual unit for how you think about spacing.
• Zoom. The plus and minus buttons scale the whole canvas between 0.3× and 2×, so you can fit a dense timeline on screen or enlarge a sparse one for a presentation.

Each event carries its own accent colour drawn from a palette of eight, and in the horizontal layout those colours blend into a gradient bar beneath the row — a small touch that makes a sequence feel like a continuous progression rather than disconnected dots.

A worked example

Suppose you are documenting a product launch. You add three events: 2024-01-01 "Project Kickoff" with a rocket icon, 2024-03-15 "Design Phase" with a palette icon, and 2024-06-30 "Launch" with a party icon. Even if you typed the launch first, the tool re-sorts so kickoff appears at the top of the vertical spine and launch at the bottom. The roughly two-and-a-half-month gap between kickoff and design, versus three-and-a-half months from design to launch, is visible immediately — something a plain list would bury. Want to reorder manually instead of by date? Drag any card and drop it onto another to swap their positions.

Editing, reordering, and exporting

• Inline editing. Every card has edit and delete buttons. Editing reopens the form pre-filled, so you can fix a date or rewrite a description without re-creating the event.
• Drag to reorder. Cards are draggable; dropping one onto another reorders them. This is handy when two events share a date and you want a specific reading order.
• Export to PNG. The export button draws your events onto a canvas — date, icon, title, and a trimmed description per row — and downloads a timeline.png. That makes it easy to drop the result into a slide deck, a document, or a chat without screenshotting.
• It remembers your work. The whole timeline is saved to your browser's local storage on every change. Close the tab and return later and your events, layout, and zoom are exactly as you left them.

Common use cases

The same tool serves very different needs. Project managers map milestones and hand-offs to spot scheduling crunches. Students and teachers lay out historical events — the causes of a war, the stages of a scientific discovery — where seeing the order is the whole point. Founders and marketers build a company "story so far" for a pitch or an about page. Writers plot a narrative's beats to check pacing. Individuals chart a personal résumé or a travel itinerary. Because each event holds an icon and colour, you can also encode a second dimension — for example, green for completed milestones and amber for planned ones.

Practical tips and common mistakes

• Keep titles short, push detail into the description. The card title is meant to be scannable; long titles wrap awkwardly, especially in the horizontal layout where each card is narrow. Save the specifics for the description field.
• Use colour as a category, not decoration. A timeline reads fastest when colour means something consistent — phase, owner, status. Random colours look busy and convey nothing.
• Always set a real date. Sorting depends on the date field, so an event with the wrong date jumps to the wrong place. The form requires both a date and a title for exactly this reason.
• Remember the storage is per-browser. Because the timeline lives in this browser's local storage, it won't follow you to another device, and clearing site data erases it. Export a PNG of anything you need to keep permanently.
• Zoom out before exporting a dense timeline. If you have many events, reduce the zoom so the full sequence fits the canvas cleanly before hitting Export PNG.