JSON-RPC Viewer

A web-based tool for parsing and visualizing JSON Lines containing JSON-RPC messages. Perfect for analyzing Language Server Protocol (LSP) logs, debugging API communications, and understanding request-response flows.

Paste your JSON-RPC communication logs into the textarea. The tool accepts:

• Raw JSON Lines (one JSON object per line)
• Messages with Content-Length headers (LSP format)
• Mixed formats with varying whitespace

Click "Parse Messages" to extract and display the JSON-RPC messages with:

• Request-Response Grouping: Related messages are paired together
• Direction Indicators: Client → Server vs Server → Client
• Message Types: REQUEST, RESPONSE, NOTIFICATION
• Method Names & IDs: Clearly labeled for easy identification

Use the toolbar buttons to customize the display:

• Toggle Grouping: Switch between grouped pairs and chronological order
• Hide Ping: Filter out noisy ping/keepalive messages
• Collapse/Expand All: Minimize or maximize all message content
• Individual Controls: Collapse/expand specific messages or pairs

Content-Length: 87

{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"capabilities":{}}}
Content-Length: 45

{"jsonrpc":"2.0","id":1,"result":{"capabilities":{}}}
Content-Length: 52

{"jsonrpc":"2.0","method":"initialized","params":{}}

• Smart Grouping: Automatically pairs requests with their responses
• Ping Filtering: Hide noisy keepalive messages with one click
• Visual Distinction: Color-coded messages with clear direction indicators
• Flexible Views: Toggle between grouped and chronological display
• Newest First: Messages displayed in reverse chronological order
• Responsive Design: Works on desktop and mobile devices
• Privacy-First: All parsing happens client-side, no data sent to servers

The application is organized into a clean, modular structure:

├── main.ts              # Hono backend entry point
├── frontend/            # Client-side application
│   ├── index.html       # Main HTML template
│   ├── style.css        # Custom styles
│   ├── app.js          # Application initialization
│   └── README.md
├── shared/              # Shared components
│   ├── JsonRpcViewer.js # Main application orchestrator
│   ├── MessageParser.js # JSON parsing logic
│   ├── MessageGrouper.js# Message organization & filtering
│   ├── MessageRenderer.js# DOM creation & visualization
│   ├── utils.js         # Shared utilities
│   └── README.md
└── README.md

• Backend (Hono): Static file serving and API endpoints
• Frontend: User interface and interaction handling
• Shared: Core business logic that works in both environments

• LSP Analysis: Debug Language Server Protocol communications
• API Development: Visualize JSON-RPC API request/response flows
• Protocol Debugging: Understand complex message sequences
• Documentation: Create visual representations of API interactions
• Learning: Study how JSON-RPC protocols work in practice

• Built with Hono backend and vanilla JavaScript frontend
• ES6 modules with no build step required
• TailwindCSS for responsive styling
• Handles malformed JSON gracefully with error reporting
• Supports large message logs with efficient parsing
• No external dependencies or data transmission