GrapesJS Angular:Construye un editor visual con Angular

La versión estándar de GrapesJS — el editor que obtienes de 'GrapesJS.init()' con el preajuste estándar, antes de añadir cualquier plugin. Arrastra un bloque desde el panel derecho, seleccionarlo y edita su tipografía y espaciado en el gestor de estilos.

GrapesJS es el motor de edición visual. Angular es el framework de la aplicación. Casi todos los problemas de integración que la gente tiene surgen de esperar que uno haga el trabajo del otro, así que merece la pena ser explícito sobre la línea entre ellos.

Angular es tu aplicación. GrapesJS es tu motor de edición visual.

Una dependencia y una hoja de estilo. GrapesJS incluye su propio CSS, y sin él el editor se monta pero se renderiza como marcado sin estilo — que es la razón más común por la que una primera integración parece rota.

1 — Añadir la dependencia

2 — Registrar la hoja de estilos

// angular.json → projects.<app>.architect.build.options
{
  "styles": [
    "src/styles.css",
    "node_modules/grapesjs/dist/css/grapes.min.css"
  ]
}

Registrar la hoja de estilo en angular.json lo aplica globalmente. Si el editor vive en una ruta cargada de forma perezosa y prefieres no pagar por el CSS en todas partes, impórtalo dentro de la hoja de estilo propia del componente del editor.

Antes de escribir el componente

Tres archivos, nada generado, nada oculto. Cópialos en una aplicación Angular y tienes un editor visual funcional en una ruta. Todo lo que aparece más adelante en esta página — almacenamiento, recursos, componentes personalizados, plugins — es una adición a este componente, no una reescritura de él.

// editor.component.ts
import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  ViewChild,
} from '@angular/core';
import grapesjs, { type Editor } from 'grapesjs';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrl: './editor.component.css',
})
export class EditorComponent implements AfterViewInit, OnDestroy {
  // Resolved by the time ngAfterViewInit runs — that is the whole reason
  // initialisation lives there and not in ngOnInit.
  @ViewChild('editorHost') private host!: ElementRef<HTMLDivElement>;

  private editor?: Editor;

  ngAfterViewInit(): void {
    this.editor = grapesjs.init({
      container: this.host.nativeElement,
      height: '100%',
      width: 'auto',
      fromElement: false,
      // No persistence yet. Wire your own API before shipping — see Storage.
      storageManager: false,
      blockManager: {
        blocks: [
          {
            id: 'section',
            label: 'Section',
            category: 'Layout',
            content: '<section class="section"><h2>Headline</h2></section>',
          },
          {
            id: 'text',
            label: 'Text',
            category: 'Basic',
            content: { type: 'text', content: 'Edit me' },
          },
          { id: 'image', label: 'Image', category: 'Basic', content: { type: 'image' } },
        ],
      },
    });
  }

  ngOnDestroy(): void {
    // GrapesJS owns DOM nodes, document listeners and an undo stack. Angular
    // removes the host element; only destroy() releases the rest.
    this.editor?.destroy();
    this.editor = undefined;
  }
}

<!-- editor.component.html -->
<!-- GrapesJS takes this element over completely. Do not render Angular
     content inside it — the editor owns everything below #editorHost. -->
<div class="editor-shell">
  <div #editorHost class="editor-host"></div>
</div>

/* editor.component.css */
.editor-shell {
  display: block;
  block-size: 100dvh;
}

/* GrapesJS measures its container at init. A host with no resolved height
   produces an editor that mounts successfully and renders nothing. */
.editor-host {
  block-size: 100%;
}

Esa es toda la integración. Las partes que merece la pena releer son los dos ganchos del ciclo de vida: la inicialización en ngAfterViewInit porque el contenedor tiene que existir primero, y destroy() en ngOnDestroy porque la eliminación de Angular del elemento anfitrión no libera lo que GrapesJS está adjunto al documento.

Carga el editor por su propia ruta

