Creador de páginas Angular con GrapesJS

El editor de stock: lienzo, bloques, árbol de capas, gestor de estilos y conmutador de dispositivos. Esta es la base desde la que empiezas antes de añadir un solo bloque propio.

Crear un creador de páginas requiere mucho más que unos pocos componentes de Angular. Un editor visual listo para producción necesita todos estos antes de que alguien pueda enviar una página con él:

• Arrastrar y soltar
• Lienzo
• Componentes
• Bloques
• Capas
• Estilos
• Edición responsiva
• Gestión de activos
• Plantillas
• Almacenamiento de proyectos
• Exportación
• Publicación

GrapesJS proporciona la base visual de edición para la mayor parte de esa lista, así que tu aplicación Angular puede gastar su presupuesto en tu producto y en tu lógica de negocio. Los dos últimos — donde se almacenan los proyectos y cómo se activan las páginas — siguen siendo tuyos, porque son las partes que tienen que encajar con tu infraestructura.

El núcleo GrapesJS es de código abierto bajo la licencia BSD-3-Clause, versión 0.23.6, sin ninguna tasa de licencia a escala.

El editor es una ruta dentro de tu aplicación, no un sustituto para ella. Todo lo que está encima de la capa de edición se queda exactamente donde ya lo han puesto los equipos de Angular.

1. 01

   Aplicación Angular

   Todo lo que hace que tu producto sea tuyo, sin cambiar.

   • Autenticación
   • Usuarios
   • Facturación
   • Enrutamiento
   • Lógica de negocio
   ↓
2. 02

   Constructor de páginas visual

   Una ruta cargada por pereza, un componente que posee el contenedor y un servicio que posee la instancia del editor.

   • Ruta de editor
   • Componente de editor
   • Servicio de editor
   ↓
3. 03

   GrapesJS

   El motor de edición visual, que se ejecuta dentro del contenedor que proporciona tu componente.

   • Lienzo
   • Componentes
   • Bloques
   • Capas
   • Estilos
   • Activos
   • Mandos
   ↓
4. 04

   Tu backend

   Donde realmente están presentes los datos del proyecto, las subidas y los resultados publicados.

   • Tu API
   • Tu base de datos
   • Almacenamiento de archivos

Angular es el dueño de tu aplicación. GrapesJS alimenta la capa de edición visual.

Nada en la parte superior o inferior lo proporciona el editor. Ese límite es lo que mantiene la integración lo suficientemente superficial como para eliminarla después: el editor nunca se convierte en lo que se construye tu producto.

Un creador genérico de páginas web rara vez es el producto que alguien quiere. Cada capa del editor puede ser reemplazada por algo que encaje con tu aplicación.

// Your content model, not a generic website element.
editor.Components.addType('pricing-table', {
  isComponent: (el) => el.dataset?.gjsType === 'pricing-table',
  model: {
    defaults: {
      tagName: 'section',
      droppable: false,
      traits: ['plan', 'currency', 'billingPeriod'],
    },
  },
});

editor.Blocks.add('pricing-table', {
  label: 'Pricing',
  category: 'Your design system',
  content: { type: 'pricing-table' },
});

La diferencia entre un editor que la gente usa y uno que abandona suele ser lo que hay en la paleta el primer día.

GrapesJS serializa un proyecto a JSON y lo entrega a un adaptador de almacenamiento. Lo que haga ese adaptador es completamente tuyo.

editor.Storage.add('angular-backend', {
  async load() {
    return firstValueFrom(this.http.get(`/api/pages/${this.pageId}`));
  },
  async store(data) {
    return firstValueFrom(this.http.put(`/api/pages/${this.pageId}`, data));
  },
});

grapesjs.init({
  container,
  storageManager: { type: 'angular-backend', autosave: true, stepsBeforeSave: 5 },
});

• Datos del proyecto

  Los componentes, estilos, páginas y recursos se serializan en un documento JSON que puedes almacenar en cualquier columna o colección.

• Guardado automático

  El gestor de almacenamiento puede guardar tras un número configurable de cambios en lugar de solo con una acción explícita.

• Almacenamiento remoto

  Registra un adaptador personalizado y enruta la carga y almacena a través del Angular HttpClient, con tus propios interceptores y headers de autenticación.

• Versión

  Como cada guardado es un documento, guardar el historial es una decisión de backend — el editor no necesita saber que ocurrió.

• Salida HTML/CSS

  Exporta el marcado renderizado junto con el proyecto JSON cuando tu ruta de entrega necesite una salida estática en lugar de un re-renderizado.

• Publicación

  Una página publicada es un registro separado con su propio ciclo de vida. Manténlo apartado del borrador al que escribe el editor.

Tú controlas dónde se almacenan los datos del proyecto.

La autoría y la publicación son problemas diferentes con distintos modos de fallo. El editor resuelve el primero; el segundo permanece en tu infraestructura, donde ya están tus cachés, permisos y rollbacks.

A dónde puede ir la producción publicada

• CMS

  Escribe el resultado de nuevo en el sistema de contenidos que ya ejecuta tu organización.

• REST API

  Publica el proyecto o el marcado renderizado en un endpoint que posea la validación y los permisos.

