Crea un constructor de páginas drag-and-drop con GrapesJS

Arrastra un bloque desde el panel hasta el lienzo, o toca un bloque y luego el lienzo. Edita el texto sobre la marcha, ajusta el espaciado y el radio, y cambia de viewport para ver cómo se adapta el diseño. Esto es un modelo de la interacción; el editor real de GrapesJS está en la sección siguiente.

La demo estándar de GrapesJS: panel de bloques a la derecha, lienzo en el centro, gestor de estilos y árbol de capas. Todo lo que ves aquí está en el core de código abierto.

Seis subsistemas que vienen con el core y que tus usuarios perciben como un solo gesto.

GrapesJS es un framework de editor autoalojado y de código abierto, no un producto de construcción de webs alojado. Esa distinción es justamente lo que le permite vivir dentro de la aplicación de otra persona.

El mismo núcleo debajo, configurado cada vez para un trabajo distinto.

Motivos distintos para quererlo, pero debajo el mismo problema: crear páginas no debería exigir un desarrollador cada vez.

Un constructor de páginas no es una funcionalidad: es una docena de subsistemas que tienen que encajar entre sí, y seguir encajando a medida que el producto crece.

Construye tu producto, no otro editor de páginas desde cero.

Ninguna de las dos columnas sale gratis. La diferencia está en qué trabajo es tuyo.

La publicación se queda en tu columna a propósito: es la parte que tiene que encajar con tus dominios, tu CDN y tu proceso de release.

GrapesJS es una capa dentro de tu aplicación, no una plataforma a la que entregas tus usuarios. Tu app conserva los usuarios, el contenido y la decisión de publicar.

Para la mecánica de montar el editor dentro de una app existente —iframes, rutas, traspaso de sesión— consulta la guía del editor embebible

El Device Manager del editor cambia el lienzo entre breakpoints, y los estilos aplicados con un dispositivo activo solo valen para ese ancho.

Deja que tus usuarios adapten diseño, espaciado, tipografía y visibilidad a cada tamaño de pantalla. Cómo se vea al final una página publicada en un dispositivo concreto sigue dependiendo del HTML y el CSS que entregues: el editor controla las reglas, no el navegador.

Un bloque es el punto de partida que el usuario arrastra. Estos son los tipos de sección que casi cualquier constructor necesita el primer día: constrúyelos tú contra la API del Block Manager, o instala un plugin de bloques y arranca con el panel lleno.

• Portada

  Titular, texto de apoyo y una acción principal.

• Cabecera

  Logo y navegación, que colapsa a menú en pantallas pequeñas.

• Ventajas

  Un juego de columnas con icono, título y texto.

• Precios

  Tarjetas de plan con una destacada como recomendada.

• Testimonios

  Citas con autoría y avatar.

• Galería

  Una cuadrícula de imágenes servida desde el gestor de recursos.

• Llamada a la acción

  Una sola llamada a la acción, centrada.

• Contacto

  Un formulario conectado al endpoint que elijas.

• Pie de página

  Columnas de enlaces, avisos legales y navegación secundaria.

Esta distinción decide si GrapesJS te parece un juguete para hacer webs o un núcleo de editor sobre el que construir un producto.

1. Bloque
2. ↓Componente
3. ↓Componente propio
4. ↓Tu producto

Como los componentes propios están respaldados por tu código, un editor GrapesJS puede editar cosas que un constructor genérico ni siquiera concibe: una tabla de precios conectada a tus planes, una parrilla que lee tu catálogo, un formulario que envía a tu API.

Casi nadie quiere una página vacía. Ofrece un juego de diseños de partida y deja que guarden los suyos: los presets configuran el editor entero, las plantillas dan una página por la que empezar.

Son categorías de diseño, no artículos del catálogo: lo que construirías o curarías para tus propios usuarios. Los presets y gestores de plantillas que sí puedes instalar están en la sección de plugins.

El Storage Manager es un cliente de tu API, no un servicio. Apúntalo a tus endpoints y el editor cargará y guardará a través de ellos.

