Varnus
Components for developer-facing interfaces.
Problem
Developers repeatedly rebuild custom user interfaces for displaying nested JSON, comparing structured configuration payloads, inspecting HTTP request/response traffic, and debugging state in administrative portals. Existing solutions often bundle heavy dependencies, enforce rigid uncustomizable styles, or lack keyboard accessibility.
Solution
Varnus is a collection of composable, accessible shadcn-compatible React components specifically crafted for inspecting, diffing, and visualizing developer data. Designed with Tailwind CSS variables, it integrates seamlessly into modern Next.js dashboards while maintaining zero runtime overhead.
Interactive Components
Test the live components below directly inside this case study.
1. JSON Inspector
Renders arbitrarily deep JSON payloads with type-based syntax coloring, collapsible node trees, search filtering, and dot-notation key path copying.
2. JSON Diff
Compares two structured payloads side-by-side or in a unified view, highlighting additions (+), deletions (-), and modified fields (~).
{
"env": "production",
"port": 8080, "maxConnections": 100, "features": { "vectorSearch": false, "rateLimiting": true
}, "timeoutSeconds": 30}{
"env": "production",
"port": 8080, "maxConnections": 250, "features": { "vectorSearch": true, "rateLimiting": true, "aiDocumentChat": true }, "monitoring": { "telemetryEnabled": true }}3. Request / Response Viewer
Inspects HTTP exchanges with header redaction toggles, response status codes, timing metrics, and cURL export capabilities.
{
"query": "developer_tools",
"limit": 10,
"includeMetrics": true
}Real-World Applications
Inspect incoming webhooks and REST endpoints in administrative panels without leaking credentials.
Review environment variable or JSON feature-flag modifications before deploying to production.
Embed interactive API request builders and payload inspectors into customer-facing documentation.
Engineering Architecture
Component API & Compound Primitive Design
Varnus utilizes compound component patterns (e.g. <Inspector.Root>, <Inspector.Node>) allowing developers to control toolbar layouts, custom type color palettes, and header action buttons while keeping state logic localized.
Recursive Tree Rendering & Circular Reference Safety
When rendering arbitrarily deep or cyclic JavaScript objects, unhandled recursive traversal will throw stack overflow exceptions. Varnus tracks visited object references using a WeakSet map during recursive parsing, safely rendering cyclic references with a [Circular Reference] fallback indicator.
Sensitive Header Redaction Pipeline
To prevent accidental leaks in developer screencasts or error reporting dashboards, the Request/Response viewer passes header key-value pairs through an automated redaction regex mask before initial render. Keys matching sensitive patterns (Authorization, Cookie, X-Api-Key) are masked by default.
Server / Client Component Boundaries
Varnus components are designed for Next.js App Router applications. Static header formatting and structure logic execute server-side, while interactive expand/collapse states and clipboard events isolate cleanly inside client boundary components.