El editor es lo más pesado en la mayoría de aplicaciones que lo contienen con él. Ponerlo detrás de una ruta cargada perezosamente lo mantiene fuera del paquete inicial para todos los usuarios que nunca lo abren.

// app.routes.ts — the editor is the heaviest route in the app. Load it last.
import type { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '', loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent) },
  {
    path: 'pages/:id/edit',
    loadComponent: () => import('./editor/editor.component').then((m) => m.EditorComponent),
  },
];

La vida útil del editor debe estar vinculada a la del componente. Cuatro piezas hacen ese trabajo, y cada una falla de forma reconocible cuando falta.

GrapesJS conecta un gran número de oyentes a su lienzo y los lanza continuamente mientras un componente se arrastra o redimensiona. En una aplicación Angular basada en zonas, cada uno de esos oyentes programa un pase de detección de cambios, aunque nada en tu árbol de componentes haya cambiado.

// editor.component.ts (excerpt)
import { Component, NgZone, inject, signal } from '@angular/core';

export class EditorComponent {
  private readonly zone = inject(NgZone);

  readonly selectedTag = signal('');
  readonly savedAt = signal<Date | null>(null);

  private mount(host: HTMLElement): void {
    // The canvas fires pointer events continuously while a block is being
    // dragged. Creating the editor outside the zone keeps those from
    // scheduling a change-detection pass on every frame.
    this.zone.runOutsideAngular(() => {
      const editor = grapesjs.init({ container: host, height: '100%' });

      // Re-enter only where editor state has to become Angular state.
      editor.on('component:selected', (component) => {
        this.zone.run(() => this.selectedTag.set(component.get('tagName') ?? ''));
      });

      editor.on('storage:end:store', () => {
        this.zone.run(() => this.savedAt.set(new Date()));
      });

      this.editor = editor;
    });
  }
}

// Zoneless applications (provideZonelessChangeDetection) have no zone to
// leave. Set signals from the same editor events and drop NgZone entirely.

• Crea el editor dentro de NgZone.runOutsideAngular() para que la actividad en canvas no provoque la detección de cambios.
• Vuelve a introducir con NgZone.run() solo en los manejadores donde el estado del editor debe convertirse en el estado Angular — una selección, una marca de tiempo de guardado, un error de validación.
• Si nada en tu UI refleja el estado del editor, nunca necesitas volver a entrar.
• En una aplicación sin zona (provideZonelessChangeDetection) no hay zona que salir: escribir en señales del mismo editor eventos y eliminar NgZone por completo.

El editor se ejecuta en el navegador. GrapesJS construye su lienzo a partir de DOM real — mide elementos, crea un iframe y adjunta oyentes de documentos — por lo que la inicialización debe ocurrir en un contexto de navegador y no debe ejecutarse durante el renderizado del servidor. Las rutas que simplemente muestran la salida publicada no se ven afectadas: es decir, HTML y CSS puros y se renderizan en el servidor como cualquier otra cosa.

// editor.component.ts — browser-only initialisation
import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  PLATFORM_ID,
  ViewChild,
  inject,
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import type { Editor } from 'grapesjs';

export class EditorComponent implements AfterViewInit, OnDestroy {
  @ViewChild('editorHost') private host!: ElementRef<HTMLDivElement>;

  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
  private editor?: Editor;

  async ngAfterViewInit(): Promise<void> {
    if (!this.isBrowser) return;

    // A dynamic import keeps the editor out of the server bundle and off the
    // critical path of every route that never opens it.
    const { default: grapesjs } = await import('grapesjs');
    this.editor = grapesjs.init({ container: this.host.nativeElement });
  }

  ngOnDestroy(): void {
    this.editor?.destroy();
  }
}

• Protege la inicialización para que solo se ejecute en el navegador — tanto la comprobación de plataforma como el gancho de renderizado de abajo hacen esto.
• Importa la biblioteca dinámicamente para que nunca entre en el paquete del servidor.
• Renderiza un marcador de posición del mismo tamaño durante el pase del servidor para evitar un cambio de disposición cuando aparezca el editor.
• Las rutas publicadas que solo renderizan los HTML y CSS almacenados no necesitan ninguna protección.

