Creador de páginas Vue con GrapesJS

El editor de stock sin tema aplicado. Esto es lo que obtienes antes de configurar nada — el punto de partida desde el que todos los constructores de abajo fueron personalizados.

Un creador de páginas de producción es mucho más que unos pocos componentes Vue. Es un lienzo, un sistema de arrastrar y soltar, un modelo de componentes, un motor de estilo, edición responsiva, deshacer historial, gestión de recursos, almacenamiento y exportación. Aquí está toda la superficie y quién acaba poseyendo cada pieza.

• Núcleo GrapesJS

  Lienzo de edición

  Un documento aislado que los usuarios editan directamente, con sus propios estilos y desplazamientos.

• Núcleo GrapesJS

  Arrastrar y soltar

  Drop targets, puntos de inserción, reordenación y reglas de anidamiento.

• Núcleo GrapesJS

  Modelo de componentes

  Elementos tipados con sus propios ajustes, restricciones y comportamiento.

• Núcleo GrapesJS

  Selección y barras de herramientas

  Haz clic para seleccionar, pasa el cursor en contornos, barras de herramientas por elemento y insignias.

• Núcleo GrapesJS

  Style Manager

  Tipografía, color, espaciado y controles de disposición vinculados a los selectores.

• Núcleo GrapesJS

  Edición responsiva

  Anchos de dispositivo y estilos con alcance de punto de ruptura en el mismo lienzo.

• Núcleo GrapesJS

  Layer Manager

  Un árbol de la página para que las estructuras profundas se mantengan navegables.

• Núcleo GrapesJS

  Deshacer y rehacer

  Un historial de comandos en cada edición, no solo en texto.

• Núcleo GrapesJS

  Exportación HTML y CSS

  Limpia el marcado y la hoja de estilo generados a partir del documento actual.

• Plugins

  Biblioteca de bloques

  Las secciones listas que los usuarios arrastran. Tuyas o instaladas.

• Plugins

  Plantillas

  Configura los diseños iniciales completos para que nadie encuentre un lienzo en blanco.

• Plugins

  Gestión de activos

  Subidas, bibliotecas multimedia y gestión de imágenes.

• Plugins

  Edición de texto enriquecido

  Formato de texto en línea más allá del editor integrado.

• Plugins

  Proyectos de varias páginas

  Más de una página dentro de un mismo proyecto.

• Tu app Vue

  Almacenamiento

  Donde se escriben y leen los datos del proyecto. Tu API, tu base de datos.

• Tu app Vue

  Autenticación y roles

  Quién puede abrir, editar y publicar qué proyecto.

• Tu app Vue

  Multi-inquilina

  Aislar las páginas, recursos y plantillas de un cliente de las de otro.

• Tu app Vue

  Publicación y alojamiento

  Convertir la salida aprobada en una página activa en tu infraestructura.

• Tu app Vue

  Planes y facturación

  A qué tiene derecho cada cliente y a qué paga por ello.

La columna del medio es el objetivo de GJS.Market: es una capacidad real que instalas en lugar de programar. La columna de la derecha nunca se convierte en problema de nadie más — ese es tu producto, y esta página es explícita sobre ello en cada sección que lo toca.

GrapesJS no es un sustituto de tu aplicación ni un servicio alojado. Es un motor de edición que se monta en un elemento de una ruta. Todo lo que está arriba y debajo de él en este diagrama sigue siendo tuyo.

1. 01

   Tu solicitud Vue / Nuxt

   Todo lo que hace que el producto sea tuyo. GrapesJS no tiene opinión sobre nada de eso.

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

   El editor GrapesJS

   Una instancia montada, dentro de un componente, en una ruta. Esta es la capa que no estás construyendo.

   • Lienzo
   • Bloques
   • Componentes
   • Estilos
   • Capas
   • Activos
   ↓
3. 03

   Tu backend

   El editor te entrega dos artefactos y una transmisión multimedia. Lo que ocurre a continuación es decisión de tu API.

   • Proyecto JSON
   • HTML + CSS
   • Medios de comunicación
   • Roles
   ↓
4. 04

   Tu base de datos

   Filas ordinarias en un esquema que diseñaste. Nada aquí es un formato GrapesJS que tengas que adoptar.

   • Proyectos
   • Versiones
   • Inquilinos
   • Páginas

