Live Log Viewer — Free HTML CSS JS Snippet

A log viewer is deceptively hard to get right, and the difficulty is never the rendering. It is that the component has to guess whether the reader wants to follow the stream or read something further up — and every implementation that gets this wrong becomes unusable at exactly the moment it matters, when something is going wrong and lines are arriving fast.

Auto-follow derived from scroll position, not a toggle

The rule here is the one every good terminal uses: if the viewport is within 40 pixels of the bottom, the viewer is following and new lines scroll into view. Scroll up by more than that and following stops immediately, so the line you are reading stays put no matter how much arrives underneath. Scroll back to the bottom and following resumes on its own. There is no checkbox, because a checkbox makes the reader manage state that their scroll position already expresses unambiguously. When new lines arrive while detached, a "New logs" pill appears rather than yanking the view.

A ring buffer so memory stays flat

Streams do not end, so an append-only viewer grows without limit until the tab dies. logs is capped at 400 entries and shift() drops the oldest as new ones arrive, which bounds both the array and the DOM. This is the single most important line in a long-lived log component, and the one most often missing from hand-rolled versions that were only ever tested for a minute.

One string build per frame, not one node append per line

Rendering rebuilds the visible list as a single HTML string and assigns it once. Appending elements individually forces layout work per line and gets visibly slow when a burst arrives or a filter changes. Building a string and writing it once is both simpler and dramatically faster at this scale, and it makes filtering — which changes which lines exist rather than adding to them — the same code path as streaming.

Escaping before highlighting, in that order

Search matches are wrapped in <mark>, which means the renderer writes HTML. The escape runs first, over the raw message, and the <mark> tags are inserted into the already-escaped string afterwards. Doing it the other way round — highlighting then escaping — would escape your own markup, and skipping the escape entirely would let any log line containing angle brackets inject nodes into the page. Log messages routinely contain user-supplied data, so this ordering is a security property, not a formatting detail.

Filters that compose

Level toggles and the text search are applied together in one visible() filter, and the footer reports "N of M lines" so it is always clear that a quiet console means an active filter rather than a dead stream. Level chips carry their own colour when active, so the filter row doubles as the legend for the lines below it.