At some point I realized I had written some version of a JSON tree viewer in multiple projects. Nexxus needed one for inspecting config backup diffs from Unimus -- large, nested payloads where operators needed to find specific keys and compare values. Other projects had similar needs: inspecting API responses, debugging state snapshots, reviewing structured config. Each time, I'd reach for an existing library, find it either too bare or too heavy, and end up writing something custom.
The pattern was obvious. Instead of implementing the same thing slightly differently every time, I extracted it into a proper package once and used it everywhere.
What it does
@luismvl/react-json-treeview is a zero-dependency React component for inspecting JSON data. React is the only peer dependency -- nothing else in the bundle.
Core features
- Search with next/previous match navigation -- essential for large payloads
- Sticky breadcrumb that tracks scroll position, showing where you are in deeply nested structures
- Keyboard navigation for traversing nodes without a mouse
- Imperative ref API --
expand,collapse,scrollToPath,searchNext,searchPrevfor programmatic control from the parent component - Syntax highlighting for strings, numbers, booleans, null
- Theming -- light, dark, and auto modes via CSS variables
Configuration
Everything is configurable: defaultExpanded, searchable, showBreadcrumb, indentSize, fontSize. Callbacks for node clicks and search state changes let the parent application react to user interactions.
Design constraints
The zero-dependency rule was deliberate from the start. No version conflicts, small bundle, and nothing unexpected in the consumer's dependency tree. TypeScript-first with full type definitions shipped in the package.
Compatible with React 18 and 19. Published on npm as @luismvl/react-json-treeview with a live playground on GitHub Pages.
En algun momento me di cuenta de que habia escrito alguna version de un visor de arbol JSON en varios proyectos. Nexxus necesitaba uno para inspeccionar diffs de backups de configuracion de Unimus -- payloads grandes y anidados donde los operadores necesitaban encontrar keys especificas y comparar valores. Otros proyectos tenian necesidades similares: inspeccionar respuestas de APIs, debuggear snapshots de estado, revisar configuraciones estructuradas. Cada vez, buscaba una libreria existente, encontraba que era demasiado basica o demasiado pesada, y terminaba escribiendo algo custom.
El patron era obvio. En lugar de implementar lo mismo de forma ligeramente distinta cada vez, lo extraje en un paquete propio y lo use en todos lados.
Que hace
@luismvl/react-json-treeview es un componente React sin dependencias para inspeccionar datos JSON. React es la unica peer dependency -- nada mas en el bundle.
Funcionalidades principales
- Busqueda con navegacion de siguiente/anterior coincidencia -- esencial para payloads grandes
- Breadcrumb fijo que rastrea la posicion del scroll, mostrando donde estas en estructuras profundamente anidadas
- Navegacion por teclado para recorrer nodos sin mouse
- API imperativa de ref --
expand,collapse,scrollToPath,searchNext,searchPrevpara control programatico desde el componente padre - Syntax highlighting para strings, numeros, booleanos, null
- Temas -- modos light, dark y auto via variables CSS
Configuracion
Todo es configurable: defaultExpanded, searchable, showBreadcrumb, indentSize, fontSize. Callbacks para clicks en nodos y cambios de estado de busqueda permiten que la aplicacion padre reaccione a interacciones del usuario.
Restricciones de diseno
La regla de cero dependencias fue deliberada desde el inicio. Sin conflictos de versiones, bundle pequeno, y nada inesperado en el arbol de dependencias del consumidor. TypeScript-first con definiciones de tipos completas incluidas en el paquete.
Compatible con React 18 y 19. Publicado en npm como @luismvl/react-json-treeview con un playground en vivo en GitHub Pages.