Hemos lanzado grapesjs-devtools , un plugin de código abierto (MIT) que añade un panel de desarrollador acoplable al editor. La idea es sencilla: como las DevTools de tu navegador, pero en lugar de inspeccionar la página, inspeccionas el estado interno del propio editor. Al acercarCtrl+Shift+D (CMD+Shift+Den macOS) se abre todo el editor: el árbol de componentes, los estilos aplicados, el flujo de eventos, un REPL e incluso un asistente de IA que responde preguntas de GrapesJS con ejemplos de código funcionales.
Demo en directo alterna entre el preset estándar de la página web y GrapesJS Studio justo en el encabezado, abre el panel con la tecla rápida y explora un poco.
Por qué existe esto
GrapesJS es una herramienta poderosa, pero la mayor parte de su estado interno es invisible. Componentes, rasgos, reglas CSS, gestores, el bus de eventos... todo está dentro de modelos Backbone, y cuando algo sale mal, acabas excavándolo a mano desde la consola del navegador. Cualquiera que haya escrito un plugin o un componente personalizado conoce el bucle: suscribirse a un evento, registrar la carga útil, ajustar, cancelar la suscripción, repetir.
DevTools elimina ese farmeo. Todo lo que antes requería excavar manualmente ahora es visible en vivo, en un solo panel.
¿Qué hay dentro?
El panel está construido con módulos, cada uno puede desactivarse en la configuración si no lo necesitas.
Componentes es un árbol de componentes en vivo con selección bidireccional sincronizado con el lienzo. Haz clic en un nodo del árbol y el componente se selecciona en el lienzo, y viceversa. Los atributos y rasgos se pueden editar directamente en el panel, y cualquier componente puede copiarse como JSON.
Los estilos ven qué reglas CSS se aplican realmente al elemento seleccionado, con propiedades sobrescritas en cascada tachadas y edición en línea. Además, búsqueda de reglas a nivel de proyecto y un escáner de reglas muertas que no encuentra reglas que no coinciden con nada.
Eventos un registro de cada evento del editor a través de un único oyente: filtros de grupo y texto, pausa, estadísticas de frecuencia e inspección de carga útil para cada evento. La lista está virtualizada, así que ni siquiera un proyecto ruidoso congelará el panel.
Consola un REPL coneditory$0 (el componente seleccionado) en alcance, historial, autocompletado activadoeditor. y fragmentos listos para usar. No más mantener abiertas las herramientas de desarrollo del navegador solo para "preguntar" algo al editor.
Almacena un árbol JSON de los datos de tu proyecto, diferencias estructurales entre instantáneas, exportación/importación y HTML/CSS en vivo con resaltado de sintaxis.
Gestores de una visión general de bloques, rasgos, selectores, dispositivos y plugins cargados. Al hacer clic en un selector se pasa directamente a filtrarlo en el módulo de Estilos.
Métricas de rendimiento en tiempo real (recuento de componentes, recuento de reglas CSS, conteo de oyentes del editor, tamaño de la pila de deshacer), un temporizador de rerenderizado de lienzo y un detector de fugas basado en un principio sencillo: tomar una línea base y comparar después.
Superposiciones de lienzo sobre el lienzo: resaltar todos los componentes codificados por colores según la profundidad de anidamiento, modelo de caja del elemento seleccionado, unpointer-eventsinterruptor para el cuerpo del lienzo y desplazarse a seleccionar.
Las instantáneas capturan y restauran el estado completo del proyecto (datos + selección + dispositivo), con exportación/importación y persistencia opcional en localStorage.
El Asistente de IA
La pestaña de IA merece su propia sección. No es un "chat por chat": el asistente entiende el contexto del editor. Pulsa en "Elegir elemento", haz clic en cualquier parte de la interfaz de usuario: un panel, un botón, un gestor o simplemente selecciona un componente en el lienzo, y pregunta algo como "¿cómo añado otro botón aquí?". Recibes una explicación más un ejemplo de código GrapesJS listo para usar, transmitido en Markdown, con bloques de código copiables.
Claude, ChatGPT y Gemini están soportados. Por defecto, las peticiones se hacen directamente desde el navegador (útil para el desarrollo, la interfaz te avisa honestamente), pero para producción hay dos modos más inteligentes:
- Modo proxy , apunta a tu propio endpoint y la clave API nunca sale de tu servidor. El navegador envía el cuerpo nativo de la solicitud del proveedor a tu proxy, que añade la clave y transmite la respuesta en streaming. Un proxy mínimo es literalmente una docena de líneas de Express, hay un ejemplo en el README.
- Backends compatibles con OpenAI OpenRouter, Ollama, LM Studio, Together y cualquier otro gateway. ¿Quieres un asistente local gratuito a través de Ollama? Hecho.
Ser un buen invitado en tu editor
Trabajamos duro para que las herramientas de desarrollo se comportaran como un invitado educado:
- Sin fugas.Todas las suscripciones a eventos pasan por una
EditorBridgeque las elimina cuando el paneleditor._eventsse cierra y vuelve a su línea base. - Perezoso.Los módulos se montan en la primera pestaña abierta; los temporizadores y los bucles de la RAF se detienen al desactivarse.
- No invasivos.El panel es una
position: fixedsuperposición y nunca escribe en el iframe de lienzo (la única excepción es el toggle explícitopointer-events). - Cero dependencias en tiempo de ejecución.La interfaz es DOM simple, las listas grandes están virtualizadas y el árbol renderiza perezosamente los proyectos con 1000+ componentes que se mantienen responsivos.
Cuando sí echamos un vistazo a APIs privadas (la métrica de escucha Perf lee la estructura interna de Backbone), está aisladotry/catchy se degrada enn/alugar de bloquear el panel.
Pruébalo
npm install grapesjs-devtools import grapesjs from 'grapesjs'; import devtools from 'grapesjs-devtools'; import 'grapesjs-devtools/dist/style.css'; const editor = grapesjs.init({ container: '#gjs', plugins: [devtools], }); Compatible con GrapesJS>= 0.21.0. Todo es configurable: posición de la base (abajo/derecha/izquierda), tamaños, tema (oscuro/claro/automático), teclas rápidas, módulos.
El panel también es extensible: un módulo personalizado es simplemente una clase con/mountdeactivatedestroy/que recibe un contexto con laEditorBridgepara suscripciones seguras.