Léelo de arriba a abajo: tu aplicación Vue autentica al usuario y lo dirige a una página de editor; el editor produce los datos del proyecto; tu API los escribe en tu base de datos. El editor nunca se comunica con tu base de datos, y tu base de datos nunca tiene que entender al editor.

No. Esta es la primera pregunta que hacen la mayoría de los desarrolladores de Vue, y la respuesta cambia cómo se lee el resto de la página. Las dos capas no se solapan: una ejecuta tu aplicación, la otra una superficie de edición dentro de ella.

Una advertencia honesta mientras estamos aquí: el lienzo renderiza DOM liso dentro de un iframe, no componentes montados en Vue. Tu app es Vue; lo que tus usuarios editan es HTML y CSS que tu app renderiza como quiera.

La diferencia entre un creador genérico de sitios web y uno que pertenece a tu producto es el conjunto de componentes. No fuerces tu modelo de contenido en los tipos de elementos de otra persona: registra el tuyo propio.

// builder/registerProductBlocks.ts
import type { Editor } from 'grapesjs';

// A plugin is just a function that receives the editor, so everything below
// works identically in Vue, Nuxt, React or a plain HTML page.
export function registerProductBlocks(editor: Editor): void {
  // A custom component type: your own element, with your own settings.
  editor.DomComponents.addType('pricing-table', {
    isComponent: (el) => el.dataset?.gjsType === 'pricing-table',
    model: {
      defaults: {
        droppable: false,
        traits: [
          { name: 'plan', type: 'select', options: ['free', 'pro', 'team'] },
          { name: 'highlight', type: 'checkbox' },
        ],
      },
    },
  });

  // A block: what the user actually drags in from the panel.
  editor.BlockManager.add('pricing-table', {
    label: 'Pricing',
    category: 'Sections',
    content: { type: 'pricing-table' },
  });
}

• Un tipo de componente define qué es un elemento: qué acepta, qué rechaza y qué ajustes expone.
• Un bloque es lo que los usuarios ven en el panel: el mismo tipo puede respaldar varios bloques con diferentes presets.
• Los rasgos se convierten en la barra lateral de la configuración, para que tus usuarios configuren los elementos en lugar de editar el marcado.
• Las restricciones de 'droppable: false' y de coincidencia son la forma de evitar que un componente diseñado se desmonte.
• Los comandos te permiten adjuntar tus propias acciones: publicar, duplicar a otro inquilino, solicitar revisión.
• Nada de esto es específico de Vue: un plugin es una función que recibe el editor, así que también funciona en Nuxt, React o en HTML normal.

No fuerces tu producto a un creador de sitios web genérico. Personaliza el editor en función de tu propio modelo de contenido y sistema de diseño.

Un lienzo sin restricciones produce páginas que avergüenzan al producto en el que viven. El editor es configurable en ambas direcciones — el entorno útil no es la máxima libertad, es la libertad acotada.

Da a los usuarios libertad creativa sin permitir que rompan el sistema de diseño de tu producto.

El mayor factor que determina si un creador de páginas se utiliza es lo que está esperando en el panel de bloques en la primera visita. Construye las secciones que tu producto realmente necesita, o instala una biblioteca y cámbiala el nombre.

• Hero

  Titular, línea de apoyo y acción principal.

• Cuadrícula de características

  Una cuadrícula repetitiva de capacidades o beneficios.

• Precios

  Columnas de planeo con reportajes y una llamada a la acción.

• Testimonios

  Citas con atribución, en fila o en carrusel.

• FAQ

  Pares de preguntas y respuestas, extensibles o planos.

• Contacto

  Una sección de formulario que publica en tu propio endpoint.

• Tira CTA

  Una banda de ancho completo con una acción clara.

• Pie de página

  Columnas de navegación, enlaces legales y marcas de marca.

GrapesJS no aloja nada ni elige una base de datos. Registras un adaptador de almacenamiento con dos métodos — cargar y almacenar — y ambos se comunican con tu API. Nada sale de tu infraestructura.

