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 無料サインアップ不要

Timeline Generator

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

ツールを読み込み中…

このツールについて

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.

使い方

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.

このツールについて

使い方

よくある質問