Timeline

Fission

Product

▾

Setup

›

›

Timeline is the chronological sequence widget.

Use it when order matters more than tabular comparison. Timelines work well for activity feeds, deployment history, message milestones, shipping updates, and audit trails.

Example

use fission::prelude::*;

let widget: Widget = Timeline {
    items: vec![
        TimelineItem {
            title: "Queued".into(),
            description: Some("Waiting for an available runner".into()),
            timestamp: Some("09:58".into()),
        },
        TimelineItem {
            title: "Running".into(),
            description: Some("Tests are executing".into()),
            timestamp: Some("10:03".into()),
        },
    ],
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
items	Vec<TimelineItem>	Events shown from top to bottom.	Defaults to an empty list.

Layout and usage guidance

The checked-in renderer draws a dot and vertical connector line for each item, then stacks the event content beside it. This makes the widget easy to scan in a single column.

A timeline is strongest when entries represent real moments in a meaningful order. If users mostly need to compare attributes across many rows, a table is usually the better fit.

Specific advice

Avoid stuffing a full paragraph into every event. Timelines stay readable when the title carries the main meaning and the description adds only the context that helps the user decide what happened.

Production checklist

For Timeline, review the fields that change behavior before treating the widget as finished: items. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Timeline setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

TimelineItem, DataTable, Alert, and Card.