Lanza un editor HTML pulido que los usuarios realmente disfruten
GrapesJS te da control total a nivel de producto mientras que GJS. El mercado acelera la entrega con plugins probados, bloques iniciales y presets. Construye una vez, marca la producción como propia y mantén la producción limpia para la producción.
Por qué los equipos eligen esta pila
Flujo de Trabajo de Inicio Rápido
Editor de instalación y arranque
Empieza con el paquete oficial o la compilación CDN, luego monta el editor en el shell de tu app.
npm install grapesjsBloques de arranque de carga
Añade un paquete de plugins para secciones de héroes, formularios, precios y CTAs para que los usuarios puedan construir rápidamente.
editor.BlockManager.add('hero', { ... })Persistencia de conexión
Conecta StorageManager a tu API para que los proyectos guarden y carguen automáticamente por usuario/espacio de trabajo.
storageManager: { type: 'remote' }Barco con barandillas de protección
Expose solo permite componentes/estilos para tu producto para mantener la salida limpia y acorde a la marca.
editor.on('load', () => { ... })Asistente de decisiones: Framework vs Constructor Alojado
Visión general de la arquitectura — Cómo GrapesJS modela HTML y CSS
GrapesJS está estructurado en torno a cinco gestores principales, cada uno responsable de una preocupación distinta:
Cada elemento HTML en el lienzo es un componente GrapesJS — un modelo con propiedades, rasgos y oyentes de eventos. Defines tipos de componentes personalizados para controlar cómo se renderizan y editan elementos específicos.
Los bloques son las unidades de arrastrar y soltar que los usuarios tiran sobre el lienzo. Cada bloque define un fragmento HTML o un árbol de componentes. El BlockManager categoriza, renderiza y gestiona los bloques en el panel izquierdo.
El StyleManager expone las propiedades CSS como controles interactivos de la interfaz. Los sectores agrupan propiedades relacionadas (tipografía, dimensiones, fondos) y se vinculan visualmente al componente seleccionado en ese momento.
Gestiona la persistencia del estado del editor. Por defecto usa localStorage, pero se puede intercambiar por cualquier API REST, base de datos o backend de almacenamiento en la nube mediante plugins.
Gestiona imágenes, vídeos y otros recursos multimedia. Soporta endpoints personalizados de subida e integraciones con bibliotecas de recursos.
Aspectos destacados de la API principal
API de componentes
Modela cada elemento HTML como un componente GrapesJS. Define tipos, rasgos y lógica de renderizado personalizada. Los componentes son la unidad fundamental del lienzo.
Jefe de bloque
Registra bloques de arrastrar y soltar que los usuarios puedan arrastrar sobre el lienzo. Los bloques pueden contener cualquier estructura HTML, árbol de componentes o estilos en línea.
Responsable de estilo
Expone las propiedades de CSS a los usuarios finales a través de un panel visual. Agrupa propiedades en sectores y enlazalos directamente a componentes seleccionados.
Ejemplo de código — Definición de bloque personalizada
Añadir un bloque personalizado de arrastrar y soltar en GrapesJS requiere solo unas pocas líneas:
editor.BlockManager.add('my-block', {
label: 'My Block',
category: 'Basic',
content: {
type: 'text',
content: 'Hello World',
style: { padding: '10px', 'font-size': '16px' }
},
attributes: { class: 'fa fa-text-height' }
});Categorías de plugins en GJS. Mercado
Bloques
Bloques preconstruidos de arrastrar y soltar: secciones de héroes, tablas de precios, cuadrículas de características, testimonios y más.
RTE (Texto Enriquecido)
Sustituye el editor de texto enriquecido integrado por integraciones de Quill, Tiptap o CKEditor.
Almacenamiento
Persiste el contenido del editor en APIs REST, localStorage, Supabase, Firebase o cualquier backend personalizado.
Exportación
Exporta HTML/CSS limpio a archivos, la portapapeles, un archivo ZIP o como plantilla MJML.
UI
Amplía y remodela paneles, añade barras de herramientas, modales, descripciones y comandos personalizados a la interfaz del editor.
Casos de uso
Constructores de marca blanca
Integra un editor de páginas completamente personalizado dentro de tu producto SaaS. Elimina toda la marca GrapesJS y añade tu propio tema.
Editores CMS sin cabeza
Combina GrapesJS con Strapi, Contentful o Directus como capa de edición visual para contenido estructurado.
Editores de correo electrónico
Utiliza el preset MJML de GrapesJS para crear un diseñador de correo responsivo que produzca un MJML listo para producción.
Editores de página
Crea un editor completo de páginas de aterrizaje o web con arrastre y solta, con plantillas, secciones y bibliotecas de componentes.
Plugins destacados
Bloques Biblioteca Pro
Más de 50 secciones y bloques de contenido preconstruidos
Style Manager Pro
Controles avanzados de CSS con editores visuales de propiedades
API REST de almacenamiento
Conecta GrapesJS a cualquier backend REST para persistencia
RTE Tiptap
Integración con el editor de texto enriquecido impulsado por Tiptap
Exportación ZIP
Exportar el proyecto completo como archivo ZIP descargable
Interfaz de Paneles Personalizados
Disposición de paneles configurable y sistema de barras de herramientas
Instalación
NPM
npm install grapesjsCDN
<!-- HTML -->
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" />
<script src="https://unpkg.com/grapesjs"></script>
<div id="gjs"></div>
<script>
const editor = grapesjs.init({
container: '#gjs',
fromElement: true,
height: '100vh',
storageManager: false,
});
</script>Explora los plugins de GrapesJS por categoría
Guías relacionadas
¿Listo para crear tu editor HTML de arrastrar y soltar?
Explora todos los plugins y starters en GJS. Comercializar y enviar en días, no meses.
Explorar plugins