• Publicación estática

  Renderiza las páginas a archivos en el momento de publicación para que la página en vivo no tenga nada del tiempo de ejecución del editor.

• Backend personalizado

  Almacena, transforma y sirve la salida por el mismo camino que tu aplicación ya utiliza para servir sus páginas.

• CDN

  Empuja los activos publicados y el marcado al borde, con la invalidación de caché que controlas tú.

• Despliegue personalizado

  Activa tu pipeline de build o deploy existente desde la acción de publicación.

GrapesJS se encarga de la autoría. Tu infraestructura puede gestionar la publicación.

Un despliegue de tu aplicación Angular, un editor y un mundo separado de páginas para cada cliente en él.

Nada en el editor tiene que parecerse al editor. Cada superficie que un usuario toca es configurable, reemplazable o removible.

• Tu logo en lugar del cromo del editor
• Tus fichas de color, no un tema de terceros
• Viñetas personalizadas, o tu propio Angular UI que maneja el editor mediante comandos
• Solo los bloques que soporta tu producto
• Plantillas que provienen de tu sistema de diseño
• Tu vocabulario — secciones, módulos, diseños, lo que ya digan tus usuarios
• Roles que deciden quién puede editar, quién puede publicar y quién solo comentar
• Permisos aplicados en el servidor, reflejados en el UI

Convierte un editor visual en una parte nativa de tu producto Angular.

La versión corta, en cuatro pasos. La guía completa — detalles del ciclo de vida, envolventes, detección de cambios sin zona, preocupaciones de producción — está en su propia página y va mucho más allá.

1. 1

   Instalación

   Añade el editor a tu aplicación. Es un paquete npm sencillo sin un paso de compilación específico de Angular.

2. 2

   Crear un servicio de edición

   Mantén la instancia del editor en un servicio inyectable para que el componente se mantenga delgado y la instancia sea fácil de compartir, simular y desmontar.

3. 3

   Inicializar en ngAfterViewInit

   El elemento contenedor debe estar en el DOM antes de crear el editor, porque GrapesJS lo mide inmediatamente.

4. 4

   Destruye correctamente en ngOnDestroy

   Llama a destruir cuando la ruta quede libre. Sin ella, el editor mantiene sus oyentes DOM y la siguiente navegación filtra una instancia.

import { Injectable, NgZone, inject } from '@angular/core';
import grapesjs, { type Editor } from 'grapesjs';

@Injectable({ providedIn: 'root' })
export class PageBuilderService {
  private readonly zone = inject(NgZone);
  private editor?: Editor;

  create(container: HTMLElement): Editor {
    // GrapesJS binds its own DOM listeners to the canvas. Creating it outside
    // Angular keeps every drag frame from scheduling change detection.
    this.editor = this.zone.runOutsideAngular(() =>
      grapesjs.init({
        container,
        height: '100%',
        fromElement: false,
        storageManager: false,
      })
    );

    return this.editor;
  }

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

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnDestroy,
  inject,
  viewChild,
} from '@angular/core';
import { PageBuilderService } from './page-builder.service';

@Component({
  selector: 'app-page-builder',
  standalone: true,
  template: '<div #canvas class="builder"></div>',
  styles: '.builder { height: 100vh; }',
})
export class PageBuilderComponent implements AfterViewInit, OnDestroy {
  private readonly builder = inject(PageBuilderService);
  private readonly canvas = viewChild.required<ElementRef<HTMLElement>>('canvas');

  ngAfterViewInit(): void {
    // The container has to be in the DOM first: GrapesJS measures it on init.
    this.builder.create(this.canvas().nativeElement);
  }

  ngOnDestroy(): void {
    // Without this the editor keeps its listeners after the route changes.
    this.builder.destroy();
  }
}

GrapesJS emite sus propios eventos, y esos eventos no provienen de Angular. Coordinar ambos son unas pocas líneas, pero saltárselas produce los dos fallos que cada integración detecta primero.

editor.on('storage:end:store', () => {
  // Editor events fire outside Angular because the editor was created there.
  // Re-enter the zone before touching state the template renders.
  this.zone.run(() => this.lastSavedAt.set(new Date()));
});

Crea el editor dentro de runOutsideAngular para que la interacción con canvas no programe la detección de cambios en cada fotograma, y luego vuelve a entrar en la zona en el puñado de gestores de eventos que realmente actualizan el estado que renderiza tu plantilla. En una aplicación sin zona, los mismos manejadores actualizan señales y el envoltorio exterior ya no es necesario.

GrapesJS necesita un navegador DOM. En Angular, SSR o Angular Universal, eso significa que el editor se crea solo en el navegador — la ruta alrededor de él sigue renderizándose en el servidor con normalidad.

