JSONL Web Explorer

A modern, web-based tool for exploring, analyzing, and visualizing JSONL (JSON Lines) log files. This application allows users to easily upload multiple log files, search through entries, and view detailed structured data in a clean interface.

Features

• Drag & Drop Upload: Simply drag JSONL files onto the interface to load them instantly.
• Multi-file Support: Manage multiple log files simultaneously via the sidebar.
• Advanced Filtering: Real-time search and filtering across all log messages and metadata.
• Detailed Inspection: Click on any log entry to view its full structured data in a dedicated panel.
• Responsive Design: Collapsible sidebar and flexible layout powered by react-resizable-panels.
• Dark Mode: Fully supported dark/light theme switching.

Tech Stack

• Framework: React 19 + Vite
• Styling: Tailwind CSS v4
• UI Components: Shadcn UI (Radix UI)
• Routing: TanStack Router
• Icons: Lucide React
• Testing: Vitest + React Testing Library

Getting Started

Prerequisites

• Node.js (v20+ recommended)
• pnpm package manager

Installation

1. Clone the repository
2. Install dependencies:

pnpm install

Development

Start the development server:

pnpm dev

The application will be available at http://localhost:3000.

Building for Production

To create a production-ready build:

pnpm build

Quality & Testing

Running Tests

Run the test suite using Vitest:

pnpm test

Linting & Formatting

This project uses Biome for fast linting and formatting.

# Format code
pnpm format

# Lint code
pnpm lint

# Run both linting and formatting checks
pnpm check