React LogViewer

React LogViewer is a React component that loads and displays remote or streamed text logs in the browser lazily and efficiently. Its core LazyLog component virtualizes rendering so it can handle files upwards of 100MB without freezing the browser, while parsing and colorizing ANSI escape sequences.

Logs can be sourced from static text, a URL, a WebSocket, or an EventSource, making it well suited to live-tailing CI output, deployment logs, or any streaming text feed. It is a maintained TypeScript fork of Mozilla’s react-lazylog with modern virtualization powered by Virtua.

What You Get

• The LazyLog component for rendering logs from text, URL, WebSocket, or EventSource
• A follow-to-scroll higher-order component for live log tailing
• ANSI escape parsing with colorization and styling
• Built-in search, line highlighting, and customizable styling
• TypeScript types and ESM/CJS/UMD builds

Common Use Cases

• Displaying live CI/CD or build logs streamed over WebSocket or EventSource
• Viewing very large log files (100MB+) without crashing the browser
• Rendering ANSI-colored terminal output inside a web dashboard
• Searching and highlighting lines within long log output

Under The Hood

Architecture The library exposes components from src/components (chiefly LazyLog plus a follow-scroll HOC) that stream log text, tokenize it into lines, parse ANSI escapes into styled spans, and hand the line list to the Virtua virtualizer, which mounts only the rows currently in view. Input adapters abstract static text, fetch/URL streaming, WebSocket, and EventSource behind a common line-emitting interface. Tech Stack TypeScript and React, with Virtua for virtualization, built via Rollup/Vite, documented through Storybook, and tested with Playwright. It targets modern browsers including mobile Safari and Chrome. Code Quality The project is a maintained, modernized fork of Mozilla’s react-lazylog with a tests/ suite, Storybook stories under src/stories, and CI configuration, reflecting active upkeep and reasonable coverage for a UI component. API Design Usage is a single declarative component with well-named props (url, websocket, eventsource, height, width, highlighting and styling options), so getting started requires only rendering <LazyLog url=... /> inside a sized container, with more advanced streaming behavior opt-in via additional props.