Por qué GrapesJS encaja en Express / Node
GrapesJS se ejecuta en el navegador, así que Express simplemente sirve la página del editor y dos Rutas JSON — una para cargar el proyecto guardado y otra para almacenarlo. Esta guía sirve el editor, persiste el contenido con Node y exporta HTML/CSS.
1. El servidor Express
import express from 'express';
const app = express();
app.use(express.json());
app.use(express.static('public')); // serves public/index.html
let page = {}; // swap for a real DB
app.get('/load', (req, res) => res.json(page));
app.post('/save', (req, res) => {
page = req.body; // full GrapesJS project
res.json({ status: 'ok' });
});
app.listen(3000, () => console.log('http://localhost:3000'));2. La página del editor
Crea public/index.html:
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<div id="gjs"><h1>Edit me</h1></div>
<script src="https://unpkg.com/grapesjs"></script>
<script>
grapesjs.init({
container: '#gjs',
height: '100vh',
fromElement: true,
storageManager: {
type: 'remote',
stepsBeforeSave: 3,
options: { remote: { urlStore: '/save', urlLoad: '/load' } },
},
});
</script>Como la página y la API comparten el mismo origen Express, las solicitudes son Mismo origen y evitas la configuración de CORS por completo.
3. Persistir en una base de datos real
app.post('/save', async (req, res) => {
await db.pages.updateOne(
{ key: 'home' },
{ $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
{ upsert: true }
);
res.json({ status: 'ok' });
});Consejos de producción
Un prototipo que almacena la página en una variable no sobrevivirá a un reinicio — persistirá en una base de datos (una columna JSON/JSONB o un documento Mongo) con clave por página. Los proyectos GrapesJS pueden ser grandes, así que sube el límite de cuerpo de Express (express.json({ limit: '5mb' })) o las partidas de guardado fallan silenciosamente con 413. Protege la ruta de la tienda con autenticación para que nadie pueda sobrescribir una página, y sirve al editor y a la API desde el mismo origen Express para evitar CORS por completo. Si deben ser diferentes, activa CORS para el origen del editor y permite la Content-Type cabecera.
Requisitos previos
Necesitarás Node.js 18+ y Express 4 o 5. GrapesJS se ejecuta en el navegador, así que Express sirve a la página del editor y a dos rutas JSON — cargar y almacenar. Familiaridad con middleware, enrutamiento y análisis de cuerpos JSON son suficientes.
Añadir bloques personalizados al editor
Registrar bloques arrastrables con el Gestor de bloques después grapesjs.initde:
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});Saca librerías de bloques y presets listos de GJS. Haz marketing para un conjunto más rico.
Persistir en una base de datos real
Un prototipo que almacena la página en una variable no sobrevivirá a un reinicio. Persiste en una base de datos codificada por página:
app.post('/save', async (req, res) => {
await db.pages.updateOne(
{ key: 'home' },
{ $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
{ upsert: true }
);
res.json({ status: 'ok' });
});
app.get('/load', async (req, res) => {
const page = await db.pages.findOne({ key: 'home' });
res.json(page?.project ?? {});
});Consejos de rendimiento
Los proyectos GrapesJS pueden ser grandes, así que aumenta el límite de carga de Express
(express.json({ limit: '5mb' })) o fallan las partidas con 413. Sirve a la
editor y API del mismo origen para evitar CORS. Almacena en caché la salida renderizada y
Rompe la partida en la partida guardada para que los visitantes nunca paguen el coste de renderizado.
Consideraciones de seguridad
Protege la ruta de la tienda con autenticación para que nadie pueda sobrescribir una página. Si el
editor y API activan en diferentes orígenes, habilitar CORS solo para el origen del editor y
Permite el Content-Type encabezado. Sanitize almacenaba el margen en la salida si
Los que no son administradores pueden editar. Valida el tamaño de la carga útil.
Resolución de errores comunes
413 Carga Demasiado Grande significa que el JSON supera el límite del cuerpo — subir eso. Un error CORS significa que el editor y la API están en orígenes diferentes sin CORS configurado. Un lienzo sin estilo o en blanco significa el La hoja de estilo no se cargaba o el contenedor no estaba presente.
Cuándo usar GrapesJS con Express / Node
GrapesJS encaja con una aplicación Node personalizada que necesita un editor visual integrado junto al tuyo propio almacenamiento — un creador de páginas SaaS, un compositor de correo electrónico, una superficie CMS. Para ricos en línea texto, un editor más ligero es suficiente; para composición a página completa con maquetación, estilo, y exportación limpia, GrapesJS es la opción más fuerte con licencia del MIT.
Próximos pasos
Véase el GrapesJS + React y Guías de uvasJS + Laravel , Explora los plugins de adaptadores de almacenamiento y el Mercado GrapesJS, o empieza desde el GJS. Página principal del mercado.
Preguntas frecuentes
¿Cómo comunica GrapesJS con un backend de Express?
Configura el Administrador de Almacenamiento en type: 'remote' con
urlStore/urlLoad señalando rutas exprés; añadir
express.json() y lee req.body.
¿Dónde debería almacenar Node el proyecto?
Una columna JSON, un documento de MongoDB o un archivo para prototipo — almacena el archivo completo Project Plus HTML/CSS opcional.
¿Cómo puedo evitar problemas de CORS?
Sirve al editor y a la API desde el mismo origen Express para que las peticiones sean de origen similar; de lo contrario, activa CORS para el origen del editor.