Timeline Maker

Timeline Maker is a free browser-based tool for creating clean, visual timelines — project roadmaps, historical timelines, personal milestones, or any sequence of events.

It supports two layouts: Vertical (classic alternating-card style) and Horizontal (swimlane style, great for project phases). Each event gets a title, optional start and end dates, a description, and a colour. Events can be ordered automatically by date or dragged into a custom order. Your timeline saves automatically in the browser — no account required.

Export options include PNG (for presentations or sharing) and PDF (for printing or documents). You can also copy the timeline data as JSON and import it back at any time.

• Add events using the "Add Event" button in the sidebar. Fill in the title (required), dates, description, and pick a colour.
• Edit or delete any event by hovering over it in the sidebar list and clicking the edit (pencil) or delete (bin) icon.
• Reorder events by dragging them in the sidebar list. Turn off "Sort by Date" first to enable free ordering.
• Switch layouts between Vertical and Horizontal using the buttons above the canvas.
• Toggle options: show/hide dates and years, or enable date-based auto-sorting.
• Export: click PNG or PDF in the canvas toolbar. The download captures the entire timeline canvas.
• Backup: use "Copy as JSON" to save the full timeline data. Paste it back with "Import JSON" to restore.

All state is managed with Alpine.js v3 and persisted to localStorage — the timeline auto-saves on every change and is restored on page load. Event ordering follows either ISO 8601 date sorting (new Date(dateString)) or the user's custom drag order stored in array position.

The vertical layout uses a two-column CSS Grid with alternating nth-child(odd/even) placement. The horizontal layout uses min-width: max-content flex rows with events staggered above and below the central line by index parity.

Export uses html2canvas (rendered at 2× scale for retina quality) then jsPDF for PDF output. Both libraries are loaded on-demand via dynamic import() from jsDelivr CDN so they don't affect initial page load. JSON import/export uses JSON.parse / navigator.clipboard, with new id values assigned on import to prevent collisions.