La alternativa al gancho de renderizado

Las versiones recientes de Angular ofrecen un gancho de renderizado cuyas llamadas se ejecutan solo en plataformas de navegador y nunca en el servidor. Cuando está disponible, expresa la misma garantía sin verificación de plataforma, y se empareja de forma natural con consultas de vista basadas en señales.

// The same guard, expressed with the render hook instead of a platform check.
import { Component, ElementRef, afterNextRender, viewChild } from '@angular/core';
import type { Editor } from 'grapesjs';

@Component({ selector: 'app-editor', template: '<div #editorHost></div>' })
export class EditorComponent {
  private readonly host = viewChild.required<ElementRef<HTMLDivElement>>('editorHost');
  private editor?: Editor;

  constructor() {
    // afterNextRender callbacks run on browser platforms only — they never
    // execute on the server, so no isPlatformBrowser check is needed.
    afterNextRender(async () => {
      const { default: grapesjs } = await import('grapesjs');
      this.editor = grapesjs.init({ container: this.host().nativeElement });
    });
  }
}

Comprueba cuáles de estos soporta tu versión de Angular antes de elegir. Ambos patrones existen para hacer cumplir la misma regla: el editor se inicializa en el navegador y en ningún otro sitio. angular.dev

Un creador de páginas no es una sola función. Son nueve subsistemas que deben coincidir entre sí, y GrapesJS incluye los nueve. Esta es la visión general; las decisiones a nivel de producto — precios, roles, plantillas, flujo de trabajo de publicación — pertenecen a la guía dedicada enlazada a continuación.

• GrapesJS

  Canvas

  La superficie editable, renderizada en su propio iframe para que los estilos de página no puedan filtrarse en tu UI administrativo.

• GrapesJS

  Componentes

  El modelo tipado detrás de cada elemento: qué es, qué acepta y qué ajustes expone.

• GrapesJS

  Gestor de bloques

  La paleta de la que los usuarios arrastran. Un bloque es un fragmento de contenido con nombre asignado a un tipo de componente.

• GrapesJS

  Gestor de estilos

  El panel de edición CSS, configurable hasta qué propiedades puede cambiar un usuario determinado.

• Plugin

  Gestor de recursos

  Selección de imágenes y medios. El endpoint de subida detrás es tuyo, así que aquí los plugins suelen conectarlo a un proveedor.

• Tu app Angular

  Gestor de almacenamiento

  Carga y guarda. GrapesJS define el contrato y llama a tu API — la persistencia en sí es de tu aplicación.

• GrapesJS

  Comandos

  Acciones nombradas y llamables — deshacer, previsualizar, exportar y cualquier cosa que registres tú mismo para botones de la barra de herramientas.

• GrapesJS

  Administrador de dispositivos

  Los puntos de interrupción responsivos del lienzo se pueden previsualizar y estilizar.

• GrapesJS

  Paneles

  El propio Chrome del editor — botones, barras de herramientas y regiones, todos reemplazables si el editor está dentro de un shell existente.

Ocho de los nueve vienen con el editor o con un plugin. El que es inevitablemente tuyo es el almacenamiento — que también es el que debe conocer a tus usuarios, tus permisos y tu base de datos.

Tres artefactos, y mezclarlos provoca una pérdida real de datos. Los datos del proyecto son el documento editable; HTML y CSS son el resultado publicado. No son intercambiables, porque la exportación es con pérdida por diseño.

// Three outputs, three different jobs. Do not use one where you need another.

const projectData = editor.getProjectData(); // editable state → store this
const html = editor.getHtml();               // markup         → publish this
const css = editor.getCss();                 // styles         → publish this

// Reopening a saved project restores components, styles, pages and assets.
// Re-parsing exported HTML does not — it loses everything not in the markup.
editor.loadProjectData(projectData);

