HelixOverviewDocsComponentsSandboxTheme builderMapsBuildingGraphBuildingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
LogView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorOutput that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.ExperimentalSince 0.200.0FeedbackUsageimport'@fusion.dev/helix/log'import'@fusion.dev/helix-headless/log'Preview
API ReferenceRoothelix-logOutput that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.
PropTypeDefaultDescriptiondefaultPinnedbooleantrueWhether the log opens following its newest line, when pinned is not set.
default-pinned="false" opens it where it starts.donebooleanWhether the run is over, which a screen reader is told once.doneLabelstring"Finished"What a screen reader hears when the run is over.droppedLabelstring"{count, plural, one {# earlier line is} other {# earlier lines are}} not kept"What the line above the log says once limit has let lines go. {count} is how many.emptyTextstring"Nothing to show"The text shown and announced when there are no rows and none are loading.errorLabelstring"{count, plural, one {Error} other {# errors}}: {text}"What a screen reader hears when lines at error arrive. {count} is how
many arrived together and {text} is the first of them.fallbackLabelstring"Log"The log's name, read by screen readers, where label is empty.groupLabelstring"{status, select, failed {{heading} failed} other {{heading} finished}}"What a screen reader hears when a step finishes or fails. {heading} is
the step's heading and {status} is done or failed.groupsreadonlyLogGroup[][]The steps the lines from data name in group. A step stands where its
first line is, and one with no line yet stands at the end.labelstring""The log's name, read by screen readers.limitnumber0The most lines kept, or 0 to keep them all. Past it the oldest lines are
let go, and the line above the log says how many.lineHrefstring""A link for each line number, with {n} where the number goes, such as
#L{n}. Empty leaves the numbers as text.lineLabelstring"Line {number}"What a screen reader hears for the link on a line's number, handed to each
line the log draws. {number} is the number.lineNumbersbooleanfalseWhether each line shows its number.linesreadonlyLogLine[]The lines as data. Reading it gives every line kept, oldest first, with
the line still being written left out.loadingbooleanfalseWhether the rows are still loading.loadingTextstring"Loading"The text shown and announced while the rows load.markLinesstring""Lines to mark, as numbers and ranges such as 12, 40-44.matchesLabelstring"{count, plural, =0 {No lines match} one {# line matches} other {# lines match}}"What a screen reader hears when query changes. {count} is how many lines match.parseLogParserReads each finished line of written text: return the fields to set, such
as level or group, or null to drop the line. Lines in lines are
taken as they are.pinnedbooleanWhether the log follows its newest line.querystring""Text a line has to hold to be shown, ignoring case. Empty shows every line.resumeLabelstring"Jump to latest"The words on the button that returns to the newest line, where resume is empty.sourceLogSource|nullText to read as it arrives, to the end: a ReadableStream of text or
bytes, such as a fetch response's body, or an async iterable. Bytes are
read as UTF-8. The log sets done when it ends, and a new source stops
reading the last one.thresholdnumber48How near the newest line still counts as being at it, in pixels.timestamps"absolute"|"relative"How each line shows its at: absolute on the clock, relative as the
time since the first line. Absent shows no time.wrapbooleanfalseWhether a line longer than the box wraps onto the next row. Otherwise the log scrolls sideways.
ReadTypeDescriptiontextstringEvery line kept, as plain text with the escape codes taken out, one to a
row: what a download or a copy of the log should hold.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The lines, as Log.Line and Log.Group elements.resumeThe control that returns to the newest line, shown while the reader is scrolled away. Defaults to a button named by resume-label.toolbarControls above the log, such as a search field or a button that wraps lines.
EventTypeDescriptionhelix-before-pinHelixBeforePinEventFired when the reader leaves the newest line by scrolling, or comes back to it. Cancelable.helix-expandHelixExpandEventFired after a reader opens or closes a group drawn from groups, with the id of every open group in detail.value, separated by commas.helix-pinHelixPinEventFired after the log follows the newest line or lets go of it, with true or false in detail.value.
MethodTypeDescriptionclear() => voidLets every line go, and forgets which groups the reader opened, keeping
groups, parse, and limit.resume() => voidPuts the log back at its newest line, and follows it again.scrollToLine(number: number, options: LogScrollOptions) => Promise<boolean>Scrolls to line number, counted from the first line ever written, and
stops following the newest. Opens a shut group the line is in. Resolves
to whether the line is shown: false for a line limit let go or query
hides.write(chunk: string) => voidAdds text as it arrives. A line ends at each line break, and the text
after the last one is the line still being written.
PartDescriptionafterThe space the rows below the drawn ones would take. Only for lines drawn from data.beforeThe space the rows above the drawn ones would take. Only for lines drawn from data.droppedThe line above the log that says how many earlier lines limit let go.emptyShown when the log has no lines.group-contentNot drawn: a group drawn from data stands for its heading, and its lines are rows beside it.group-durationHow long a step drawn from groups took.group-headingThe heading of a step drawn from groups.group-markThe caret of a step drawn from groups.group-statusThe status mark of a step drawn from groups.group-summaryThe button that opens and closes a step drawn from groups.group-summary-doneThe button of a step drawn from groups that is done.group-summary-failedThe button of a step drawn from groups that failed.group-summary-pendingThe button of a step drawn from groups that is pending.group-summary-runningThe button of a step drawn from groups that is running.group-summary-skippedThe button of a step drawn from groups that was skipped.lineThe row of a line drawn from data.line-debugThe row of a line drawn from data at debug.line-errorThe row of a line drawn from data at error.line-markedThe row of a line drawn from data that mark-lines names.line-matchText in a line drawn from data that matches query.line-numberThe number of a line drawn from data.line-runA stretch of a line drawn from data in an ANSI style.line-run-boldA run drawn bold.line-run-dimA run drawn faint.line-run-italicA run drawn italic.line-run-strikeA run drawn struck through.line-run-underlineA run drawn underlined.line-textThe text of a line drawn from data.line-timeThe time of a line drawn from data.line-warnThe row of a line drawn from data at warn.liveThe region where screen readers hear errors, finished steps, and the end of the run.loadingShown while loading is set.logThe lines, which scroll. On this tier, it needs only a block size.resumeThe control shown while the reader is scrolled away from the newest line.resume-buttonThe button the resume region shows when nothing is slotted into it.resume-markThe arrow on the default resume-button.rowThe wrapper around one row drawn from data, a line or a group's heading.toolbarThe toolbar slot, above the log.
CSS PropertyDescription--log-ansi-backgroundThe background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier.--log-ansi-blackThe ANSI color black, which codes 30 and 40 draw.--log-ansi-blueThe ANSI color blue, which codes 34 and 44 draw.--log-ansi-bright-blackThe ANSI color bright black, which codes 90 and 100 draw.--log-ansi-bright-blueThe ANSI color bright blue, which codes 94 and 104 draw.--log-ansi-bright-cyanThe ANSI color bright cyan, which codes 96 and 106 draw.--log-ansi-bright-greenThe ANSI color bright green, which codes 92 and 102 draw.--log-ansi-bright-magentaThe ANSI color bright magenta, which codes 95 and 105 draw.--log-ansi-bright-redThe ANSI color bright red, which codes 91 and 101 draw.--log-ansi-bright-whiteThe ANSI color bright white, which codes 97 and 107 draw.--log-ansi-bright-yellowThe ANSI color bright yellow, which codes 93 and 103 draw.--log-ansi-cyanThe ANSI color cyan, which codes 36 and 46 draw.--log-ansi-foregroundThe text color a run takes where ANSI swaps the colors and named none. Defaults to the log's own text color on the styled tier.--log-ansi-greenThe ANSI color green, which codes 32 and 42 draw.--log-ansi-magentaThe ANSI color magenta, which codes 35 and 45 draw.--log-ansi-redThe ANSI color red, which codes 31 and 41 draw.--log-ansi-whiteThe ANSI color white, which codes 37 and 47 draw.--log-ansi-yellowThe ANSI color yellow, which codes 33 and 43 draw.--log-background-colorThe fill behind the lines. Defaults to the page background.--log-border-colorThe edge around the log and the rules inside it.--log-colorThe text color of the lines.--log-digitsWritten on the log: how many digits the largest line number has, while line-numbers is set, so a stylesheet can size the column of numbers.--log-font-familyThe face of the lines. Defaults to the monospaced face.--log-font-sizeThe size of the lines. Defaults to the small text step.--log-line-heightThe height of one line.--log-max-block-sizeHow tall the log may get before the lines scroll. Defaults to 30rem.--log-padding-inlineSpace either side of every line and heading.--log-radiusThe corners of the log.--log-scrollbar-thumb-colorThe thumb of the scrollbar. Defaults to --helix-scrollbar-thumb-color.--log-scrollbar-track-colorThe track of the scrollbar. Defaults to --helix-scrollbar-track-color.
Custom stateDescriptiondoneThe run is over: done is set, or source ended.emptyThe log has no lines.filteredquery is set, so only matching lines are shown.pinnedThe log follows its newest line.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-log-groupOne step of a log, which folds its lines under a heading with its status and how long it took.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseWhether the element starts open. Ignored once open is written.durationstring""How long the step took, as it should read, such as 12s.headingstring""What the step is called. The heading slot replaces it.openbooleanWhether the element is open.status"done"|"failed"|"pending"|"running"|"skipped"Where the step stands, which draws a mark before the heading.statusLabelstring"{status, select, pending {waiting} running {running} done {finished} failed {failed} skipped {skipped} other {}}"What a screen reader hears for the status, after the heading.
{status} is one of pending, running, done, failed, and skipped.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The lines of the step, and any groups inside it.headingThe heading, where it holds more than text. Defaults to heading.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before the group closes. Cancelable.helix-before-openHelixBeforeOpenEventFired before the group opens. Cancelable.toggleToggleEventFired after the group opens or closes, with newState and oldState.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe lines, hidden while the group is shut.durationHow long the step took.headingThe heading.markThe caret that turns as the group opens, an <svg> you size.statusThe mark for the status, an <svg> you size.summaryThe button that opens and closes the group.
Custom stateDescriptionopenThe group shows its lines.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Linehelix-log-lineOne line of a log, with its number, its time, and its text.
PropTypeDefaultDescriptionatnumber|string""When the line was written: milliseconds since the epoch, or anything Date parses.level"debug"|"error"|"info"|"warn"How much the line matters. Absent is info.lineLabelstring"Line {number}"What a screen reader hears for the link on a line's number. {number} is the number.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The text of the line.
PartDescriptionlineThe row the number, the time, and the text sit in.line-debugThe row of a line at debug.line-errorThe row of a line at error.line-markedThe row of a line mark-lines names on the log.line-warnThe row of a line at warn.matchText that matches the log's query, in a line the log draws from data.numberThe line's number, shown with line-numbers, and a link with line-href.runA stretch of text drawn in an ANSI style, in a line the log draws from data. Its color is --log-run-color and its background --log-run-background-color.run-boldA run drawn bold.run-dimA run drawn faint.run-italicA run drawn italic.run-strikeA run drawn struck through.run-underlineA run drawn underlined.textThe text of the line.timeWhen the line was written, shown with timestamps.
CSS PropertyDescription--log-error-colorThe color of a line at error, and of the band behind it. Defaults to the danger color.--log-mark-background-colorThe band behind a line mark-lines names.--log-match-background-colorThe fill behind text that matches the log's query.--log-run-background-colorWritten on a run with a background, in the same form as --log-run-color.--log-run-colorWritten on a run with a text color: one of the sixteen --log-ansi-* colors the log publishes, or the color itself.--log-warn-colorThe color of a line at warn, and of the band behind it. Defaults to the warning color.
Custom stateDescriptionfilteredThe log's query does not match the line, so it draws nothing.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-logOutput that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.
PropTypeDefaultDescriptiondefaultPinnedbooleantrueWhether the log opens following its newest line, when pinned is not set.
default-pinned="false" opens it where it starts.donebooleanWhether the run is over, which a screen reader is told once.doneLabelstring"Finished"What a screen reader hears when the run is over.droppedLabelstring"{count, plural, one {# earlier line is} other {# earlier lines are}} not kept"What the line above the log says once limit has let lines go. {count} is how many.emptyTextstring"No output yet"The text shown and announced when the log has no lines.errorLabelstring"{count, plural, one {Error} other {# errors}}: {text}"What a screen reader hears when lines at error arrive. {count} is how
many arrived together and {text} is the first of them.fallbackLabelstring"Log"The log's name, read by screen readers, where label is empty.groupLabelstring"{status, select, failed {{heading} failed} other {{heading} finished}}"What a screen reader hears when a step finishes or fails. {heading} is
the step's heading and {status} is done or failed.groupsreadonlyLogGroup[][]The steps the lines from data name in group. A step stands where its
first line is, and one with no line yet stands at the end.labelstring""The log's name, read by screen readers.limitnumber0The most lines kept, or 0 to keep them all. Past it the oldest lines are
let go, and the line above the log says how many.lineHrefstring""A link for each line number, with {n} where the number goes, such as
#L{n}. Empty leaves the numbers as text.lineLabelstring"Line {number}"What a screen reader hears for the link on a line's number, handed to each
line the log draws. {number} is the number.lineNumbersbooleanfalseWhether each line shows its number.linesreadonlyLogLine[]The lines as data. Reading it gives every line kept, oldest first, with
the line still being written left out.loadingbooleanfalseWhether the rows are still loading.loadingTextstring"Loading"The text shown and announced while the rows load.markLinesstring""Lines to mark, as numbers and ranges such as 12, 40-44.matchesLabelstring"{count, plural, =0 {No lines match} one {# line matches} other {# lines match}}"What a screen reader hears when query changes. {count} is how many lines match.parseLogParserReads each finished line of written text: return the fields to set, such
as level or group, or null to drop the line. Lines in lines are
taken as they are.pinnedbooleanWhether the log follows its newest line.querystring""Text a line has to hold to be shown, ignoring case. Empty shows every line.resumeLabelstring"Jump to latest"The words on the button that returns to the newest line, where resume is empty.sourceLogSource|nullText to read as it arrives, to the end: a ReadableStream of text or
bytes, such as a fetch response's body, or an async iterable. Bytes are
read as UTF-8. The log sets done when it ends, and a new source stops
reading the last one.thresholdnumber48How near the newest line still counts as being at it, in pixels.timestamps"absolute"|"relative"How each line shows its at: absolute on the clock, relative as the
time since the first line. Absent shows no time.wrapbooleanfalseWhether a line longer than the box wraps onto the next row. Otherwise the log scrolls sideways.
ReadTypeDescriptiontextstringEvery line kept, as plain text with the escape codes taken out, one to a
row: what a download or a copy of the log should hold.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The lines, as Log.Line and Log.Group elements.resumeThe control that returns to the newest line, shown while the reader is scrolled away. Defaults to a button named by resume-label.toolbarControls above the log, such as a search field or a button that wraps lines.
EventTypeDescriptionhelix-before-pinHelixBeforePinEventFired when the reader leaves the newest line by scrolling, or comes back to it. Cancelable.helix-expandHelixExpandEventFired after a reader opens or closes a group drawn from groups, with the id of every open group in detail.value, separated by commas.helix-pinHelixPinEventFired after the log follows the newest line or lets go of it, with true or false in detail.value.
MethodTypeDescriptionclear() => voidLets every line go, and forgets which groups the reader opened, keeping
groups, parse, and limit.resume() => voidPuts the log back at its newest line, and follows it again.scrollToLine(number: number, options: LogScrollOptions) => Promise<boolean>Scrolls to line number, counted from the first line ever written, and
stops following the newest. Opens a shut group the line is in. Resolves
to whether the line is shown: false for a line limit let go or query
hides.write(chunk: string) => voidAdds text as it arrives. A line ends at each line break, and the text
after the last one is the line still being written.
PartDescriptionafterThe space the rows below the drawn ones would take. Only for lines drawn from data.beforeThe space the rows above the drawn ones would take. Only for lines drawn from data.droppedThe line above the log that says how many earlier lines limit let go.emptyShown when the log has no lines.group-contentNot drawn: a group drawn from data stands for its heading, and its lines are rows beside it.group-durationHow long a step drawn from groups took.group-headingThe heading of a step drawn from groups.group-markThe caret of a step drawn from groups.group-statusThe status mark of a step drawn from groups.group-summaryThe button that opens and closes a step drawn from groups.group-summary-doneThe button of a step drawn from groups that is done.group-summary-failedThe button of a step drawn from groups that failed.group-summary-pendingThe button of a step drawn from groups that is pending.group-summary-runningThe button of a step drawn from groups that is running.group-summary-skippedThe button of a step drawn from groups that was skipped.lineThe row of a line drawn from data.line-debugThe row of a line drawn from data at debug.line-errorThe row of a line drawn from data at error.line-markedThe row of a line drawn from data that mark-lines names.line-matchText in a line drawn from data that matches query.line-numberThe number of a line drawn from data.line-runA stretch of a line drawn from data in an ANSI style.line-run-boldA run drawn bold.line-run-dimA run drawn faint.line-run-italicA run drawn italic.line-run-strikeA run drawn struck through.line-run-underlineA run drawn underlined.line-textThe text of a line drawn from data.line-timeThe time of a line drawn from data.line-warnThe row of a line drawn from data at warn.liveThe region where screen readers hear errors, finished steps, and the end of the run.loadingShown while loading is set.logThe lines, which scroll. On this tier, it needs only a block size.resumeThe control shown while the reader is scrolled away from the newest line.resume-buttonThe button the resume region shows when nothing is slotted into it.resume-markThe arrow on the default resume-button.rowThe wrapper around one row drawn from data, a line or a group's heading.toolbarThe toolbar slot, above the log.
CSS PropertyDescription--log-ansi-backgroundThe background a run takes where ANSI swaps the colors and named none. Defaults to the log's own background on the styled tier.--log-ansi-blackThe ANSI color black, which codes 30 and 40 draw.--log-ansi-blueThe ANSI color blue, which codes 34 and 44 draw.--log-ansi-bright-blackThe ANSI color bright black, which codes 90 and 100 draw.--log-ansi-bright-blueThe ANSI color bright blue, which codes 94 and 104 draw.--log-ansi-bright-cyanThe ANSI color bright cyan, which codes 96 and 106 draw.--log-ansi-bright-greenThe ANSI color bright green, which codes 92 and 102 draw.--log-ansi-bright-magentaThe ANSI color bright magenta, which codes 95 and 105 draw.--log-ansi-bright-redThe ANSI color bright red, which codes 91 and 101 draw.--log-ansi-bright-whiteThe ANSI color bright white, which codes 97 and 107 draw.--log-ansi-bright-yellowThe ANSI color bright yellow, which codes 93 and 103 draw.--log-ansi-cyanThe ANSI color cyan, which codes 36 and 46 draw.--log-ansi-foregroundThe text color a run takes where ANSI swaps the colors and named none. Defaults to the log's own text color on the styled tier.--log-ansi-greenThe ANSI color green, which codes 32 and 42 draw.--log-ansi-magentaThe ANSI color magenta, which codes 35 and 45 draw.--log-ansi-redThe ANSI color red, which codes 31 and 41 draw.--log-ansi-whiteThe ANSI color white, which codes 37 and 47 draw.--log-ansi-yellowThe ANSI color yellow, which codes 33 and 43 draw.--log-digitsWritten on the log: how many digits the largest line number has, while line-numbers is set, so a stylesheet can size the column of numbers.
Custom stateDescriptiondoneThe run is over: done is set, or source ended.emptyThe log has no lines.filteredquery is set, so only matching lines are shown.pinnedThe log follows its newest line.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Grouphelix-headless-log-groupOne step of a log, which folds its lines under a heading with its status and how long it took.
PropTypeDefaultDescriptiondefaultOpenbooleanfalseWhether the element starts open. Ignored once open is written.durationstring""How long the step took, as it should read, such as 12s.headingstring""What the step is called. The heading slot replaces it.openbooleanWhether the element is open.status"done"|"failed"|"pending"|"running"|"skipped"Where the step stands, which draws a mark before the heading.statusLabelstring"{status, select, pending {waiting} running {running} done {finished} failed {failed} skipped {skipped} other {}}"What a screen reader hears for the status, after the heading.
{status} is one of pending, running, done, failed, and skipped.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The lines of the step, and any groups inside it.headingThe heading, where it holds more than text. Defaults to heading.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before the group closes. Cancelable.helix-before-openHelixBeforeOpenEventFired before the group opens. Cancelable.toggleToggleEventFired after the group opens or closes, with newState and oldState.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe lines, hidden while the group is shut.durationHow long the step took.headingThe heading.markThe caret that turns as the group opens, an <svg> you size.statusThe mark for the status, an <svg> you size.summaryThe button that opens and closes the group.
Custom stateDescriptionopenThe group shows its lines.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Linehelix-headless-log-lineOne line of a log, with its number, its time, and its text.
PropTypeDefaultDescriptionatnumber|string""When the line was written: milliseconds since the epoch, or anything Date parses.level"debug"|"error"|"info"|"warn"How much the line matters. Absent is info.lineLabelstring"Line {number}"What a screen reader hears for the link on a line's number. {number} is the number.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The text of the line.
PartDescriptionlineThe row the number, the time, and the text sit in.line-debugThe row of a line at debug.line-errorThe row of a line at error.line-markedThe row of a line mark-lines names on the log.line-warnThe row of a line at warn.matchText that matches the log's query, in a line the log draws from data.numberThe line's number, shown with line-numbers, and a link with line-href.runA stretch of text drawn in an ANSI style, in a line the log draws from data. Its color is --log-run-color and its background --log-run-background-color.run-boldA run drawn bold.run-dimA run drawn faint.run-italicA run drawn italic.run-strikeA run drawn struck through.run-underlineA run drawn underlined.textThe text of the line.timeWhen the line was written, shown with timestamps.
CSS PropertyDescription--log-run-background-colorWritten on a run with a background, in the same form as --log-run-color.--log-run-colorWritten on a run with a text color: one of the sixteen --log-ansi-* colors the log publishes, or the color itself.
Custom stateDescriptionfilteredThe log's query does not match the line, so it draws nothing.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
ExamplesNameDescriptionPreviewA deployment's output with numbered lines, its steps folded, and the step that failed open.PreviewA deployment's output with numbered lines, its steps folded, and the step that failed open.SearchA search field in the toolbar that shows only the lines holding what you type, and marks each match.TimestampsEach line's time into the run, numbers that link to their line, and two lines marked.WrittenA CI run written to the log as it arrives, with its colors, a progress bar that stays one line, and its steps read off markers.