import { PLATFORM_ID, inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class PageBuilderComponent implements AfterViewInit {
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  ngAfterViewInit(): void {
    // There is no DOM on the server and GrapesJS needs one, so the editor is
    // created in the browser only. The rest of the route still renders on the
    // server as usual.
    if (!this.isBrowser) return;
    this.builder.create(this.canvas().nativeElement);
  }
}

La integración es código Angular normal, que es lo principal que merece la pena mencionar al respecto.

• Compatible con TypeScript

  El editor envía sus propias definiciones de tipos, por lo que la instancia, su configuración y sus eventos se escriben en el sitio de la llamada.

• Ciclo de vida Angular

  La creación y el desmontaje dependen de ngAfterViewInit y ngOnDestroy — no hay arranque manual fuera del árbol de componentes.

• Compatible con AO

  Nada en la integración depende de la compilación de plantillas en tiempo de ejecución, así que la ruta del editor se construye como cualquier otra ruta cargada por pereza.

• Inicialización solo en navegador

  Cuando SSR está en juego, solo la creación del editor está protegida por el navegador; el resto del componente compila y renderiza normalmente.

El motor te da la superficie de edición. Todo lo que un producto específico necesita encima — la paleta de bloques, el sistema de plantillas, el texto enriquecido, la persistencia, la salida hacia la producción — es donde entran en juego los plugins GJS.Market. Cada anuncio a continuación es un producto real, con el precio mostrado.

Bloques

Problema: un editor nuevo tiene una paleta vacía y nadie construye una página con un <div> sin usar.

Explora esta categoría

Bloques

Plugin Basic Blocks

La paleta inicial: columnas, texto, imágenes, enlaces y vídeo, para que el lienzo sea utilizable desde el primer día.

GratisPlugin de visualización

Bloques

Grapesjs Tailwind

Bloques basados en Tailwind, para que las páginas que los usuarios creen salgan igualando un sistema de diseño de utilidad que ya usas.

GratisPlugin de visualización

Bloques

GrapesJS Bootstrap v5 Blocks

Bloques de cuadrícula y componentes Bootstrap 5 para equipos cuyo sistema de diseño ya es Bootstrap.

GratisPlugin de visualización

Bloques

Super Header for GrapesJS

Un encabezado editado una vez y reutilizado en cada página, en lugar de que las copias se separaran.

39,00 US$Plugin de visualización

Plantillas y páginas

Problema: los usuarios necesitan un punto de partida, y los proyectos de varias páginas necesitan un gestor que el editor no incluye.

Explora esta categoría

Plantillas

Templates Manager

Una biblioteca de plantillas dentro del editor, para que una nueva página empiece desde un diseño terminado.

39,00 US$Plugin de visualización

Páginas

Pages Manager

Proyectos de varias páginas con una lista de páginas, así que un constructor gestiona un sitio en lugar de un solo documento.

25,00 US$Plugin de visualización

Bloques

Users Blocks

Permite a los usuarios guardar sus propias secciones como bloques reutilizables: tu paleta crece sin que hayas enviado nada.

59,00 US$Plugin de visualización

Proyectos

Grapesjs Project Manager

Navegación y gestión de proyectos alrededor del editor, para equipos que trabajan en más de una cosa a la vez.

GratisPlugin de visualización

Texto y formularios

Problema: todo el mundo asume que el texto enriquecido y los formularios de trabajo están integrados. Ninguno lo está, más allá de lo básico.

Explora esta categoría

Formularios

Plugin Forms

Componentes de formulario con entradas, selecciones y validación traits, listos para enviar a tus endpoints.

GratisPlugin de visualización

RTE

GrapesJS Inline Text Editor — Compatible with CKEditor 5

Sustituye el editor de texto enriquecido integrado por CKEditor 5 para equipos que necesitan una edición de texto seria.

69,00 US$Plugin de visualización

RTE

TinyMCE 8 Inline Text Editor

Lo mismo con TinyMCE 6 — familiar para cualquiera que venga de un CMS tradicional.

69,00 US$Plugin de visualización

RTE

Grapesjs RTE Extensions

Controles de formato adicionales en el editor de texto enriquecido por defecto sin añadir dependencia de terceros.

GratisPlugin de visualización

Almacenamiento y salida

Problema: el prototipo que nunca persistió en nada es el que nunca se lanzó.

Explora esta categoría

Almacenamiento

IndexedDB Storage

Persistencia local en el navegador: útil para borradores, edición offline y entornos de previsualización.

GratisPlugin de visualización

Almacenamiento

Directus Storage

Almacena proyectos en Directus, si un backend headless ya forma parte de tu stack.

GratisPlugin de visualización

Exportación

Export Zip

Descarga una página como ZIP de HTML, CSS y assets — la ruta de exportación más sencilla posible.

GratisPlugin de visualización

Publicación

Grapesjs Netlify

Publica directamente en Netlify, para productos cuya salida es un sitio estático alojado.

GratisPlugin de visualización

Ambas columnas terminan con un constructor en funcionamiento. Difieren en cuánto de él sigues manteniendo en dos años.

GrapesJS proporciona la base de edición visual. Los plugins de GJS.Market te permiten ampliar tu constructor con capacidades adicionales en lugar de construir todas las funciones internamente.

Usa Angular para tu aplicación y GrapesJS para la experiencia de edición visual. Añade tus propios componentes, bloques, plantillas, flujo de trabajo de almacenamiento y publicación — y luego amplía el generador con plugins GJS.Market cuando necesites más.