JSON Viewer

Siempre llega ese momento incómodo en una demo: alguien dice “y aquí está la respuesta de la API”… y la pantalla se llena con 2.000 líneas de JSON. JSON Viewer soluciona eso separando tres cosas:

• Datos (tu JSON)
• Plantilla (Handlebars)
• Preview (HTML en vivo)

Así, en lugar de enseñar payloads crudos, muestras vistas legibles y con sentido.

Qué incluye

• Editor de JSON basado en Monaco.
• Editor de plantillas Handlebars (también Monaco) con marcadores de validación.
• Preview HTML en vivo dentro de un iframe aislado (sandbox).
• Múltiples plantillas: crear, seleccionar, renombrar y borrar.
• Errores claros de parseo de JSON y de render de plantilla.
• Tema claro/oscuro.
• Persistencia en localStorage (JSON, plantillas y tema).
• 100% en el cliente, sin backend.

Stack

Construida con React 19, TypeScript (modo estricto), Vite y Tailwind CSS v4.

Quickstart

git clone https://github.com/jalucenyo/json-viewer.git
cd json-viewer
npm install
npm run dev

Luego abre http://localhost:5173.

Lee la historia completa

Escribí un artículo sobre por qué construí esta herramienta, el problema real que resuelve y lo que aprendí usándola en demos y sesiones de debugging:

👉 JSON Viewer, deja de mostrar JSON crudo en tus demos