Integra un constructor de páginas directamente en tu SaaS

Explorar plugins integrables

Lienzo
Bloques
Estilos
Recursos
Páginas

Tu API
Los endpoints con los que habla el editor
- Proyectos
- Recursos
- Usuarios
- Permisos
Tu base de datos
Donde vive realmente el contenido
- PostgreSQL
- MySQL
- MongoDB
- Lo que ya tengas en marcha
Tu infraestructura de publicación
Cómo llega la página terminada al mundo
- Sitio web
- CDN
- CMS
- Aplicación

El editor vive dentro de tu aplicación, no en una plataforma aparte.

Por qué integrarlo

¿Por qué integrar un constructor de páginas?

Enviar a tus clientes a un constructor externo te cuesta la sesión, la marca y los datos. Integrarlo conserva las tres cosas.

Conserva tu experiencia de usuario

Tus clientes nunca salen de tu producto. Editar es una pantalla más de la aplicación que ya conocen, no un salto a otro sitio.

Conserva tu marca

Paneles, iconos, tipografía y terminología son tuyos y puedes cambiarlos, así el editor se lee como una parte nativa de tu aplicación.

Conserva tus datos

Proyectos, recursos y contenido se guardan en tu propia infraestructura, bajo tus reglas de retención, residencia y copias de seguridad.

Conserva tu backend

El editor llama a los endpoints que ya tienes. Sin modelo de datos paralelo y sin sincronizar dos fuentes de verdad.

Conserva tu flujo de publicación

Borrador, revisión y publicación siguen en tu pipeline. El editor produce contenido; tu infraestructura decide cuándo se publica.

Conserva el control total

Núcleo de código abierto, autoalojado, sin precio por asiento y sin editor impuesto. Tu hoja de ruta no depende de la de nadie más.

Qué se integra

Todo lo que tus usuarios necesitan, dentro de tu aplicación

Parte de esto es el núcleo de GrapesJS y funciona en cuanto montas el editor. Parte es un plugin. Y parte sigue siendo tarea de tu aplicación: cada tarjeta lo indica.

Núcleo

Lienzo visual

Arrastra, suelta, selecciona y edita contenido dentro de tu aplicación. Forma parte del núcleo del editor: disponible en cuanto lo montas.

Núcleo + plugins

Bloques

Secciones y componentes reutilizables. Defínelos a partir del marcado de tu producto o instala un conjunto ya hecho.

Ver plugins de bloques

Núcleo

Controles de estilo

Tipografía, espaciado, color y puntos de ruptura responsivos desde el Style Manager. Puedes limitarlo a las propiedades que permita tu sistema de diseño.

Núcleo + plugins

Gestor de recursos

Apunta el editor a tu propia biblioteca multimedia o conecta una alojada con un plugin de recursos.

Ver plugins de recursos

Núcleo + plugins

Almacenamiento

Guarda los proyectos en tu API y tu base de datos mediante el Storage Manager remoto. Los plugins añaden autoguardado, recuperación y backends alojados.

Ver plugins de almacenamiento

Núcleo + plugins

Páginas

Varias páginas por proyecto. El núcleo soporta el modelo de páginas; los plugins aportan la interfaz de gestión que ven tus usuarios.

Ver plugins multipágina

Tu aplicación

Publicación

Exporta HTML y CSS y entrégalo a tu propio pipeline de borrador y publicación. El editor nunca publica en tu nombre.

Tu aplicación

Permisos

Qué usuarios y roles pueden editar qué lo decide tu aplicación, no el editor. Protege la ruta y después ajusta los paneles del editor al rol.

Cómo funciona

Integra tu editor en 5 pasos

