JSON Log Viewer

A dynamic JSON log viewer web application. Built to easily view and filter JSON log files (including JSON Lines format).

Features

• Dynamic Columns: Automatically detects keys from your JSON logs and creates columns dynamically.
• Drag and Drop: Easily load files via drag and drop or file explorer.
• Global Search: Search across all columns, filtering rows and highlighting matching text.
• Pagination: Configurable rows per page with standard pagination controls.
• Client-Side Processing: Files are processed entirely in your browser, ensuring data privacy and fast performance without backend uploads.

Local Development

You will need Node and TypeScript installed on your machine. We use pnpm as the package manager.

• pnpm install to install dependencies.
• pnpm dev to start the development server.
• pnpm build to build the app for production.
• pnpm start to run the production build server locally.

The viewer will be available at http://localhost:3600 for development.

Docker Deployment

To build and run with Docker:

docker-compose up -d --build

The viewer will be available at http://localhost:3600.

Architecture

This project is built using:

• React 19
• TypeScript
• TanStack Start & Router
• CSS Modules & Lightningcss
• Biome (Linting & Formatting)
• Vite

Giving Back

If you find this project useful in any way, consider getting me a coffee by clicking on the image below. I would really appreciate it!

App Screenshots