¿Existe un envoltorio oficial de Angular para GrapesJS?

No existe un paquete oficial @grapesjs/angular. El enfoque estándar es un patrón de envoltura de servicio: un servicio @Injectable GrapesJS inicializa el editor en AfterViewInit y lo destruye en OnDestroy.

¿GrapesJS funciona con Angular 17+?

Sí. GrapesJS es una librería JS vanilla independiente del framework. Los componentes independientes, la nueva sintaxis de flujo de control y la reactividad basada en señales en Angular 17+ son todos compatibles — siempre que inicialices el editor en el lado del cliente después de que el DOM esté listo.

¿Cómo evito la detección de cambios innecesarios?

Inicializa el editor dentro de NgZone.runOutsideAngular(). Esto impide que los eventos internos de GrapesJS activen la detección de cambios angulares en cada fotograma. Solo llama a NgZone.run() cuando actualices el estado del componente de Angular en respuesta a eventos del editor.

¿Debería guardar el JSON del proyecto GrapesJS o solo HTML/CSS?

Guarda ambos. Guarda el JSON del proyecto para reeditar (preservando el árbol de componentes) y guarda instantáneas HTML/CSS renderizadas para publicar, entregar CDN y renderizar de respaldo.

¿Puedo usar esto para un producto SaaS multi-inquilino?

Sí. Aislar el almacenamiento de proyectos por inquilino, aplicar el namespaing por espacio de trabajo de activos y usar guards basados en roles en las acciones de publicación. GrapesJS en sí es sin estado — toda la lógica multi-tenancy está en tus servicios Angular.

Angular Drag-and-Drop Builder — GrapesJS Plugins

22k+

GitHub Stars

MIT

Código abierto

v1.x

TypeScript Ready

45 min

Configuración angular promedio

Patrones constructores angulares

Integra un editor de arrastrar y soltar listo para producción en tu app Angular

GrapesJS es el principal constructor visual de código abierto compatible con cualquier framework JavaScript. Los desarrolladores de Angular utilizan el patrón service-wrapper para gestionar el ciclo de vida del editor, inyectarlo en los componentes y evitar conflictos Zone.js.

Explora los plugins →Guía completa de integración

Lo que necesitan los desarrolladores de Angular en un generador de arrastrar y soltar

Soporte para TypeScript

GrapesJS v1.x incluye definiciones completas de tipos TypeScript — esenciales para proyectos Angular.

Compatibilidad durante el ciclo de vida

Inicializa en ngAfterViewInit, destruye en ngOnDestroy. GrapesJS encaja de forma natural en los ganchos del ciclo de vida de Angular.

Zone.js integración

Utiliza NgZone.runOutsideAngular() para inicializar GrapesJS y evitar ciclos de detección de cambios innecesarios.

Compilación AOT

GrapesJS es una librería JS vanilla sin decoradores específicos de Angular — se compila limpiamente en modo AOT de Angular.

GrapesJS — el mejor framework de constructores compatible con Angular

A diferencia de los constructores nativos de React (Puck, Craft.js), GrapesJS es una biblioteca JavaScript vanilla que se integra con cualquier framework. Los desarrolladores de Angular utilizan el patrón Angular Service para gestionar el ciclo de vida del editor, inyectarlo en los componentes y limpiar el caso de destrucción.

GrapesJS se ha utilizado en aplicaciones empresariales de Angular para CMS, creadores de formularios, diseñadores de informes y productos SaaS de marca blanca. Ver el libro completo Guía de integración GrapesJS Angular para el patrón completo de envoltorio de servicio y ejemplos de TypeScript.

Guía de integración — 4 pasos

Instalar GrapesJS

Instalación de NPM

Ejecuta npm install grapesjs en tu proyecto Angular. Importa el CSS en el array de estilos angular.json.

Crear un servicio GrapesJS

@Injectable

Utiliza un servicio de @Injectable para gestionar la instancia del editor, manteniéndola fuera de la detección de cambios de Angular a través de NgZone.

Inicializar en ngAfterViewInit

AfterViewInit

Usa @ViewChild para obtener una referencia al elemento contenedor. Inicializa el editor una vez que la vista esté completamente renderizada.

Destruir en ngOnDestroy

OnDestroy

Llama a editor.destroy() en ngOnDestroy para limpiar el editor y evitar fugas de memoria cuando se elimina el componente.

Plugins compatibles con Angular

TypeScriptGratis

Tipos GrapesJS TypeScript

Definiciones completas de TypeScript para la integración de Angular — no se necesita un paquete de @types separado.

BloquesGratis

Biblioteca de bloques Pro

Bloques de arrastrar y soltar preconstruidos para aplicaciones empresariales de Angular.

AlmacenamientoGratis

Gestor de Almacenamiento Pro

Persiste el contenido del editor en APIs REST, bases de datos o almacenamiento local.

UIGratis

Plugin de comandos personalizados

Extiende el editor con comandos gestionados por Angular y acciones en la barra de herramientas.

Casos de uso empresariales

🏢

CMS empresarial

Integra GrapesJS como la capa de edición visual de un sistema de gestión de contenidos con autenticación y enrutamiento gestionados por Angular.

📋

Constructor de forma

Diseñador de formularios de arrastrar y soltar integrado en un panel de administración Angular con lógica de validación y envío de formularios reactivos.

📊

Diseñador de informes

Herramienta visual de maquetación para informes personalizados — construida con bloques GrapesJS que representan gráficos, tablas y secciones de texto con marca.

🚀

Creador de plantillas de correo electrónico

Editor de correo HTML con vista previa responsiva, impulsado por el boletín presetado de GrapesJS dentro de una aplicación Angular.

🏷️

Constructor de páginas de aterrizaje

Constructor de páginas de marketing sin código para equipos de contenido, integrado en una plataforma SaaS Angular con permisos basados en roles.

✉️

SaaS de marca blanca

Editor de páginas multiinquilino con temática por cliente, espaciado de nombres de activos y flujos de trabajo de publicación en Angular Universal.

Problemas conocidos y soluciones alternativas

Detección de cambios — envolver eventos en NgZone

GrapesJS dispara todos los eventos fuera de la zona de Angular. Envuelve las llamadas al evento del editor dentro de NgZone.run(() => { ... }) para activar correctamente la detección de cambios en cualquier estado Angular que actualices.

SSR — inicialización de protección con isPlatformBrowser

GrapesJS requiere un DOM de navegador. Al usar Angular Universal, protege la inicialización con isPlatformBrowser(platformId) para evitar errores de renderizado en el lado del servidor.

Temporización del DOM — usa ngAfterViewInit, no ngOnInit

Siempre inicializa GrapesJS en ngAfterViewInit. En ngOnInit, la referencia del contenedor de @ViewChild aún no está disponible y no estará definida.

Preguntas frecuentes

Guías relacionadas

GrapesJS Angular Guide GrapesJS Plugins GrapesJS React Next.js Constructor de páginas

Empieza a construir tu editor visual Angular

Explora los plugins GrapesJS compatibles con Angular en GJS.Market. Enviar más rápido con componentes listos para producción.

Empieza con GrapesJS para Angular →

Angular Drag-and-Drop Visual Builder — GrapesJS Plugins