JSON Viewer: Deja de aburrir con JSONs gigantes y dales vida

¿Alguna vez has tenido que hacer una demo técnica y, al llegar a la parte más importante, lo único que has podido mostrar es un bloque de JSON de 2.000 líneas?

Si te dedicas al desarrollo de software, sabes exactamente de lo que hablo. Estás enseñando esa nueva funcionalidad increíble, el público está atento, y de repente… pum. Una pantalla negra llena de llaves, corchetes y comillas. El silencio en la sala se puede cortar con un cuchillo mientras intentas hacer scroll buscando ese campo específico que demuestra que tu código funciona.

Es frustrante. Es aburrido. Y, sobre todo, es una forma terrible de comunicar el valor de lo que has construido.

Esa misma frustración fue la que me llevó a crear JSON Viewer, una herramienta de código abierto diseñada para que los desarrolladores dejemos de “leer” JSON y empecemos a visualizarlos de verdad.

El problema: El JSON es para las máquinas, no para los ojos

El formato JSON es maravilloso para la interoperabilidad entre sistemas. Es ligero, estándar y fácil de parsear. Pero no está hecho para que un humano lo procese a gran velocidad durante una presentación o una sesión de depuración intensa.

Cuando trabajas con APIs modernas, te encuentras con respuestas gigantescas. Intentar encontrar un error de lógica o validar un flujo de datos en un objeto profundamente anidado es como buscar una aguja en un pajar digital.

La demo aburrida (Antes) ❌

Imagina que estás mostrando un sistema de gestión de pedidos. El resultado de tu API es este:

{
  "order_id": "ORD-99283",
  "customer": {
    "name": "Juan Pérez",
    "email": "juan@example.com"
  },
  "items": [
    { "id": 1, "product": "Monitor 4K", "price": 450, "status": "shipped" },
    { "id": 2, "product": "Teclado Mecánico", "price": 120, "status": "processing" }
  ],
  "total": 570
}

En una demo, esto no dice nada. Tienes que explicar campo por campo qué está pasando.

La demo interactiva (Después) ✅

Con JSON Viewer, puedes transformar ese mismo objeto en algo que cualquiera pueda entender de un vistazo:

<div class="p-4 border-l-4 border-blue-500 bg-slate-50">
  <h2 class="text-xl font-bold">Pedido: {{order_id}}</h2>
  <p>Cliente: <strong>{{customer.name}}</strong> ({{customer.email}})</p>
  
  <ul class="mt-4 space-y-2">
    {{#each items}}
      <li class="flex justify-between p-2 bg-white shadow-sm rounded">
        <span>{{product}}</span>
        <span class="px-2 py-1 text-xs rounded {{#if (eq status 'shipped')}}bg-green-100 text-green-800{{else}}bg-yellow-100 text-yellow-800{{/if}}">
          {{status}}
        </span>
      </li>
    {{/each}}
  </ul>
  
  <div class="mt-4 text-right font-bold text-lg">
    Total: {{total}}€
  </div>
</div>

En cuestión de segundos, has pasado de un texto crudo a una interfaz funcional que resalta lo importante.

¿Qué es exactamente JSON Viewer?

Es un visualizador de plantillas dinámico que funciona totalmente en el lado del cliente. La idea es simple pero potente: pegas tu JSON, escribes una plantilla en Handlebars (un motor de plantillas súper sencillo y popular) y ves el resultado en tiempo real.

He construido esta herramienta utilizando lo último en el ecosistema de frontend:

• React 19: Aprovechando las últimas mejoras de rendimiento y hooks.
• TypeScript: Para que el código sea robusto y fácil de mantener para cualquier contribuidor.
• Tailwind CSS v4: Para una capa estética moderna y rápida.
• Monaco Editor: Sí, el mismo motor que usa VS Code, para que tengas autocompletado y resaltado de sintaxis mientras pegas tus datos.
• Handlebars: Para la lógica de las plantillas.

Características que lo hacen diferente

No quería crear “otro visualizador de JSON”. Hay miles en internet. Quería crear una herramienta que yo mismo quisiera usar todos los días en mi flujo de trabajo.

1. Editor de nivel profesional

Gracias a Monaco Editor, tienes todas las ventajas de un IDE: buscar y reemplazar, formateo automático y validación de errores. Si pegas un JSON mal formado, la herramienta te lo dirá al instante.

2. Persistencia local (Zero Backend)

Tu privacidad es lo primero. Los datos que pegas en JSON Viewer nunca salen de tu navegador. Todo se guarda en el localStorage, lo que significa que si cierras la pestaña y vuelves al día siguiente, tu JSON y tus plantillas seguirán ahí esperándote.

3. Gestión de plantillas múltiples

A veces necesitas ver los mismos datos de diferentes formas. Puedes crear múltiples plantillas (ej: “Vista de Tabla”, “Vista de Card”, “Debug Mode”) y alternar entre ellas con un solo clic.

4. Modo oscuro y diseño responsive

Porque los desarrolladores amamos el modo oscuro. La interfaz está cuidada al detalle con shadcn/ui y Phosphor Icons para que trabajar en ella sea una experiencia agradable.

Cómo empezar a usarlo

Si quieres probarlo ahora mismo, puedes clonar el repositorio y levantarlo en local en menos de un minuto:

# Clonar el repo
git clone https://github.com/jalucenyo/json-viewer.git

# Entrar en la carpeta
cd json-viewer

# Instalar dependencias
npm install

# ¡A programar!
npm run dev

El proyecto está bajo licencia MIT, así que eres libre de usarlo, modificarlo y, por supuesto, enviar tus Pull Requests.

Reflexión final: ¿Por qué hacerlo open source?

Podría haber dejado esta herramienta en un marcador de mi navegador, pero creo firmemente en el poder del open source. Muchos de nosotros consumimos herramientas gratuitas a diario que nos salvan la vida. Esta es mi pequeña contribución para que las demos de otros desarrolladores dejen de ser un suplicio de llaves y corchetes.

Si te gusta el proyecto, agradecería un montón una estrella en GitHub ⭐. Me ayuda a saber que este tipo de herramientas son útiles para la comunidad.

Tip: Si estás trabajando con una API que devuelve datos anidados muy complejos, usa la función de búsqueda de Monaco (Cmd+F) para encontrar la ruta exacta antes de escribir tu plantilla.

¿Y tú? ¿Cómo gestionas esos JSONs gigantescos en tus presentaciones? Te leo en los comentarios o por redes sociales.

Preguntas Frecuentes (FAQ)

¿Es seguro usar mis datos de producción en la herramienta? Sí. La herramienta es puramente client-side. Tus datos no se envían a ningún servidor; todo el procesamiento ocurre en la memoria de tu navegador y el almacenamiento es local.

¿Puedo usar otras librerías de CSS en las plantillas? Actualmente, el visualizador soporta estilos en línea y clases de Tailwind CSS si están configuradas, aunque la idea es usar HTML/CSS estándar para la máxima compatibilidad.

¿Tengo que saber Handlebars para usarlo? Handlebars es muy parecido al HTML estándar. Si sabes poner {{variable}}, ya sabes el 80% de lo que necesitas. Es ideal para iterar listas con {{#each}} y condicionales con {{#if}}.

Puedes encontrar el proyecto aquí: https://github.com/jalucenyo/json-viewer