const editor = grapesjs.init({
  container: host.value!,
  storageManager: {
    type: 'app-api',
    autosave: true,
    stepsBeforeSave: 10,
  },
  // Registered as a plugin so the adapter exists before the first load().
  plugins: [
    (ed) => {
      ed.Storage.add('app-api', {
        async load() {
          const res = await fetch(`/api/projects/${props.projectId}`);
          if (!res.ok) throw new Error(`Load failed: ${res.status}`);
          return await res.json();
        },
        async store(project) {
          const res = await fetch(`/api/projects/${props.projectId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(project),
          });
          if (!res.ok) throw new Error(`Save failed: ${res.status}`);
        },
      });
    },
  ],
});

• Registra el adaptador como un plugin para que exista antes de que el editor realice su primera carga.
• 'autosave' con 'stepsBeforeSave' escribe en lotes en lugar de disparar uno por pulsación.
• Guarda el proyecto JSON como la fuente de la verdad; es lo que el editor recarga.
• Mantén las versiones como filas ordinarias — el historial de revisiones es una decisión del esquema, no una función del editor.
• Autoriza cada carga y almacenamiento en el servidor. El id del proyecto en la solicitud es una reclamación, no un permiso.
• Guarda el estado de guardado de Surface en tu propio Vue UI escuchando los eventos de almacenamiento del editor.

Controlas tus datos y tu backend. El editor es un cliente de tu API como cualquier otra parte de tu app.

Dos artefactos salen del editor y no son intercambiables. Almacenar el incorrecto es el error que hace que las páginas sean ineditables seis meses después.

// The source of truth. Store it; the editor reloads from it.
const projectData = editor.getProjectData();

// The output. Regenerate it every time you publish.
const html = editor.getHtml();
const css = editor.getCss();

await $fetch(`/api/projects/${projectId}/publish`, {
  method: 'POST',
  body: { projectData, html, css },
});

// Authorize the request and sanitize `html` on the server —
// never in the component that produced it.

Guarda los datos del proyecto para editar. Genera HTML y CSS cuando necesites un resultado publicable.

Autoría y publicación son trabajos diferentes. GrapesJS termina en el momento en que un usuario está satisfecho con una página; todo lo que viene después es tu flujo de trabajo, en tu infraestructura.

Cada cliente recibe sus propias páginas, sus propios activos, sus propias plantillas y su propia marca. Ese aislamiento es una propiedad de tu modelo de datos y de tu API: al editor simplemente le entregan el proyecto adecuado.

Listados reales de GJS.Market, agrupados por el problema que eliminan. Cada uno de ellos se instala en la misma instancia del editor que crea tu componente Vue.

Bloques y plantillas

El problema: un panel de bloques vacío en la primera ejecución. Lo que añaden: secciones ya hechas, gestión de plantillas y proyectos de varias páginas. ¿Quién los necesita: cualquiera cuyos usuarios no sean desarrolladores?

Explora esta categoría

Plugin Basic Blocks

Un set de bloques de partida, para que el panel sea útil antes de que escribas el tuyo propio.

GratisPlugin de visualización

Plugin Blocky for Tailwind CSS

Secciones basadas en Tailwind para productos cuyo sistema de diseño ya es Tailwind.

59,00 US$Plugin de visualización

Templates Manager

Guarda, lista y aplica diseños completos como puntos de partida reutilizables.

39,00 US$Plugin de visualización

Pages Manager

Varias páginas dentro de un mismo proyecto, con navegación entre ellas.

25,00 US$Plugin de visualización

Almacenamiento y recuperación

El problema: trabajo perdido y persistencia acumulada a mano. Lo que añaden: gestión de proyectos, autosave, recuperación de fallos y backends de almacenamiento alternativo. ¿Quién los necesita: todos los productos con clientes reales en el editor?

Explora esta categoría

Grapesjs Project Manager

Listado de proyectos, creación y cambio, en lugar de un editor por ruta.

GratisPlugin de visualización

Autosave & Restore — Crash Recovery for GrapesJS

Recupera el trabajo no guardado tras un fallo o una pestaña cerrada — el fallo que los usuarios nunca perdonan.

12,00 US$Plugin de visualización

IndexedDB Storage

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

GratisPlugin de visualización

Directus Storage

Lee y escribe proyectos a través de un backend Directus en lugar de un API personalizado.

GratisPlugin de visualización

Activos y exportación

El problema: manejo de imágenes y obtener resultados del editor. Lo que aportan: widgets de subida, integraciones con CDN, edición de imágenes y exportación de archivos. ¿Quién los necesita: constructores donde los usuarios traen su propio medio?

Explora esta categoría

Grapesjs Cloudinary

Sube y sirve medios editores a través de Cloudinary.

GratisPlugin de visualización

Grapesjs Uppy

Una experiencia completa de subida — arrastrar, avanzar, múltiples fuentes.

GratisPlugin de visualización

TOAST UI Image Editor

Recorta, redimensiona y ajusta las imágenes dentro del editor en lugar de antes.

GratisPlugin de visualización

Export Zip

Descarga el proyecto actual como archivo HTML/CSS.

GratisPlugin de visualización

Edición y maquetación

El problema: la superficie de edición es más fina de lo que tus usuarios esperan. Lo que añaden: edición de texto más rica, formularios, control de puntos de interrupción y código por componente. ¿Quién los necesita? Equipos reemplazando un editor existente.

Explora esta categoría

Grapesjs RTE Extensions

Extiende la edición de texto en línea más allá de la barra de herramientas integrada.

GratisPlugin de visualización

Plugin Forms

Componentes de formulario con campos tipados, para constructores que recogen entradas.

GratisPlugin de visualización

Responsive Pack — Breakpoint Manager for GrapesJS

Gestiona los puntos de interrupción y los anchos de los dispositivos más allá de los tres valores predeterminados.

14,00 US$Plugin de visualización

Grapesjs Component Code Editor

Edición HTML/CSS por componente para los usuarios que lo quieran.

GratisPlugin de visualización

El mismo catálogo, aunque recortado por el producto que estás construyendo. Instala la pila que coincida con tu caso y ignora el resto: un editor con cada plugin cargado es más lento y difícil de usar, no mejor.

Los precios mostrados son los precios actuales de la lista de GJS.Market; los plugins gratuitos están marcados.

Si una pila superior no coincide con tu producto, empieza por aquí. Estas son las secciones del catálogo, aproximadamente en el orden en que un constructor crece en ellas.

• BloquesSecciones listas para el panel de bloques.
• ComponentesNuevos tipos de elementos con sus propios ajustes.
• PresetsConfiguraciones completas de editor, tematizadas y listas.
• AlmacenesAdaptadores para datos persistentes del proyecto.
• ActivosSubidas, bibliotecas multimedia y herramientas de imágenes.
• EstilosControles extra para el Style Manager.
• Texto enriquecidoEdición de texto en línea más allá de la barra de herramientas predeterminada.
• Páginas webCaracterísticas a nivel de página y kits completos de página.
• BoletinesSalida de correos, MJML y bloqueos de campaña.
• Herramientas para desarrolladoresDepuración, inspección y ayudas en tiempo de construcción.
• IAGeneración y asistencia dentro del editor.

Ninguna de las dos columnas es gratuita. La cuestión es solo en cuál debería dedicar su tiempo tu equipo.

No aparecen cifras de coste ni de tiempo en esta tabla a propósito — no conocemos a tu equipo, y cualquier número aquí sería inventado.

Fila por fila, lo que estarías escribiendo tú mismo y lo que ya existe. "Extensible" significa que el motor proporciona el gancho y tú aportas el comportamiento — normalmente unas pocas líneas, a veces un plugin.

Incluido = viene con el núcleo. Extensible = un punto de extensión documentado, más plugins donde existen.
Verificado contra GrapesJS 0.23.6 en 2026-09-02.

Cinco pasos, un componente. No hay un envoltorio oficial de Vue y no lo necesitas: GrapesJS se renderiza en un elemento simple, así que la única pregunta específica de Vue es qué gancho de ciclo de vida llama a 'init()'. Instala grapesjs 0.23.6, crea el componente, inicializa en montaje, pasa tus plugins y destruye al desmontar.

1. 01Instalar GrapesJS
2. 02Crear el componente editor
3. 03Inicializar en el montaje
4. 04Configurar plugins
5. 05Destruir al desmontar

<!-- components/PageBuilder.vue -->
<template>
  <div ref="host" class="page-builder" />
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
import grapesjs, { type Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// shallowRef, not ref: the editor is a large non-reactive instance and
// deep-proxying it costs performance for nothing.
const editor = shallowRef<Editor | null>(null);
const host = ref<HTMLElement | null>(null);

onMounted(() => {
  editor.value = grapesjs.init({
    container: host.value!,
    height: '100%',
    fromElement: false,
    storageManager: false,
    plugins: [],          // GJS.Market plugins go here
    blockManager: { blocks: [] },
  });
});

onBeforeUnmount(() => {
  editor.value?.destroy();
  editor.value = null;
});
</script>

• 'shallowRef', no 'ref': el editor es un objeto grande y no reactivo y el deep-proxy de él no cuesta rendimiento sin cobrar nada.
• 'onMounted' nunca se ejecuta en el servidor, lo que hace que sea seguro en Nuxt sin maquinaria adicional.
• 'destroy()' en el desmontaje importa — un cambio de ruta que deja a un editor montado filtra a sus oyentes y a su iframe.
• 'storageManager: falso' mientras cableas todo, luego cambia tu adaptador cuando el API esté listo.
• Importa la hoja de estilo del editor una vez; es el estilo de los paneles, no tu aplicación.
• Todo lo que haya pasado después de este punto — eventos, envoltorios, la forma composable — está en la guía de integración.

GrapesJS necesita un navegador DOM. En el renderizado del servidor de Nuxt no hay 'documento', así que el editor tiene que crearse en el cliente — lo cual 'onMounted' ya garantiza. '<ClientOnly>' es la versión de correa y refuerzo, y es donde reside el marcado de respaldo.

<!-- pages/editor.vue -->
<template>
  <ClientOnly>
    <PageBuilder :project-id="route.params.id" />

    <template #fallback>
      <p class="editor-placeholder">Loading the editor…</p>
    </template>
  </ClientOnly>
</template>

<script setup lang="ts">
const route = useRoute();
</script>

• Usa '<ClientOnly>' cuando quieras un recurso de respaldo renderizado por servidor en lugar del editor.
• El sufijo '. client.vue' es la forma en que Nuxt dice lo mismo para todo un componente.
• SSR no es la parte interesante de esta página — es un límite, y es uno de dos líneas.
• Todo lo que está fuera de la ruta del editor se renderiza en el servidor exactamente igual que hoy.

Cada uno de estos es barato de conseguir al principio y caro de arreglar una vez que los clientes están en el editor.

• ✕El error

  Inicialización durante SSR

  Llamar a 'init()' en cualquier sitio que se ejecute en el servidor se lanza, porque no hay un 'documento' en el que renderizar el lienzo.

  ✓¿Qué hacer en su lugar

  Crea el editor solo en 'onMounted' y envuelve la ruta en '<ClientOnly>' si quieres un recurso de respaldo renderizado por el servidor.

• ✕El error

  Salvando solo el HTML

  La salida renderizada no puede volver a convertirse en un documento editable. Cada página guardada de esta manera se congela en el momento en que se publica.

  ✓¿Qué hacer en su lugar

  Guarda el proyecto JSON como fuente de verdad y regenera HTML y CSS cada vez que publiques.

• ✕El error

  Ofrecer a los usuarios un lienzo en blanco ilimitado

  La libertad total produce páginas que rompen tu sistema de diseño, y una experiencia de primera ejecución sin nada en el panel produce páginas en absoluto.

  ✓¿Qué hacer en su lugar

  Envía bloques y plantillas seleccionados y limita el estilo que los usuarios pueden alcanzar las propiedades.

• ✕El error

  Instalación de todos los plugins

  Cada plugin añade paneles, peso del paquete y una superficie que tus usuarios deben entender. Un editor saturado es más difícil de usar, no más capaz.

  ✓¿Qué hacer en su lugar

  Empieza con la pila para la forma de tu producto y añade un plugin cuando surja una necesidad real.

Las cosas que separan una demo funcional de algo que puedes poner delante de los clientes que pagan.

Productos diferentes, una sola arquitectura. Si reconoces a tu equipo aquí, el resto de esta página está escrito para ti.

Usa Vue 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.