HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TimelineView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA list of events, in the order they happened.StableSince 0.1.0DataUsageimport'@fusion.dev/helix/timeline'import'@fusion.dev/helix-headless/timeline'Preview
API ReferenceRoothelix-timelineA list of events, in the order they happened.
PropTypeDescriptionlabelstringDefault""Accessible name for the timeline, for people who reach it out of context.layout"alternate"|"opposite"Where the entries sit beside the line: opposite puts the times on one
side and what happened on the other, and alternate puts every other
entry on the other side. Unset, the line runs down the start edge.loadingbooleanDefaultfalseMarks the timeline as busy fetching more entries, and draws an entry
after the last that says so.loadingLabelstringDefault"Loading more"The text of the entry drawn while loading is set, where the loading slot is empty.orientation"horizontal"Which way time runs: horizontal lays the entries across the page. Unset,
they run down it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entries, and any groups of them.loadingContent for the entry after the last while loading is set. Falls back to loading-label.
PartDescriptionloadingThe entry after the last while loading is set.
CSS PropertyDescription--timeline-gapSpace between one entry and the next.
Custom stateDescriptionloadingWhile loading is set.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-timeline-groupA run of timeline entries under a heading, such as a day.
PropTypeDescriptionheadingLevelnumberThe level of the group's heading, from 1 to 6.labelstringDefault""The heading, when it is plain text, such as "Today".
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entries.headingThe heading, when it is more than text. Falls back to label.
PartDescriptionentriesThe list that holds the entries.headingThe heading.
CSS PropertyDescription--timeline-group-heading-colorThe color of the heading.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-timeline-itemOne event on a timeline: when it happened, and what it was.
PropTypeDescriptiondatetimestringDefault""When it happened, in machine-readable form. Setting it wraps the time in a
<time> element.pendingbooleanDefaultfalseMarks an event that has not happened yet, such as one that is scheduled.
The mark is the open circle, and a screen reader hears pending-label.pendingLabelstringDefault"Scheduled"What a screen reader hears for an entry that is pending.relative"long"|"narrow"|"short"Writes the time as how long ago it was, or how long until it, from
datetime, where the time slot is empty: long ("3 hours ago"),
short ("3 hr. ago") or narrow ("3h ago"). Set with no value, it is
long. The words move on as they go stale.tone"danger"|"info"|"neutral"|"primary"|"success"|"warning"The kind of event. It sets the color of the mark, and a screen reader
hears it as the word tone-labels gives it.toneLabelstringDefault""What a screen reader is told this entry's tone is, such as "Failed".
Absent is the tone's word in tone-labels.toneLabelsPartial<Record<TimelineTone, string>>Default{ danger: "Error", info: "Information", success: "Success", warning: "Warning", }What a screen reader is told each tone is, by the tone's name, written as
JSON in the attribute: tone-labels='{"danger":"Failed"}'. A tone with no
word is not read, which is neutral and primary in English.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What happened.markerThe mark on the line. Defaults to a dot, which is the slot's fallback content. A mark you slot is read as the tone's word, where the entry has one.timeWhen it happened, written the way you want it shown.
PartDescriptioncontentWhat happened, and the time above it.dotThe dot drawn when no marker is slotted.markerThe mark on the line. An image named by the tone's word, and by pending-label, where either applies.railThe column that holds the mark and the line. Draw the two halves of the line with ::part(rail)::before and ::part(rail)::after in your stylesheet. This tier ships no CSS and renders no extra box for the line.timeWhen it happened.
CSS PropertyDescription--timeline-column-gapSpace between the rail and the time and what happened.--timeline-marker-colorThe color of the mark on an entry with no tone. A tone colors the mark itself.--timeline-marker-radiusHow round the mark is. Zero is a square, and half its size is a disc.--timeline-marker-sizeEdge length of the mark.--timeline-rail-colorThe color of the line.--timeline-rail-sizeWidth of the line.--timeline-time-colorThe color of the time.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-timelineA list of events, in the order they happened.
PropTypeDescriptionlabelstringDefault""Accessible name for the timeline, for people who reach it out of context.loadingbooleanDefaultfalseMarks the timeline as busy fetching more entries, and draws an entry
after the last that says so.loadingLabelstringDefault"Loading more"The text of the entry drawn while loading is set, where the loading slot is empty.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entries, and any groups of them.loadingContent for the entry after the last while loading is set. Falls back to loading-label.
PartDescriptionloadingThe entry after the last while loading is set.
Custom stateDescriptionloadingWhile loading is set.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-headless-timeline-groupA run of timeline entries under a heading, such as a day.
PropTypeDescriptionheadingLevelnumberThe level of the group's heading, from 1 to 6.labelstringDefault""The heading, when it is plain text, such as "Today".
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The entries.headingThe heading, when it is more than text. Falls back to label.
PartDescriptionentriesThe list that holds the entries.headingThe heading.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Itemhelix-headless-timeline-itemOne event on a timeline: when it happened, and what it was.
PropTypeDescriptiondatetimestringDefault""When it happened, in machine-readable form. Setting it wraps the time in a
<time> element.pendingbooleanDefaultfalseMarks an event that has not happened yet, such as one that is scheduled.
The mark is the open circle, and a screen reader hears pending-label.pendingLabelstringDefault"Scheduled"What a screen reader hears for an entry that is pending.relative"long"|"narrow"|"short"Writes the time as how long ago it was, or how long until it, from
datetime, where the time slot is empty: long ("3 hours ago"),
short ("3 hr. ago") or narrow ("3h ago"). Set with no value, it is
long. The words move on as they go stale.tone"danger"|"info"|"neutral"|"primary"|"success"|"warning"The kind of event. It sets the color of the mark, and a screen reader
hears it as the word tone-labels gives it.toneLabelstringDefault""What a screen reader is told this entry's tone is, such as "Failed".
Absent is the tone's word in tone-labels.toneLabelsPartial<Record<TimelineTone, string>>Default{ danger: "Error", info: "Information", success: "Success", warning: "Warning", }What a screen reader is told each tone is, by the tone's name, written as
JSON in the attribute: tone-labels='{"danger":"Failed"}'. A tone with no
word is not read, which is neutral and primary in English.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What happened.markerThe mark on the line. Defaults to a dot, which is the slot's fallback content. A mark you slot is read as the tone's word, where the entry has one.timeWhen it happened, written the way you want it shown.
PartDescriptioncontentWhat happened, and the time above it.dotThe dot drawn when no marker is slotted.markerThe mark on the line. An image named by the tone's word, and by pending-label, where either applies.railThe column that holds the mark and the line. Draw the two halves of the line with ::part(rail)::before and ::part(rail)::after in your stylesheet. This tier ships no CSS and renders no extra box for the line.timeWhen it happened.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionAlternateEvents either side of a line down the middle, each on the other side from the one before.GroupedEvents grouped by day, each day under a heading.HorizontalEvents side by side along a line across the page.OppositeEvents with the time on one side of the line and what happened on the other.PreviewEvents down a line, each with its own mark and time.PreviewEvents down a line, each with its own mark and time.