Examples
Basic
Just the log lines — no toolbar, no line numbers. The scroll container caps height at
37.5rem by default; pass height to
override.
Line numbers
lineNumbers=true adds pf-m-line-numbers
and renders a 1-based index in the gutter.
With toolbar
Header slot with a search input and prev/next navigation. Matches highlight in PF
pf-m-match yellow; the current match scrolls into view and gets
pf-m-current for the active style.
Wrap toggle
Header slot with a button that flips pf-m-nowrap on the root.
Default is wrapped (break-spaces); nowrap forces single-line entries with horizontal scroll.
ANSI colors
ansi=true parses ECMA-48 SGR escape codes (8 standard colors, 8
bright variants, bold, reset) into inline-styled spans. Useful for piping
npm, cargo, CI logs verbatim.
Streaming (SSE)
Live tail via Server-Sent Events. The log list subscribes to
/api/htmx/log-stream through the HTMX SSE extension; each event's
HTML is appended to the list and the viewer auto-scrolls to the new bottom. The Quarkus
endpoint returns a Multi<String> reactive stream from
Mutiny. For real apps, replace the demo ticker with your log source (file tail, Kafka topic,
audit log query).
Documentation
Log-viewer props
Parameters accepted by
{#include components/extensions/log-viewer ... /}.
lines is a list of strings, one per log row.
| Name | Type | Default | Description |
|---|---|---|---|
* id |
String | — | DOM id on the log-viewer root. |
* lines |
List<String> | — | One element per log row. |
lineNumbers |
boolean | false |
Show a 1-based index in the gutter. |
nowrap |
boolean | false |
Adds pf-m-nowrap — single-line entries with horizontal
scroll.
|
height |
String (CSS length) | 37.5rem |
Override the scroll-container height. Accepts any CSS length. |
ansi |
boolean | false |
Parse ANSI escape codes into colored spans. |
ariaLabel |
String | "Log content" |
Override the list's aria-label. |
withHeader |
boolean | false |
Render an __header wrapper around the
header slot.
|
withFooter |
boolean | false |
Render an __footer wrapper around the
footer slot.
|
Usage
Search. The Alpine factory exposes
setQuery(q), nextMatch(),
prevMatch(), matchCount, and
currentIndex. Wire a search input to
setQuery and bind buttons to the prev/next methods — see the
With toolbar example.
Wrap toggle. Call toggleWrap() from a button
and read wrapped to label the action — see the Wrap toggle
example.
Scroll-to-bottom.
scrollToBottom() jumps the container to its bottom. Pair with a
"Tail" toggle button, or call it after an HTMX swap appends new lines, to keep the most
recent content in view.
Streaming. Server-rendered. To live-update, swap the
__list contents via HTMX (planned: SSE for true tail behavior).