All projects · SaaS Product Tools
API Response Visualizer Dashboard — Interactive Tree & Formatted JSON Inspector
A clean developer dashboard for inspecting API responses with a 3-layer architecture.
A clean developer dashboard for inspecting API responses with a 3-layer architecture. Features interactive collapsible tree view with contextual icons, syntax-highlighted formatted JSON, performance metrics HUD (status code, response time, response size), response headers inspection, optional error accordion, and persistent request history in localStorage.
- Decoupled 3-layer architecture cleanly separating request dispatching, response parsing, and UI visualization
- Interactive collapsible JSON tree view with contextual icons for objects, arrays, and primitive values
- Formatted JSON view with syntax highlighting, synchronized line numbers, and instant clipboard export
- Real-time performance metrics HUD tracking status code, response time in ms, and payload size in KB
- Persistent request history in localStorage with colored status badges, quick reopening, and deletion
Built with: Vanilla JavaScript, 3-Layer Architecture (Request / Response / Visualization), Collapsible JSON Tree View, Syntax Highlighting, Performance Benchmarking, localStorage, CSS Grid / Flexbox, Google Fonts (Sora, Outfit, Chivo Mono)