Timeline
The Timeline component (ui:timeline) renders a sequence of chronological events on a visual timeline. Each event has a date, title, and optional description and type. 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 |
|---|---|---|---|---|
date | string | Yes | — | The date or datetime string for the event (e.g. “2026-01-15”, “Q1 2026”). |
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”). |
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.- Dates are wrapped in `<time>` elements with machine-readable `datetime` attributes when the date string is ISO 8601 compatible.- Event markers 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 chronological order.