Timeline Generator

What this timeline generator does

A timeline turns a list of dated events into a single picture that shows order and spacing at a glance. This tool lets you build one event by event — each with a date, title, description, and color — then arrange them and export the result two ways: as a standalone SVG image you can download, or as a block of inline-styled HTML you can paste into a page. Everything is generated in your browser; nothing is uploaded.

You add and edit events through a small form, reorder them by dragging, and switch between a vertical and a horizontal layout. Both the on-screen list and the exports use each event's color as a left border or a connector dot, so a project's phases stay visually distinct.

Two layouts, two shapes of story

The vertical layout stacks events down a single line, with the date to the left of each dot and the title and a trimmed description to the right. It scales to any number of events and reads like a list, which suits detailed project logs or histories. The horizontal layout spreads events left to right along a center line and alternates them above and below it — the classic "milestone" look. The SVG for it widens automatically (roughly 180px per event, minimum 900px) so labels do not collide, making it a good fit for roadmaps and presentation slides where a handful of key dates need room to breathe.

A worked example

Start with the four sample events — Project Kickoff (Jan 15), First Milestone (Mar 1), Public Launch (Jun 20), and Version 2.0 (Sep 10). Click Sort by date and the tool orders them chronologically, pushing any event with no date to the end. Switch to the horizontal layout and export: the generator produces an SVG where each milestone sits on the center line as a colored dot, with the date and title stacked above or below in alternation, and a light dashed line linking dot to label. Open that SVG anywhere — it is a self-contained vector image with no external dependencies, so it stays crisp at any size and prints cleanly.

How the exports differ

The HTML export always renders as a vertical, stacked layout regardless of the on-screen mode, and it carries its styles inline (border color, padding, font) so it survives being pasted into a CMS or email without a separate stylesheet. The SVG export follows whichever layout — vertical or horizontal — you currently have selected.

Common use cases

• Project roadmaps — kickoff, milestones, launch, and follow-up releases, color-coded by phase.
• Company or product history for an "About" page or pitch deck.
• Process and onboarding diagrams where steps happen in a fixed order.
• Study and teaching aids — historical events, a book's plot, or the stages of an experiment.

Tips and common mistakes

• Use the date field, then sort. Drag-reordering is great for fine-tuning, but the quickest way to a correct chronology is to fill in real dates and press Sort by date. Events left undated drift to the bottom rather than guessing a position.
• Keep horizontal timelines to a handful of events. Although the canvas widens per event, a dozen milestones produce a very wide image that is awkward on a slide. Use the vertical layout for long, dense lists.
• Color with intent. Assign one color per phase or category rather than picking at random — the palette is what makes the timeline readable at a glance.
• Mind description length in graphics. The vertical SVG trims a description to about 60 characters with an ellipsis to keep the layout tidy, so put the essential words first. The HTML export keeps the full text.
• Re-export after edits. The SVG and HTML are snapshots taken when you click export — change an event and you will need to export again to capture it.