1
01
Instalar
Añade el editor al frontend que ya tienes. Una dependencia, ningún servicio al que registrarse y ninguna clave que aprovisionar.
2
02
Montar
Inicializa GrapesJS sobre un contenedor dentro de tu propia aplicación. Se renderiza donde tú lo pongas y hereda la página que lo rodea.
GrapesJS con React constructor de páginas Next.js
3
03
Conecta tu almacenamiento
Apunta el Storage Manager remoto a tus propios endpoints para que cada guardado acabe en tu base de datos, autenticado por tu sesión.
Almacenamiento
4
04
Añade plugins
Instala solo lo que tu producto necesite —bloques, páginas, recursos, exportación, IA— y registra tus propios componentes como bloques.
Bloques Multipágina IA
5
05
Publicar
Lee el HTML y el CSS generados por el editor y pásalos por el pipeline de borrador, revisión y publicación que ya tienes.
plugins de GrapesJS

Empieza por el núcleo del editor. Añade solo la funcionalidad que tu producto necesite.

Inicio rápido

Crea tu primer editor integrado

Cinco pasos de código real. Deliberadamente agnóstico del framework: los detalles de React y Next.js están a un enlace de distancia.

Instalación

npm install grapesjs

Inicialización

editor.jsJS

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

// Mount the editor on any container inside your own app shell.
const editor = grapesjs.init({
  container: '#editor',
  height: '100%',
  fromElement: false,
});

Almacenamiento