Reparar HTML exportado de nuevo al editor no sustituye los datos del proyecto: pierde tipos de componentes, traits, estructura de página y cualquier otra cosa que no era expresable en el marcado. GrapesJS es un editor, no un CMS ni un backend — dónde van los artefactos y qué les ocurre después, es decisión de tu aplicación.

El gestor de recursos es un selector, no un servicio de archivos. Apúntalo a un punto final en tu aplicación Angular y PUBLICARÁ los archivos allí; todo lo que viene después de eso — validación, almacenamiento, redimensionamiento, entrega — es tuyo para implementar, lo que hace posible reutilizar la biblioteca multimedia que ya tienes.

// Assets go to your endpoint, under your auth — GrapesJS only POSTs files.
grapesjs.init({
  container: host,
  assetManager: {
    upload: `/api/projects/${projectId}/assets`,
    uploadName: 'files',
    multiUpload: true,
    credentials: 'include',
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
    // Off by default is the safer choice: base64 images end up inside saved
    // markup and make every page row grow without limit.
    embedAsBase64: false,
    // Returning false aborts the upload before the request leaves the browser.
    beforeUpload: (files: File[]) =>
      files.every((file) => file.size <= MAX_UPLOAD_BYTES && ALLOWED_TYPES.has(file.type)),
  },
});

editor.on('asset:upload:start', () => this.uploading.set(true));
editor.on('asset:upload:end', () => this.uploading.set(false));
editor.on('asset:upload:error', (error) => this.uploadError.set(String(error)));

• Las subidas van a tu endpoint con tus cabeceras y credenciales, así que se aplica la misma autenticación que el resto de la app.
• Valida antes de que la solicitud salga del navegador y vuelva a entrar en el servidor — la comprobación del lado del cliente es de conveniencia, no de control.
• Devuelve las URLs almacenadas desde tu endpoint; el editor introduce esas URLs en la página, así que deben ser las que pretendes servir.
• Desactiva la incrustación en base64 a menos que quieras imágenes en línea en el marcado guardado, donde hacen que cada página almacenada crezca sin límite.
• Sirve recursos desde un CDN o un almacén de objetos y mantén el editor apuntando a la URL pública, no al origen de tu aplicación.
• Carga grandes librerías a través de un endpoint paginado en lugar de entregar miles de recursos al editor al inicializar.

Nada de esto prescribe un backend concreto. S3, Cloudinary, un disco Laravel o una carpeta en un servidor cumplen todos el mismo contrato: aceptar un archivo, devolver una URL.

Registrar un tipo de componente es la forma en que el editor aprende sobre tu producto. Un tipo personalizado tiene su propio panel de configuración, sus propias reglas de arrastrar y soltar y un bloque en la paleta — así que los equipos de contenido trabajan con conceptos de tu dominio en lugar de divs en bruto.

// pricing-table.type.ts — an application-specific building block.
import type { Editor } from 'grapesjs';

export function registerPricingTable(editor: Editor): void {
  editor.Components.addType('pricing-table', {
    // Lets the editor recognise the type again when a saved page is reparsed.
    isComponent: (el) => el.classList?.contains('pricing-table'),
    model: {
      defaults: {
        tagName: 'section',
        attributes: { class: 'pricing-table' },
        droppable: false,
        // Traits become the right-hand settings panel for this component.
        traits: [
          { type: 'text', name: 'plan', label: 'Plan name' },
          { type: 'number', name: 'price', label: 'Price' },
          { type: 'checkbox', name: 'featured', label: 'Highlight' },
        ],
        components: `
          <h3 data-gjs-type="text">Team</h3>
          <p data-gjs-type="text">$29 / month</p>
        `,
      },
    },
  });

  // A block is how the component reaches the user: one entry in the palette.
  editor.Blocks.add('pricing-table', {
    label: 'Pricing table',
    category: 'Commerce',
    content: { type: 'pricing-table' },
  });
}

Componentes típicos específicos de la aplicación

