Crea un page builder visual para tu SaaS

Esto es lo que recibe realmente el usuario final de tu SaaS: la parte que ve, usa y por la que se queda.

Un editor visual parece una función más en la hoja de ruta. No lo es. Cada uno de estos elementos es un subsistema que tu equipo tendría que mantener durante toda la vida del producto.

Dedica tu ingeniería a tu SaaS, no a reconstruir un editor.

La demo oficial: el editor de código abierto sin ningún preset aplicado. Este es el punto de partida de tu SaaS.

El mismo núcleo de editor sirve para productos muy distintos. Elige el más parecido al tuyo.

El editor es una capa, no el sistema. Todo lo que importa comercialmente — cuentas, datos, límites, publicación — sigue siendo tuyo.

¿Buscas el detalle de integración en vez del esquema general? Lee la guía del page builder integrable

Dos pasos hasta un editor funcionando. Todo lo que venga después es tu producto, no fontanería del editor.

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

// The editor core. Mount it anywhere inside your customer dashboard.
const editor = grapesjs.init({
  container: '#editor',
});

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

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

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

Este es el núcleo del editor. Añade la funcionalidad que tu SaaS necesite mediante plugins y tus propias integraciones.

Cada elemento de abajo es un producto real de GJS.Market, con precio tomado en vivo del catálogo. Cuando una capacidad forma parte del núcleo de GrapesJS y no de un plugin, se describe en la sección de arquitectura en lugar de venderse aquí.

Almacenamiento

Guarda los proyectos en tu propio backend.

Ver categoría

Almacenamiento

Grapesjs Firebase Storage

Guarda los proyectos de tus clientes en Firebase en lugar de escribir tú el adaptador de almacenamiento.

GratisVer plugin

Almacenamiento

Directus Storage

Respalda el editor con Directus cuando tu modelo de contenido ya vive en un CMS headless.

GratisVer plugin

Bloques

Añade secciones y componentes listos para usar.

Ver categoría

Bloques

Plugin Blocky for Tailwind CSS

Lanza con una librería de bloques Tailwind desde el primer día, para que las páginas encajen con tu sistema de diseño.

59,00 US$Ver plugin

Bloques

Plugin Basic Blocks

Los bloques de sección imprescindibles que todo builder necesita antes de nada a medida.

GratisVer plugin

Plantillas

Da a tus clientes puntos de partida en vez de un lienzo vacío.

Ver categoría

Plantillas

Templates Manager

Ofrece a tus clientes una biblioteca de plantillas y date a ti un lugar donde curar sus puntos de partida.

39,00 US$Ver plugin

Preset

Webpage Preset

Un preset de edición de páginas web listo para usar: una configuración por defecto sensata sobre la que construir.

GratisVer plugin

Marca blanca

Personaliza el editor para que se lea como tu producto.

Ver categoría

Marca blanca

Grapesjs Paneless

Sustituye el shell por defecto por una interfaz rediseñada que deja de parecer una herramienta genérica.

299,99 US$Ver plugin

Preset

DevFuture Preset 2.0 — Next-Gen Visual Builder Preset

Un preset moderno del que partir cuando la UI de serie no encaja con tu producto.

GratisVer plugin

Páginas

Gestiona proyectos de varias páginas dentro de un mismo editor.

Ver categoría

Páginas

Pages Manager

Añade proyectos de varias páginas para que tus clientes construyan un sitio, no solo una página.

25,00 US$Ver plugin

Recursos

Conecta tu infraestructura de medios.

Ver categoría

Recursos

Grapesjs Cloudinary

Conecta el gestor de recursos con Cloudinary para que las subidas se transformen y se sirvan como toca.

GratisVer plugin

Subidas

Grapesjs Uppy

Dale al gestor de recursos una experiencia de subida real, con arrastrar y soltar y progreso.

GratisVer plugin

Exportación

Conecta la salida con tu flujo de publicación.

Ver categoría

Exportación

Export Zip

Exporta un proyecto terminado como ZIP: útil para entregas, copias de seguridad y rutas de migración.

GratisVer plugin

Analítica

Mide la adopción y el uso del editor.

Ver categoría

Analítica

Grapesjs GA

Permite a tus clientes conectar Google Analytics a las páginas que publican.

GratisVer plugin

IA

Añade funciones con IA donde realmente aporten.

Ver categoría

IA

Grapesjs GPT Plugin

Añade generación de contenido con GPT dentro del editor para los primeros borradores.

GratisVer plugin

Email

Convierte el mismo editor en un builder de emails.

Ver categoría

Email

MJML Preset

Pon el editor en modo MJML para que la salida de email se vea bien en los clientes reales.

GratisVer plugin

Email

GrapesJS Email Blocky – Premium Responsive Email Blocks

Un set premium de bloques de email responsive para un builder de emails de cara al cliente.

69,00 US$Ver plugin

Cuatro combinaciones de partida, con precios en vivo. Cada una es GrapesJS más los plugins que ese producto concreto necesita de verdad.

Los precios provienen del catálogo en vivo y pueden cambiar. Los plugins gratuitos siguen siendo gratuitos.

Qué cambia en tu producto cuando los clientes pueden editar por su cuenta.

Una forma de repartir la edición entre planes. Es una ilustración de la estructura, no una recomendación de precios concretos.

1. 01

   Basic

   Plantillas y edición básica.

2. 02

   Pro

   Bloques avanzados y funcionalidad adicional.

3. 03

   Business

   Permisos avanzados y colaboración.

4. 04

   Enterprise

   Integraciones a medida y flujos avanzados.

Ejemplo de empaquetado SaaS. Tu modelo de precios puede construirse sobre las funciones y los flujos que tus clientes necesiten.

El page builder no tiene por qué ser solo una función: puede aumentar el valor de tus planes SaaS.

La misma decisión se ve distinta según dónde estés sentado.

GrapesJS es agnóstico al framework: se monta sobre un contenedor del DOM, así que encaja con lo que ya tengas.

Esta página cubre la decisión de producto. Dos guías vecinas profundizan en las partes que aquí solo se rozan.

La versión honesta: no te ahorras todo el trabajo, te ahorras la parte que es idéntica en todos los page builders que se han escrito.

«Empiezas en días» se refiere a poner en pie un editor funcional, no a lanzar un producto terminado: el trabajo específico de tu SaaS sigue llevando lo que lleve.

Todo lo que hay en esta página apunta a algo que puedes comprobar tú mismo. Datos verificados el 2026-08-27.

Tres caminos, según cuánto de esto quieras hacer tú.