Timeline
The Timeline component (ui:timeline) renders a sequence of events as evenly-spaced markers along an axis. Each event has a free-form marker (label or date), a title, and an optional description and type. Events are laid out in the order you write them — the marker text is not parsed, so you can use any unit you want (seconds, dates, quarters, narrative phases, geological eras). The timeline can be oriented vertically or horizontally.
Example
View Glyph Markdown source
```ui:timelineevents: - date: "2026-01-15" title: Project kickoff description: Initial RFC published and repository created. type: milestone - date: "2026-01-22" title: Parser v0.1 description: "First working remark plugin for ui: fenced blocks." type: release - date: "2026-01-29" title: Compiler v0.1 description: Schema validation and IR generation complete. type: release - date: "2026-02-05" title: Runtime v0.1 description: React rendering of all 8 built-in components. type: release - date: "2026-02-12" title: Public beta description: First public release with documentation and playground. type: milestoneorientation: vertical```Horizontal timeline
View Glyph Markdown source
```ui:timelineevents: - date: Q1 2026 title: Alpha type: release - date: Q2 2026 title: Beta type: release - date: Q3 2026 title: GA type: milestoneorientation: horizontal```Timeline with varied event types
Use different type values to color-code events by category. This helps readers quickly scan for specific types of events.
View Glyph Markdown source
```ui:timelineevents: - date: "2025-03-01" title: v1.0 Release description: Initial stable release with core API. type: release - date: "2025-04-15" title: v1.1 Release description: Added new chart components and themes. type: release - date: "2025-05-01" title: Performance milestone description: Achieved sub-100ms render time for complex diagrams. type: milestone - date: "2025-06-01" title: Deprecated legacy API description: Old render() function marked deprecated. type: deprecation - date: "2025-07-01" title: v2.0 Breaking Changes description: New component API, removed legacy render function. type: breaking-change - date: "2025-08-15" title: Community event description: First GlyphJS community meetup. type: eventorientation: vertical```Horizontal roadmap timeline
Horizontal timelines work well for high-level roadmaps with fewer events.
View Glyph Markdown source
```ui:timelineevents: - date: Q1 2026 title: Research description: User research and technical feasibility. type: milestone - date: Q2 2026 title: Alpha description: Internal testing with core features. type: release - date: Q3 2026 title: Beta description: Public beta with documentation. type: release - date: Q4 2026 title: GA Release description: General availability with SLA. type: milestoneorientation: horizontal```Extended project history (12 events)
Long timelines benefit from the vertical orientation to maintain readability.
View Glyph Markdown source
```ui:timelineevents: - date: "2024-01-10" title: Project inception description: Initial idea documented in internal RFC. type: milestone - date: "2024-02-15" title: Team formed description: Core team of 3 engineers assembled. type: event - date: "2024-03-20" title: Tech stack decided description: Chose React, TypeScript, and Zod for validation. type: milestone - date: "2024-05-01" title: v0.1 Internal alpha description: First working prototype with basic components. type: release - date: "2024-06-15" title: Schema validation added description: Zod schemas for all component props. type: release - date: "2024-08-01" title: v0.5 Feature complete description: All 8 core components implemented. type: release - date: "2024-09-10" title: Accessibility audit description: WCAG 2.1 AA compliance verified. type: milestone - date: "2024-10-01" title: v0.9 Release candidate description: Final API freeze before 1.0. type: release - date: "2024-11-15" title: Documentation complete description: Full API reference and tutorials. type: milestone - date: "2024-12-01" title: v1.0 GA description: First stable release to production. type: milestone - date: "2025-02-01" title: v1.1 Themes description: Dark mode and custom theming support. type: release - date: "2025-04-01" title: 10k npm downloads description: Community adoption milestone. type: eventorientation: vertical```Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
events | Event[] | Yes | — | An array of event objects to display on the timeline. |
orientation | "vertical" | "horizontal" | No | — | Layout direction of the timeline. |
markdown | boolean | No | false | Enable inline markdown formatting in event title and description fields. |
Event object
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | At least one of label or date | — | Free-form marker shown above the title. Use whatever unit fits (e.g. “Phase 1”, “10:35am”, “3rd century BC”). Takes priority over date when both are set. |
date | string | At least one of label or date | — | Backwards-compatible alias for label. The string is rendered verbatim — no parsing or reformatting. |
title | string | Yes | — | The heading text for the event. |
description | string | No | — | Additional detail text shown beneath the title. |
type | string | No | — | A semantic type used for color-coding and grouping (e.g. “release”, “milestone”, “breaking-change”). |
Events render with uniform spacing in the order they appear in the array. Order events yourself — the renderer does not sort or compute positions from the marker text.
Markdown Support
Enable inline markdown in timeline events:
```ui:timelineevents: - date: "2024-01-15" title: "Version **2.0** Released" description: "Check out the [release notes](https://example.com) for all the new features." - date: "2024-02-01" title: "New `renderToString` API" description: "Server-side rendering is now *fully supported*."markdown: trueSupported formatting: **bold**, *italic*, `code`, [links](url)
[Learn more about markdown in components →](../guides/component-markdown)
## Orientation
- **vertical** -- Events are stacked top-to-bottom with dates on the left and content on the right. Best for long timelines and mobile layouts.- **horizontal** -- Events are arranged left-to-right along a horizontal axis. Best for short timelines and wide viewports.
When `orientation` is omitted, the renderer chooses a default based on the viewport and number of events.
## Event types
The `type` field is a free-form string that controls the visual style of the event marker. While any string is accepted, the following conventions are recommended:
| Type | Suggested use ||---|---|| `release` | Software releases and version launches. || `milestone` | Major project milestones and deadlines. || `breaking-change` | Backward-incompatible changes. || `deprecation` | Feature deprecation notices. || `event` | General events. |
Custom type strings receive a default neutral style.
## Accessibility
- The timeline renders as a semantic ordered list (`<ol>`) with each event as a list item.- Event markers (the dots and connector lines) are decorative and hidden from screen readers with `aria-hidden="true"`.- The timeline orientation does not affect the reading order -- events are always announced in array order.