Esta guía se centra en el flujo de trabajo que realmente necesitan los equipos: inicializar rápido, enviar bloques reutilizables, mantener los datos persistentes del proyecto y evitar errores comunes de implementación.
Tiempo de preparación
5-10 minutos
Pasos centrales
4 pasos
Ejemplos de código
Listo para pegar
Instala GrapesJS y renderiza el editor en un contenedor. Mantén tu primera partida intencionadamente minimalista y luego añade módulos personalizados.
import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
const editor = grapesjs.init({
container: '#gjs',
height: '100vh',
width: 'auto',
storageManager: false,
plugins: [],
});Los bloques son la experiencia de usuario principal para los editores no técnicos. Utiliza etiquetas claras y mantén las categorías alineadas con cómo los usuarios piensan sobre las secciones de página.
editor.BlockManager.add('hero-section', {
label: 'Hero Section',
category: 'Sections',
content: `
<section style="padding: 80px 20px; text-align: center;">
<h1>Your Headline Here</h1>
<p>Add your subheadline and CTA below.</p>
<a href="#" style="background: #4f46e5; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none;">
Get Started
</a>
</section>
`,
attributes: { class: 'fa fa-columns' },
});Pasa de los datos solo del navegador al almacenamiento remoto una vez que la edición funcione localmente. Esto desbloquea flujos de trabajo colaborativos y multidispositivo.
const editor = grapesjs.init({
container: '#gjs',
storageManager: {
type: 'remote',
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
urlLoad: '/api/pages/load',
urlStore: '/api/pages/save',
headers: { Authorization: 'Bearer YOUR_TOKEN' },
},
});Escalón 01
Configura GrapesJS con una configuración mínima y asegúrate de que el lienzo se renderice correctamente dentro del shell de tu app.
Escalón 02
Crea un set de inicio enfocado: héroe, características, precios, CTA y pie de página. Mantén las etiquetas claras para usuarios no técnicos.
Escalón 03
Guarda el JSON del proyecto de forma remota para que los usuarios puedan seguir editando entre sesiones, navegadores y dispositivos.
Escalón 04
Limita los componentes inseguros, rastrea eventos del editor y prueba la fidelidad de exportación en móviles y escritorios.
Utiliza los datos del proyecto (JSON) siempre que sea posible. Preserva la estructura del editor y evita la pérdida de metadatos de los componentes.
Define la tipografía, el espaciado y los tokens de color desde el principio para que los equipos construyan páginas consistentes más rápido.
Empieza con un conjunto pequeño y con opiniones de bloques. Las listas de bloqueo grandes aumentan la carga cognitiva y reducen la adopción.
Rastrea el uso de bloques, acciones de publicación y fallos. Los datos de eventos ayudan a priorizar las mejoras adecuadas del producto.
Gestiona bloques arrastrables. Añade bloques con BlockManager.add() o la opción de init de bloques.
Gestiona los tipos de componentes. Define componentes personalizados con ComponentManager.addType().
Panel de editor Visual CSS. Configura sectores y propiedades para controlar qué estilos pueden cambiar los editores.
Se encarga de guardar y cargar contenido del editor. Soporta backends de almacenamiento local, remoto y personalizado.
El área de edición de iframes donde se arrastran y sueltan componentes. Totalmente aislado de los estilos de tu app.
Los plugins son funciones que reciben la instancia del editor y pueden modificar cualquier gestor de editores.
Muévete más rápido con plugins listos para componentes, almacenamiento, formularios y controles avanzados de editores.
Explorar plugins