How do I add an event?

Click 'Add Event', fill in the date, title, and optional description, and choose a colour. The event appears on the timeline immediately.

Can I reorder events?

Yes. Drag any event card to a new position in the list, or click 'Sort by Date' to automatically arrange all events in chronological order.

What is the difference between SVG export and HTML copy?

SVG export downloads a vector file suitable for presentations, print, or further editing in tools like Figma or Illustrator. HTML copy gives you embeddable markup you can paste into a web page.

Can I switch between horizontal and vertical layouts?

Yes. Use the 'Horizontal / Vertical' toggle at the top to switch layouts at any time. Both layouts show all the same events.

Productivity Free No signup

Timeline Generator

Create and export visual timelines with drag-and-drop events

Loading tool…

About this tool

Build professional-looking timelines right in your browser. Add events with a date, title, description, and custom colour. Toggle between a vertical scrolling layout and a horizontal timeline view. Drag events to reorder them, or click 'Sort by Date' for automatic chronological ordering. When your timeline is ready, export it as a scalable SVG file or copy the raw HTML to embed anywhere — no account, no watermark, completely free.

How to use

1 Click 'Add Event' and fill in the date, title, description, and colour.
2 Repeat to add as many events as you need.
3 Drag events to reorder them, or click 'Sort by Date' for chronological order.
4 Toggle between Horizontal and Vertical layouts using the switch.
5 Click 'Export SVG' to download a vector image, or 'Copy HTML' to get embeddable markup.

Frequently Asked Questions

Related tools

Countdown Timer

Set multiple named countdown timers to any target date and watch them tick live.