Build horizontal or vertical timelines with events, dates, descriptions, and color-coded categories.
Enter events as a title, a date, a description, and a category, and the tool lays them out along a single axis you can flip between horizontal, reading left to right, and vertical, reading top to bottom. Each category receives its own color, so events that share one category read as a single strand across the timeline, with a legend mapping colors to category names. The thing that surprises people most: position is driven entirely by dates. Markers appear in chronological order no matter what order you typed them, and events sharing a date land at the same point on the axis.
A concrete input and expected output from the current implementation.
Input
Title: Research phase | Date: 2024-01-10 | Category: Planning Title: Product launch | Date: 2024-06-15 | Category: Milestone Title: 1,000 users | Date: 2024-09-30 | Category: Growth
Expected output
A horizontal timeline spanning January 10 to September 30, 2024, with three markers in chronological order: Research phase (2024-01-10), Product launch (2024-06-15), and 1,000 users (2024-09-30). Planning, Milestone, and Growth each render in a distinct color, so the three strands can be followed across the chart, with a legend matching each color to its category name.
Markers are sorted by date, so the order of entry does not matter; the output order follows 2024-01-10, then 2024-06-15, then 2024-09-30. Each of the three categories maps to one color, which is what makes the strands traceable.
Each event contributes a date, a title, a description, and a category. The tool parses the dates, assigns each category its color, and positions markers on the axis in chronological order, so the order you type events in is irrelevant. Events that share a date occupy the same position, and a category color carries across every event in that category, keeping each strand traceable end to end.
One toggle switches the axis between horizontal, with markers advancing left to right, and vertical, with the spine running top to bottom and event cards arranged along it. Dates label each marker, descriptions render next to them, and a legend maps category colors to names so the chart stays readable as categories multiply.
They land at the same point on the axis, so their markers sit together and the labels can collide. The axis responds only to the dates you enter, so there is no ordering between same-date events to set elsewhere. Give one event a time of day, or shift one to a nearby date, if the labels overlap.
The tool runs entirely in the browser and nothing you enter is uploaded. There is no account or server-side copy, so your work is not stored anywhere beyond the open page: reloading may clear your events. Screenshot the finished timeline if you need a permanent copy.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.