const editor = grapesjs.init({
  container: '#editor',

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

Conecta GrapesJS a tu propio backend y decide cómo se guardan proyectos, páginas, recursos y usuarios. GJS.Market vende plugins: no aloja tus datos.

Cada tarjeta de aquí abajo es un artículo real: nombres, precios y miniaturas se renderizan en vivo desde el catálogo, así que nada de esta página puede desviarse de lo que está realmente a la venta.

Bloques

Amplía la biblioteca de bloques que los usuarios arrastran.

Ver esta categoría

Bloques

Plugin Basic Blocks

El juego básico de primitivas de maquetación —columnas, texto, imágenes, enlaces— para que el panel no esté vacío el primer día.

GratisVer plugin

Bloques

Plugin Blocky for Tailwind CSS

Una biblioteca de bloques basada en Tailwind, para equipos cuyo sistema de diseño ya habla en clases utilitarias.

59,00 US$Ver plugin

Drag & drop

Haz que el propio gesto sea más claro y más preciso.

Ver esta categoría

Drag & drop

Placeholder 2.0 - Premium Drag Experience

Un indicador de destino más claro, para que se vea exactamente dónde va a caer el bloque antes de soltarlo.

99,00 US$Ver plugin

Espaciado

GrapesJS LayoutEnhancer: Precision Spacing Tool

Tiradores para ajustar márgenes y relleno arrastrando, de modo que el espaciado se define en el lienzo y no en un campo numérico.

49,00 US$Ver plugin

Plantillas

Dales a tus usuarios puntos de partida ya hechos.

Ver esta categoría

Preset

Webpage Preset

Una configuración de editor de páginas web ya montada: bloques, paneles y estilos conectados entre sí.

GratisVer plugin

Plantillas

Templates Manager

Permite empezar desde una plantilla guardada en lugar de un lienzo vacío, y guardar las propias.

39,00 US$Ver plugin

Componentes reutilizables

Construye secciones una vez y reutilízalas en varias páginas.

Ver esta categoría

Reutilizables

Symbols

Convierte una sección en un símbolo reutilizable entre páginas: edítalo una vez y todas las instancias lo siguen.

GratisVer plugin

Responsive

Gestiona breakpoints y estilos por dispositivo.

Ver esta categoría

Responsive

Responsive Pack — Breakpoint Manager for GrapesJS

Añade y gestiona breakpoints para que se pueda reestilizar un diseño por tamaño de pantalla.

14,00 US$Ver plugin

Recursos

Amplía la gestión de medios y las subidas.

Ver esta categoría

Recursos

Grapesjs Cloudinary

Apunta el Asset Manager a Cloudinary, de modo que las subidas entren en una canalización de medios de verdad.

GratisVer plugin

Subidas

Grapesjs Uppy

Subidas con Uppy: arrastra archivos, con progreso y transferencias reanudables.

GratisVer plugin

Almacenamiento

Amplía la persistencia y la recuperación de proyectos.

Ver esta categoría

Almacenamiento

Grapesjs Firebase Storage

Persiste proyectos en Firebase cuando prefieres no montar antes un endpoint de almacenamiento.

GratisVer plugin

Autoguardado

Autosave & Restore — Crash Recovery for GrapesJS

Guarda una copia recuperable del trabajo en curso, para que cerrar una pestaña no le cueste la página al usuario.

12,00 US$Ver plugin

Páginas

Proyectos de varias páginas en una sola sesión del editor.

Ver esta categoría

Páginas

Pages Manager

Proyectos de varias páginas en una sola sesión, con una lista por la que navegar.

25,00 US$Ver plugin

Exportación

Añade formatos de salida más allá del HTML y CSS integrados.

Ver esta categoría

Exportación

Export Zip

Exporta la página terminada como un paquete descargable de HTML y CSS.

GratisVer plugin

SEO y accesibilidad

Audita las páginas antes de publicarlas.

Ver esta categoría

SEO y a11y

Grapesjs A11Y Seo — Accessibility auditor + SEO for GrapesJS

Audita la página dentro del editor y señala problemas de accesibilidad y SEO antes de publicar.

GratisVer plugin

IA

Añade redacción asistida por IA en el lienzo.

Ver esta categoría

IA

Grapesjs GPT Plugin

Genera y reescribe contenido en el lienzo mediante un comando respaldado por OpenAI.

GratisVer plugin

Cuatro configuraciones de partida. Cada una es una cesta real de artículos, no un pack cerrado: instala lo que necesites y deja el resto.

Los precios se renderizan en vivo desde el catálogo.

Dos archivos y ya tienes un editor en pantalla. Todo lo que viene después es configuración.

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// The editor core. Mount it on any container in your app.
const editor = grapesjs.init({
  container: '#editor',
});

// A block is what the user drags. A component is what it becomes
// on the canvas once dropped — and what your app can then control.
editor.BlockManager.add('pricing-table', {
  label: 'Pricing',
  category: 'Sections',
  content: { type: 'pricing-table' },
});

editor.DomComponents.addType('pricing-table', {
  model: {
    defaults: {
      // Lock the frame, let the user edit only what you allow.
      draggable: 'main, section',
      traits: ['plan', 'currency'],
    },
  },
});

1. Añade bloques
2. →Personaliza componentes
3. →Configura el almacenamiento
4. →Conecta tu backend
5. →Publica

A partir de aquí el trabajo es específico de tu producto: qué bloques reciben tus usuarios, qué tipos de componente registras y dónde se guardan los proyectos.

El core es agnóstico al framework: se monta sobre un contenedor del DOM. Estas páginas cubren el cableado de cada caso.

Solo características que pueden comprobarse contra el paquete publicado y la documentación de cada proyecto. Las capacidades difieren por diseño: Craft.js es headless a propósito, Puck va primero con React y Builder.io es una plataforma alojada.

Licencias verificadas contra el registro de npm el 2026-09-03: grapesjs 0.23.6 se publica como BSD-3-Clause; @measured/puck, @craftjs/core y @builder.io/react se publican como MIT. Las capacidades reflejan la documentación pública de cada proyecto: compruébalas antes de decidir.

El mismo núcleo, otra pregunta. Si alguna de estas encaja mejor con tu situación, empieza por ahí.

Empieza con GrapesJS, personaliza la experiencia de edición y amplíala con los plugins que tu producto necesite.