ABRjson
Editor de JSON que funciona entero en el navegador, pensado para archivos grandes, de más de 1 MB, como el contenido de una web con todas sus traducciones. Texto y grafo visual sincronizados, búsqueda de claves y valores en todo el documento, validación y generación de JSON Schema, y guardado en el mismo archivo sin tocar nada que no hayas cambiado. Sin límites de tamaño artificiales, sin servidor y usable sin conexión.
- para abrir 1 MB (CI)
- < 200 ms
- para abrir 1 MB (CI)
- sin bloquear el navegador
- 10 MB
- sin bloquear el navegador
- tests (302 unitarios y 87 e2e)
- 389
- tests (302 unitarios y 87 e2e)
- servidores
- 0
- servidores
Qué hace
- Texto y grafo a la vez. A la izquierda, el JSON con un editor de verdad. A la derecha, el mismo documento como un grafo de tarjetas que se pliega y se despliega. Lo que cambias en uno aparece en el otro.
- JSON grandes. Lo hice para los JSON de contenido de mis webs, con todas las variantes de idioma, que pasan de 1 MB. No hay límite de tamaño artificial: con documentos grandes, el grafo se abre plegado y solo dibuja lo que se ve.
- Buscar en todo el documento. Claves, valores y rutas como
home.hero.title, sin distinguir mayúsculas ni acentos. Al elegir un resultado, el editor y el grafo van a ese sitio. - Editar sin efectos secundarios. Cambiar un valor, desde el texto o desde el grafo, solo toca ese valor. Formatear y minificar conservan los números, los escapes y el orden de las claves.
- JSON Schema. Validar el documento contra un esquema y generar un esquema inicial a partir del propio documento.
- Abre y guarda tus archivos. En Chrome y Edge guarda en el mismo archivo y lo deja igual byte a byte salvo lo que hayas cambiado: saltos de línea, BOM y salto final incluidos. En Firefox y Safari, guardar descarga el archivo.
- Todo en tu navegador. Pestañas, deshacer por pestaña, autoguardado local y modo incógnito. Se instala como aplicación y funciona sin conexión. Los documentos no salen del navegador. Google Analytics solo cuenta visitas, y solo si lo aceptas. En inglés, español y chino.
Cómo está hecho
El texto manda
El texto es la única fuente de verdad, y el historial de deshacer de CodeMirror es el único historial. El grafo se deriva del texto. Una edición desde el grafo se traduce en un cambio de texto concreto, calculado con las posiciones que da jsonc-parser, y entra en el mismo historial que lo que escribes.
Un monorepo con el dominio aparte
La aplicación Nuxt 4, en modo solo cliente, vive en apps/web. Formatos, documentos, grafo, esquema y workers son paquetes que no pueden depender de Vue, de Nuxt ni del DOM. El grafo es SVG propio, sin librería de grafos.
Rendimiento medido en CI
Un arnés de Playwright abre documentos generados de 1 y 10 MB y mide cuánto tardan en abrirse, el tiempo por fotograma al arrastrar, la búsqueda y el inspector. Si alguna cifra pasa del doble del objetivo, el despliegue no sale.
Problemas que resolví
- Ediciones que reescribían el documento. Al principio, un cambio desde el grafo reconstruía todo el JSON: redondeaba números, reordenaba claves y perdía el formato. Ahora solo se reemplaza el fragmento del valor editado.
- Dos historiales de deshacer. CodeMirror y el grafo tenían cada uno el suyo, y deshacer dejaba el texto y el grafo con valores distintos. Ahora hay uno solo por pestaña.
- Congelado con 1,5 MB. Con 385 KB tardaba casi 5 segundos en mostrar el grafo, y arrastrarlo iba a más de un segundo por paso. Hoy abre 1 MB en menos de 200 ms y arrastra a unos 17 ms por fotograma.
- Dos ventanas pisándose. Las dos escribían la misma sesión. Ahora la primera toma un bloqueo con Web Locks y es la única que guarda.
- Un editor sin scroll propio. Una altura mínima en lugar de fija hacía que el scroller de CodeMirror midiera lo mismo que el documento: la rueda no movía el texto y los resultados lejanos de la búsqueda se quedaban a mitad de camino.