Timeline Generator

📖 About This Tool

Project reviews, company histories, product roadmaps and the experience section of a resume all answer the same question: what happened, and when. A timeline answers it better than prose. Lines of text hide the pacing, whereas laid out on an axis you can see at a glance which phases were crowded and which had gaps.

Input is deliberately plain: one node per line as date, title, description. Paste it in and the timeline appears, with no boxes to drag around a template. Common date formats are accepted and nodes are sorted chronologically, so even a scrambled list comes out in order. The description is optional; date and title alone will do.

Two orientations are available. Horizontal suits a small number of nodes on a wide page or slide; vertical suits longer lists in documents or web pages. Colour theme, node shape (dot, square, diamond), connector style, font size and whether nodes alternate sides are all adjustable, and the figure redraws as you change them. A title, subtitle and the covered date range are placed on the axis automatically.

Three exports: PNG for pictures, SVG for further work in a design tool, and HTML as a self-contained fragment with inline styles that you can drop into a page or an email without any external assets. Everything is generated locally in the browser, with no network request and nothing uploaded.

Spacing along the axis follows the number of nodes instead of being fixed, so three events spread out while twenty stay readable. In vertical mode the axis sits on the left by default and nodes alternate either side of it when that option is on, which stops long descriptions from colliding. Horizontal mode puts the date above the node and the description below, and shortens the connector where the gap between two dates is unusually wide. Both orientations export identically, so you can switch late without redoing any of the node data.

✨ Features

• Bulk text entry: one node per line, comma separated date, title and description.
• Automatic sorting: nodes are reordered by date even if entered out of order.
• Two orientations: horizontal for wide pages, vertical for longer lists.
• Style controls: palette, node shape, connector style, font size, alternating sides.
• Node management: add or remove individual nodes, or clear and start again.
• Three exports: PNG bitmap, SVG vector, and a standalone HTML fragment.

🚀 How to Use

1. Fill in nodes one per line as date, title, description.
2. Choose horizontal or vertical, plus a palette and node shape.
3. Press generate and the timeline appears on the right.
4. Fine tune by adding or removing nodes, or adjust font size and alternation.
5. Export PNG, SVG or HTML when it looks right.

⚠️ Notes

• Date format: prefer the full 2024-03-22 form; unparseable dates are pushed to the end and flagged.
• Node count: more than about 12 nodes gets cramped horizontally, so switch to vertical.
• Description length: long text wraps automatically, but keep it to two lines in horizontal mode.
• HTML export: the fragment carries inline styles, which some editors strip, so preview first.
• Nothing is saved: refreshing clears your nodes, so export in time.