• Sección Hero
• Tabla de precios
• Tarjeta de producto
• Formulario
• Navegación
• Testimonio
• Cuadrícula de características
• Cualquier cosa específica para tu SaaS

Dos cosas hacen útil un tipo personalizado. isComponent permite que el editor reconozca tu tipo de nuevo cuando se vuelve a analizar una página guardada, y traits se convierte en el panel de ajustes que un usuario no técnico realmente edita. Ambos merecen la pena escribirlos incluso para un componente simple.

Un plugin es una función que recibe la instancia del editor, así que nada aquí es específico de Angular — cualquier cosa publicada para GrapesJS funciona dentro de un componente Angular. Estos son los cuatro huecos que los equipos encuentran primero después de que el editor se monta.

Bloques y preajustes

Lo que arrastran los usuarios. Un editor básico casi no tiene nada en la paleta, así que esto es lo primero que añade cada integración.

Explora la categoría

Plugin Basic Blocks

La paleta inicial — los bloques que un nuevo editor no tiene en la primera ejecución.

GratisPlugin de visualización

Grapesjs Tailwind

Tailwind asignaturas en el editor, si tu app de Angular ya incluye Tailwind.

GratisPlugin de visualización

GrapesJS Bootstrap v5 Blocks

Bootstrap 5 componentes como bloques arrastrables.

GratisPlugin de visualización

Super Header for GrapesJS

Secciones de cabecera configurables en lugar de marcado hecho a mano.

39,00 US$Plugin de visualización

Almacenamiento y proyectos

Persistencia, autosave y gestión multi-proyecto — la capa alrededor del contrato de almacenamiento de la sección anterior.

Explora la categoría

Grapesjs Project Manager

Varios proyectos en un solo editor, con una lista de proyectos UI.

GratisPlugin de visualización

IndexedDB Storage

Persistencia local en el navegador — útil para borradores y edición offline.

GratisPlugin de visualización

Autosave & Restore — Crash Recovery for GrapesJS

Recupera trabajo no guardado tras un fallo o una navegación accidental.

12,00 US$Plugin de visualización

Directus Storage

Almacenamiento respaldado por una instancia Directus en lugar de un endpoint personalizado.

GratisPlugin de visualización

Texto enriquecido y formularios

Mejor edición de texto en línea y componentes reales de formulario. Ambas son capacidades que los usuarios asumen que están integradas.

Explora la categoría

GrapesJS Inline Text Editor — Compatible with CKEditor 5

Sustituye el editor de texto enriquecido integrado por CKEditor 5.

69,00 US$Plugin de visualización

TinyMCE 8 Inline Text Editor

Sustituye el editor de texto enriquecido integrado por TinyMCE 6.

69,00 US$Plugin de visualización

Grapesjs RTE Extensions

Controles de formato extra en la barra de herramientas de texto enriquecido predeterminada.

GratisPlugin de visualización

Plugin Forms

Componentes de formulario con entradas reales, traits de validación y ajustes de envío.

GratisPlugin de visualización

Recursos, exportación y correo electrónico

Proveedores multimedia, formatos de exportación y el preajuste de correo electrónico, para las superficies en las que crece un constructor.

Explora la categoría

Grapesjs Cloudinary

Cloudinary como backend de recursos, incluyendo transformaciones.

GratisPlugin de visualización

Export Zip

Exporta la página como un código postal descargable de HTML, CSS y recursos.

GratisPlugin de visualización

MJML Preset

MJML bloquea para que el mismo editor pueda producir marcado seguro para correo electrónico.

GratisPlugin de visualización

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

La accesibilidad y el SEO se revisan dentro del editor antes de publicar una página.

GratisPlugin de visualización

Construir un editor visual es posible en Angular — es una cantidad de trabajo conocida, no imposible. La cuestión es qué partes quieres poseer durante toda la vida del producto.

"Construir" no es una crítica — todas estas son construibles. Es una declaración de quién la mantiene después.
Los hechos de esta tabla han vuelto a verificar 2026-09-02.

