HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet 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.
PropTypeDescriptioncollapsebooleanDefaultfalseFolds a line written again straight after itself into it, with a count,
as a browser's console does, so a loop writing one warning a thousand
times is one line. For lines written or given as data, read as they
arrive; numbers, line-href and the selection count a folded line once.defaultPinnedbooleanDefaulttrueWhether 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.doneLabelstringDefault"Finished"What a screen reader hears when the run is over.droppedLabelstringDefault"{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.emptyTextstringDefault"No output yet"The text shown and announced when there are no rows and none are loading.errorLabelstringDefault"{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.fallbackLabelstringDefault"Log"The log's name, read by screen readers, where label is empty.format"github-actions"|"vercel"The format written text is in, read with a parser Helix ships:
github-actions reads a GitHub Actions log's workflow commands into steps
and levels, and vercel a Vercel build log's phases and warnings. Absent
reads none. parse wins over it.groupLabelstringDefault"{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[]Default[]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.labelstringDefault""The log's name, read by screen readers.level"debug"|"error"|"info"|"log"|"warn"The quietest level shown: info hides debug and log lines, warn
shows warnings and errors, and error errors only. Unset shows every line.
Lines it hides are kept, so lowering it shows them again, and a step shows
while it holds a line that shows.limitnumberDefault0The 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.lineHrefstringDefault""A link for each line number, with {n} where the number goes, such as
#L{n}. Empty leaves the numbers as text.lineLabelstringDefault"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.lineNumbersbooleanDefaultfalseWhether 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.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.markLinesstringDefault""Lines to mark, as numbers and ranges such as 12, 40-44.matchesLabelstringDefault"{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, open or close to start or end a step, or null to drop
the line. Lines in lines are taken as they are. Wins over format.pinnedbooleanWhether the log follows its newest line.querystringDefault""Text a line has to hold to be shown, ignoring case. Empty shows every line.quietbooleanDefaultfalseWhether the log says nothing to a screen reader as lines arrive, steps
finish, or the run ends. For a log inside something that speaks for it,
such as an agent's work in a chat turn, which the turn announces once it
settles.resumeLabelstringDefault"Jump to latest"The words on the button that returns to the newest line, where resume is empty.selectablebooleanDefaultfalseWhether pressing a line's number selects the line, and pressing another
with Shift selects every line between them. Each number is then a
button, or a link with line-href, and the arrow keys move between them.selectedLinesstringDefault""The lines selected, as a number or a range such as 12-20. Empty selects
none. A reader's press asks first: helix-select is cancelable.separation"outlined"|"plain"How the log is set apart from what is around it.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.thresholdnumberDefault48How 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.wrapbooleanDefaultfalseWhether 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 step drawn from groups or opened by a parser, 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.helix-selectHelixSelectEventFired when a reader presses a number to change the selection, with the lines asked for in detail.value. Cancelable.helix-selectedHelixSelectedEventFired after the selection changes, with the lines now selected in detail.value, such as 12-20.
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.writeLine(line: LogLine) => voidAdds one line as data, after the lines the log holds: its text, and its
level, time and group where it has them. For lines that arrive one at a
time with a level of their own, such as a console's, where write takes
text.
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-countHow many times a folded line was written, under collapse. Hidden from screen readers, which hear line-count-label.line-count-labelWhat a screen reader hears for a folded line's count, such as "3 times". Visually hidden in the styled tier.line-debugThe row of a line drawn from data at debug.line-errorThe row of a line drawn from data at error.line-groupedThe row of a line drawn from data that belongs to a step.line-levelWhat a screen reader hears before the text of a line drawn from data at debug, warn or error. Visually hidden in the styled tier.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-selectedThe row of a line drawn from data that is selected.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. Visually hidden in the styled tier.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 or level is set, so only the lines they keep 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.
PropTypeDescriptiondefaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.durationstringDefault""How long the step took, as it should read, such as 12s.headingstringDefault""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.statusLabelstringDefault"{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.
PropTypeDescriptionatnumber|stringDefault""When the line was written: milliseconds since the epoch, or anything Date parses.level"debug"|"error"|"info"|"log"|"warn"How much the line matters. Absent is info.levelWordsPartial<Record<LogLevel, string>>Default{ debug: "Debug:", error: "Error:", warn: "Warning:", }What a screen reader hears before the text of a line at each level, for a
page in another language, keyed by level, such as { warn: 'Warnung:' }.
A line at info or log hears nothing extra, and nor does a line whose
text already starts with its words, such as Error: Cannot find module.
As an attribute it is that object as JSON.lineLabelstringDefault"Line {number}"What a screen reader hears for the link on a line's number. {number} is the number.timesLabelstringDefault"{count} times"What a screen reader hears after a line written more than once in a row.
{count} is how many times, in the locale.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The text of the line.
PartDescriptioncountHow many times a line written again straight after itself was written, where the log's collapse folds repeats. Hidden from screen readers, which hear count-label.count-labelWhat a screen reader hears for the count, such as "3 times". Visually hidden in the styled tier.levelWhat a screen reader hears before the text for a line at debug, warn or error, such as "Warning:". Visually hidden in the styled tier.lineThe 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-groupedThe row of a line that belongs to a step, which the styled tier insets under the step's heading where there is no number.line-markedThe row of a line mark-lines names on the log.line-selectedThe row of a line in the log's selection.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: a link with line-href, and a button on a selectable log.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-selected-background-colorThe band behind a selected line, on a selectable log.--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, or its level is quieter than the log shows, 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.
PropTypeDescriptioncollapsebooleanDefaultfalseFolds a line written again straight after itself into it, with a count,
as a browser's console does, so a loop writing one warning a thousand
times is one line. For lines written or given as data, read as they
arrive; numbers, line-href and the selection count a folded line once.defaultPinnedbooleanDefaulttrueWhether 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.doneLabelstringDefault"Finished"What a screen reader hears when the run is over.droppedLabelstringDefault"{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.emptyTextstringDefault"No output yet"The text shown and announced when the log has no lines.errorLabelstringDefault"{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.fallbackLabelstringDefault"Log"The log's name, read by screen readers, where label is empty.format"github-actions"|"vercel"The format written text is in, read with a parser Helix ships:
github-actions reads a GitHub Actions log's workflow commands into steps
and levels, and vercel a Vercel build log's phases and warnings. Absent
reads none. parse wins over it.groupLabelstringDefault"{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[]Default[]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.labelstringDefault""The log's name, read by screen readers.level"debug"|"error"|"info"|"log"|"warn"The quietest level shown: info hides debug and log lines, warn
shows warnings and errors, and error errors only. Unset shows every line.
Lines it hides are kept, so lowering it shows them again, and a step shows
while it holds a line that shows.limitnumberDefault0The 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.lineHrefstringDefault""A link for each line number, with {n} where the number goes, such as
#L{n}. Empty leaves the numbers as text.lineLabelstringDefault"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.lineNumbersbooleanDefaultfalseWhether 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.loadingbooleanDefaultfalseWhether the rows are still loading.loadingTextstringDefault"Loading"The text shown and announced while the rows load.markLinesstringDefault""Lines to mark, as numbers and ranges such as 12, 40-44.matchesLabelstringDefault"{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, open or close to start or end a step, or null to drop
the line. Lines in lines are taken as they are. Wins over format.pinnedbooleanWhether the log follows its newest line.querystringDefault""Text a line has to hold to be shown, ignoring case. Empty shows every line.quietbooleanDefaultfalseWhether the log says nothing to a screen reader as lines arrive, steps
finish, or the run ends. For a log inside something that speaks for it,
such as an agent's work in a chat turn, which the turn announces once it
settles.resumeLabelstringDefault"Jump to latest"The words on the button that returns to the newest line, where resume is empty.selectablebooleanDefaultfalseWhether pressing a line's number selects the line, and pressing another
with Shift selects every line between them. Each number is then a
button, or a link with line-href, and the arrow keys move between them.selectedLinesstringDefault""The lines selected, as a number or a range such as 12-20. Empty selects
none. A reader's press asks first: helix-select is cancelable.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.thresholdnumberDefault48How 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.wrapbooleanDefaultfalseWhether 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 step drawn from groups or opened by a parser, 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.helix-selectHelixSelectEventFired when a reader presses a number to change the selection, with the lines asked for in detail.value. Cancelable.helix-selectedHelixSelectedEventFired after the selection changes, with the lines now selected in detail.value, such as 12-20.
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.writeLine(line: LogLine) => voidAdds one line as data, after the lines the log holds: its text, and its
level, time and group where it has them. For lines that arrive one at a
time with a level of their own, such as a console's, where write takes
text.
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-countHow many times a folded line was written, under collapse. Hidden from screen readers, which hear line-count-label.line-count-labelWhat a screen reader hears for a folded line's count, such as "3 times". Visually hidden in the styled tier.line-debugThe row of a line drawn from data at debug.line-errorThe row of a line drawn from data at error.line-groupedThe row of a line drawn from data that belongs to a step.line-levelWhat a screen reader hears before the text of a line drawn from data at debug, warn or error. Visually hidden in the styled tier.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-selectedThe row of a line drawn from data that is selected.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. Visually hidden in the styled tier.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 or level is set, so only the lines they keep 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.
PropTypeDescriptiondefaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.durationstringDefault""How long the step took, as it should read, such as 12s.headingstringDefault""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.statusLabelstringDefault"{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.
PropTypeDescriptionatnumber|stringDefault""When the line was written: milliseconds since the epoch, or anything Date parses.level"debug"|"error"|"info"|"log"|"warn"How much the line matters. Absent is info.levelWordsPartial<Record<LogLevel, string>>Default{ debug: "Debug:", error: "Error:", warn: "Warning:", }What a screen reader hears before the text of a line at each level, for a
page in another language, keyed by level, such as { warn: 'Warnung:' }.
A line at info or log hears nothing extra, and nor does a line whose
text already starts with its words, such as Error: Cannot find module.
As an attribute it is that object as JSON.lineLabelstringDefault"Line {number}"What a screen reader hears for the link on a line's number. {number} is the number.timesLabelstringDefault"{count} times"What a screen reader hears after a line written more than once in a row.
{count} is how many times, in the locale.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The text of the line.
PartDescriptioncountHow many times a line written again straight after itself was written, where the log's collapse folds repeats. Hidden from screen readers, which hear count-label.count-labelWhat a screen reader hears for the count, such as "3 times". Visually hidden in the styled tier.levelWhat a screen reader hears before the text for a line at debug, warn or error, such as "Warning:". Visually hidden in the styled tier.lineThe 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-groupedThe row of a line that belongs to a step, which the styled tier insets under the step's heading where there is no number.line-markedThe row of a line mark-lines names on the log.line-selectedThe row of a line in the log's selection.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: a link with line-href, and a button on a selectable log.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, or its level is quieter than the log shows, so it draws nothing.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionLevelsA dev server's console, each repeat folded into one line with a count, and a level to show from.PreviewA 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.SelectingLines selected by pressing their numbers, a range with Shift, with the address following the selection.TimestampsEach line's time into the run, numbers that link to their line, and two lines marked.VercelA Vercel build log read with its own format: each phase a step, timed from its lines, with its warnings drawn apart.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 GitHub's markers.