Log Stream Viewer
A tailing log window that stays smooth at ten thousand lines.
AdvancedWeb appDev tool12–24hAI-buildable 4/5no setup
Render a fast-arriving log stream without the page falling over. Lines arrive continuously, the view auto-scrolls unless you've scrolled up, and filtering by level or text happens live. This is a performance project disguised as a UI project — the naive version dies at a few thousand rows and virtualisation is the point.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Lines stream in continuously from a simulated source
- The list virtualises so only visible rows are in the DOM
- Auto-scroll follows the tail, but pauses when the user scrolls up
- A jump-to-latest control appears while paused
- Filter by log level and by free text, applied live
- Log levels are colour-coded
- A pause control freezes the stream without dropping lines
The interesting part
- Virtualising a list whose length changes constantly
- Detecting user scroll intent versus programmatic auto-scroll
- Capping the in-memory buffer without losing the tail
Once it works
- Add regex filtering with match highlighting
- Let the user select a line range and copy it
- Add a mini-map showing where errors sit in the buffer
Suggested stack
reacttypescripttailwindtanstack-virtual