storage.jsJS

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

  // Persist to your API, not to a third-party service.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
    options: {
      remote: {
        urlStore: '/api/projects/123',
        urlLoad: '/api/projects/123',
        // Your session, your authorization rules.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

Plugins y bloques propios

plugins.jsJS

import grapesjs from 'grapesjs';
import blocksBasic from 'grapesjs-blocks-basic';

const editor = grapesjs.init({
  container: '#editor',
  plugins: [blocksBasic],
  pluginsOpts: {
    [blocksBasic]: { flexGrid: true },
  },
});

// Or register your own product's components as blocks.
editor.Blocks.add('pricing-table', {
  label: 'Pricing table',
  category: 'Your product',
  content: '<section class="pricing">…</section>',
});

Publicación

publish.jsJS

// Publishing stays in your infrastructure.
async function publish(projectId) {
  const html = editor.getHtml();
  const css = editor.getCss();

  await fetch(`/api/projects/${projectId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html, css, status: 'published' }),
  });
}

Propiedad

Tu editor. Tu backend. Tus datos.

Lee el stack de arriba abajo y fíjate en cuánto ya es tuyo. GJS.Market aporta una sola capa.

Frontend

El framework que ya usas

React
Next.js
Vue
Angular
JavaScript puro

Editor integrado

GrapesJS más los plugins que elijas

Núcleo del editor
Bloques
Almacenamiento
Recursos
Exportación

API
Tu API REST o GraphQL
- Tu autenticación
- Tu validación
- Tus límites de uso
Base de datos
Tu base de datos, tu esquema
- Tus copias de seguridad
- Tu residencia de datos
- Tu retención
Publicación
Tu infraestructura
- Tus dominios
- Tu CDN
- Tu proceso de release

GJS.Market aporta las capacidades del editor. Tú mantienes el control de todo lo que las rodea.

Ecosistema de plugins

Amplía tu editor integrado con plugins listos para producción

Cada plugin de aquí abajo es un producto real de GJS.Market, con su precio en vivo. Instala lo que tu producto necesite y olvida el resto.

Almacenamiento

Guarda los proyectos en tu propio backend.

Almacenamiento

Grapesjs Firebase Storage

Guarda los proyectos del editor en Firebase en lugar de escribir tu propia capa de persistencia.

Almacenamiento

Autosave & Restore — Crash Recovery for GrapesJS

Guarda mientras tus usuarios trabajan y restaura la sesión tras un fallo o una pestaña perdida.

12,00 US$Ver plugin

Bloques

Añade secciones de contenido listas para usar.

Bloques

Plugin Blocky for Tailwind CSS

Una biblioteca de bloques de producción para equipos cuyo sistema de diseño ya es Tailwind.

59,00 US$Ver plugin

Bloques

Plugin Basic Blocks

Los bloques esenciales de maquetación y contenido para que un editor nuevo sea útil desde el primer día.

Multipágina

Crea sitios completos de varias páginas.

Páginas

Pages Manager

Da a los usuarios una lista de páginas real, para que un proyecto se convierta en un sitio entero.

25,00 US$Ver plugin

Proyectos

Grapesjs Project Manager

Permite a los usuarios mantener varios proyectos en paralelo dentro de tu aplicación.

Marca blanca

Personaliza la experiencia del editor.

Marca blanca

Grapesjs Paneless

Una carcasa de editor rediseñada para equipos que no quieren que la interfaz siga pareciendo GrapesJS.

299,99 US$Ver plugin

Recursos

Conecta tu biblioteca multimedia.

Recursos

Grapesjs Cloudinary

Sirve y transforma los medios del editor a través de Cloudinary.

Recursos

Grapesjs Uppy

Añade una experiencia de subida en condiciones al gestor de recursos.

Exportación

Controla cómo se exporta el contenido.

Exportación

Export Zip

Exporta el HTML, el CSS y los recursos finales como un archivo descargable.

IA

Añade capacidades de edición con IA.

Grapesjs GPT Plugin

Genera y reescribe los textos de la página sin salir del lienzo.

Integraciones

Conecta el editor con tu stack actual.

Despliegue

Grapesjs Netlify

Publica directamente en Netlify cuando ahí es donde debe ir tu salida.

Ver todos los plugins integrables

Stacks recomendados

Monta el stack que tu producto necesita

Cuatro puntos de partida, montados con productos que existen hoy. Los precios se toman en vivo del catálogo.

Constructor de páginas SaaS

Páginas dentro de tu panel

Crear un constructor SaaS

Constructor de sitios web

Un producto completo de creación de sitios

Crear un constructor de sitios

Constructor de emails

Campañas y correo transaccional

Crear un constructor de emails

Editor de CMS

Edición visual sobre contenido estructurado

Crear un editor de CMS

Los precios se toman del marketplace al compilar y pueden cambiar. Todos los plugins son opcionales: el núcleo del editor es gratuito.

Casos de uso

¿Dónde puedes integrar GrapesJS?

El mismo núcleo de editor, orientado a un trabajo distinto según los plugins y los límites que pongas a su alrededor.

Plataformas SaaS

Permite a tus clientes crear y editar páginas dentro de tu panel, sin salir nunca del producto que pagan.

Constructor de páginas SaaS

CMS

Da edición visual a los equipos de contenido mientras tu backend conserva los datos estructurados que necesita.

Editor de CMS headless

CRM y plataformas de marketing

Permite a los usuarios crear landing pages y piezas de campaña junto a las audiencias que ya gestionan.

Constructor de landing pages

Constructores de sitios web

Lanza una experiencia completa de creación de sitios para tus clientes sobre un editor que no has tenido que escribir.

Constructor de páginas WYSIWYG

Plataformas de email

Integra un constructor visual de emails en el flujo de campañas que tus usuarios ya siguen.

Constructor de plantillas de email

Constructores de webs con IA

Genera un primer borrador con IA y deja que los usuarios lo afinen visualmente en lugar de repetir prompts.

Plugins de IA

Herramientas internas

Da a los equipos internos un editor visual para las superficies que gestionan, sin construir uno desde cero.

Constructor no-code para desarrolladores

Plataformas headless

Añade una capa visual sobre la arquitectura que ya elegiste, en vez de sustituirla.

Constructor de páginas de código abierto

Compatibilidad con frameworks

Intégralo en el stack que ya usas

GrapesJS se ejecuta en el navegador y se monta sobre un nodo del DOM, así que la integración es una capa fina sobre lo que ya tienes en producción.

React

Crea un editor visual directamente dentro de tu aplicación React.

Ver constructor de páginas React

Next.js

Integra el editor en una app Next.js, cargado en el cliente para que nunca toque el SSR.

Ver guía de Next.js

Vue

Monta el editor desde un componente Vue y gestiónalo con los hooks del ciclo de vida.

Ver constructor de páginas Vue

Angular

Inicializa el editor desde un componente Angular y conéctalo a tus servicios.

Ver constructor Angular

JavaScript puro

Sin framework alguno: basta con una etiqueta script y un elemento contenedor.

Ver constructor HTML de arrastrar y soltar

Construir o integrar

Lo que realmente implica construirlo tú mismo

Un editor visual no es una funcionalidad. Es una docena de subsistemas que tienen que funcionar juntos y seguir funcionando a medida que cambian los navegadores.

Subsistemas que implica un editor propio

Arquitectura del editor
Lienzo y aislamiento con iframe
Arrastrar y soltar
Sistema de bloques
Gestor de estilos
Árbol de capas
Historial de deshacer / rehacer
Almacenamiento y autoguardado
Gestor de recursos
Modelo multipágina
Edición responsiva
Exportación de HTML / CSS
Pruebas entre navegadores
Mantenimiento continuo

Construirlo desde cero

Meses de ingeniería

Cada subsistema de arriba te toca diseñarlo, construirlo y probarlo
El editor se convierte en un producto más que tu equipo mantiene para siempre
Las actualizaciones de navegadores y frameworks pasan a ser tu problema
La capacidad de tu hoja de ruta se va en la fontanería del editor, no en tu producto

GrapesJS + GJS.Market

Empieza en días

Núcleo de editor de código abierto, ya resuelto y probado en producción
Plugins listos para almacenamiento, bloques, páginas, recursos y exportación
Tus propios componentes registrados como bloques
Tu API, tus datos y tu flujo de publicación, sin cambios

Mismo destino. Un camino gasta tu hoja de ruta en infraestructura de editor; el otro la gasta en tu producto.

Por qué GrapesJS

¿Por qué usar GrapesJS como editor integrado?

Se diseñó para ser integrado, y por eso los puntos de extensión que necesitas ya están ahí.

Código abierto

El núcleo se publica bajo la licencia BSD-3-Clause: permisiva, apta para uso comercial y legible cuando necesitas saber exactamente qué hace.

Autoalojado

El editor se ejecuta dentro de tu propia infraestructura. No hay ningún servicio al que llamar ni disponibilidad que no sea ya tuya.

Extensible

Componentes, bloques, comandos, paneles y plugins propios son ciudadanos de primera clase. La interfaz de tu producto puede convertirse en contenido editable.

Compatible con frameworks

React, Next.js, Vue, Angular y JavaScript puro. El wrapper oficial @grapesjs/react tiene licencia MIT.

Sin dependencia de proveedor

Tu aplicación, tus datos y tu infraestructura siguen bajo tu control. La salida es HTML y CSS planos que puedes renderizar donde quieras.

Ecosistema de plugins

Amplía el editor con 100+ productos en GJS.Market en vez de programar cada capacidad tú mismo.

Explorar GrapesJS

26k+

Estrellas en GitHub

100+

Plugins en GJS.Market

10 years

Desarrollo activo

Coste de licencia, siempre

Hazlo tuyo

Haz que el editor parezca tu producto

Marca
Interfaz propia
Componentes propios
Bloques propios
Permisos
Roles de usuario
Plantillas
Biblioteca de recursos
Flujo de publicación
APIs propias

Tus usuarios deberían sentir que usan tu producto, no un editor de terceros.

Explorar el constructor de marca blanca

Preguntas frecuentes

Integrar GrapesJS: preguntas habituales

Empezar

Integra un editor visual en tu producto

Empieza con el editor de código abierto GrapesJS y amplíalo con los plugins que tu producto necesite.

Más popular

Explorar los plugins de GJS.Market

Almacenamiento, bloques, páginas, recursos, exportación e IA: productos listos para producción con precios en vivo.