No, y merece la pena entender por qué surge la pregunta. GrapesJS publica un wrapper oficial de React, así que los desarrolladores esperan razonablemente un equivalente a Angular. No hay uno. Eso deja tres enfoques, y para la mayoría de los equipos el primero es la respuesta correcta.

Una demo es un componente. Un producto tiene cuatro capas, y el editor es solo una de ellas. Esta es la forma en la que convergen la mayoría de los equipos una vez que el editor tiene usuarios reales detrás.

1. 01

   Aplicación Angular

   La carcasa, el router y una ruta cargada de forma perezosa que posee el editor.

   • Shell de la aplicación
   • Router
   • Ruta del editor (carga diferida)
   ↓
2. 02

   Instancia GrapesJS

   Configurado una vez, al inicializar: qué componentes existen, cuáles se pueden arrastrar, qué se pueden estilizar.

   • Componentes
   • Bloques
   • Estilos
   • Recursos
   • Comandos
   ↓
3. 03

   Servicios de aplicación

   La capa Angular entre el editor y tu API — y el único lugar que las decisiones de autorización se toman en el lado del cliente.

   • Auth
   • Cliente API
   • Permisos
   • Publicación
   ↓
4. 04

   Backend

   Donde viven los artefactos y donde cada permiso se hace cumplir de verdad.

   • Proyectos
   • Recursos
   • Usuarios
   • Versiones

Nada en este diagrama es específico de GrapesJS excepto el segundo nivel. Ese es el punto: el editor es un componente en una aplicación Angular ordinaria, y el resto es la arquitectura que habrías construido de todas formas.

El editor es un gran software que se ejecuta dentro de tu aplicación. Estos son los lugares donde eso realmente cuesta algo.

Doce cosas que separan una demo funcional de una ruta que se puede ofrecer a los usuarios reales.

1. ✓

   Instalar GrapesJS

   Dependencia añadida y la hoja de estilo registrada, globalmente o en el componente del editor.

   Lee la sección
2. ✓

   Inicializar después de la creación de la vista

   grapesjs.init() se ejecuta en ngAfterViewInit, contra un contenedor con una altura resuelta.

   Lee la sección
3. ✓

   Destruye el editor correctamente

   editor.destroy() en ngOnDestroy, verificado navegando de vuelta y vuelta sin filtraciones.

   Lee la sección
4. ✓

   Gestionar la inicialización solo del navegador

   Protegido para que nada funcione durante un render del servidor, con un marcador en su lugar.

   Lee la sección
5. ✓

   Conectar almacenamiento

   Un almacenamiento nombrado se registró, ajustó el autosave y el proyecto JSON se almacenó junto a HTML y CSS.

   Lee la sección
6. ✓

   Configurar recursos

   Las subidas apuntan a tu endpoint, el embedding de base64 se apaga, validación en ambos lados.

   Lee la sección
7. ✓

   Añadir componentes personalizados

   Los propios bloques de construcción de tu producto se registraron como tipos, con entradas de traits y paleta.

   Lee la sección
8. ✓

   Añade los plugins que necesites

   Bloques, texto enriquecido y exportación elegidos deliberadamente en lugar de acumulados.

   Lee la sección
9. ✓

   Permisos de implementación

   Quién puede editar, quién puede publicar — lo que se impone en el servidor, reflejado en el UI.

   Lee la sección
10. ✓

    Sanitize contenido publicado

    Sanitización en el servidor entre guardar una página y servirla a los visitantes.

    Lee la sección
11. ✓

    Errores del editor de monitores

    Las excepciones del editor se reportan en el mismo lugar que el resto de tus errores Angular.

12. ✓

    Edición responsiva a pruebas

    El administrador de dispositivos se ejercía en un dispositivo táctil, no solo en la ventana del navegador de escritorio.

    Lee la sección

Empieza con el editor visual de código abierto, conéctalo a tu aplicación Angular y amplíala con los plugins e integraciones que tu producto necesite.