Constructor HTML de arrastrar y soltar

Crea un generador de HTML de arrastrar y soltar con GrapesJS

Construye visualmente páginas HTML con componentes de arrastrar y soltar, editar estilos sin escribir CSS a mano y mantener el control del HTML y CSS que produce tu aplicación.

Empieza a construir Prueba con el editor HTML

Código abiertoAutoalojadoSalida HTML + CSSExtensibleEmbebible

Arrastra. Suelta. Edita el HTML. Controla la salida.

Bloques
Lienzo
Estilos
HTML + CSS
Tu aplicación

26k+

GitHub estrellas

1.4M+

Descargas mensuales de npm

100+

Plugins en GJS.Market

BSD-3-Clause

Licencia principal

Visual · HTML · CSS

Una sección, tres vistas

Este es todo el argumento de la página en un solo componente. La pestaña Visual es lo que tu usuario arrastra y edita. Las otras dos son lo que el editor te devuelve al código — nada oculto, nada propietario, solo texto de marcado y hojas de estilo que puedes almacenar, transformar y publicar como quieras.

<div id="editor">

Lo que ve el usuario: bloques a la izquierda, la página en el centro, controles de estilo a la derecha.

Bloques

Hero
Texto
Imagen
Botón
Columnas
Formulario

your-app.com/editor

section.hero

Build faster

Launch your next project.

Get started

Estilos

Relleno: 96px 24px
Fondo: #0f172a
Tamaño de fuente: 48px
Radio: 8px

<body>
  <section class="hero">
    <h1 class="hero__title">Build faster</h1>
    <p class="hero__text">Launch your next project.</p>
    <a href="/start" class="hero__cta">Get started</a>
  </section>
</body>

* { box-sizing: border-box; } body {margin: 0;}
.hero{
  padding-top:96px;
  padding-right:24px;
  padding-bottom:96px;
  padding-left:24px;
  text-align:center;
  background-color:rgb(15, 23, 42);
}
.hero__title{
  font-size:48px;
  color:rgb(255, 255, 255);
}
.hero__cta{
  display:inline-block;
  padding-top:14px;
  padding-right:28px;
  padding-bottom:14px;
  padding-left:28px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
  background-color:rgb(99, 102, 241);
  color:rgb(255, 255, 255);
}
@media (max-width: 480px){
  .hero__title{ font-size:32px; }
}

Ambos paneles de código son los valores de retorno reales de GrapesJS 0.23.6, reindentados para poder leerlos: cada llamada devuelve en realidad una sola línea. Dos detalles que conviene saber antes de construir sobre ellos: getHtml() serializa el wrapper, así que el resultado queda encerrado en <body>…</body>, y getCss() expande las declaraciones abreviadas en propiedades individuales y normaliza los colores a rgb(). La hoja de estilos empieza además con un pequeño reinicio que GrapesJS inyecta; getCss({ avoidProtected: true }) lo omite.

La idea

Construye HTML visualmente en lugar de escribir cada diseño a mano

Un generador de HTML de arrastrar y soltar permite a los usuarios ensamblar las estructuras de las páginas visualmente mientras tu aplicación mantiene el control del contenido subyacente, el estilizado y el flujo de trabajo de publicación.

Arrastrar y soltar

Los usuarios mueven bloques y componentes a un lienzo en lugar de editar un archivo plantilla. Tú decides qué bloques existen, dónde pueden dejarse y qué pueden contener.

Edición visual

El contenido, la maquetación y los estilos se editan mediante viñetas en lugar de escribir a mano cada regla CSS. El editor convierte esas elecciones en reglas ordinarias de hojas de estilo.

Salida HTML + CSS

Recupera el HTML y CSS resultantes en dos cadenas simples y llévalos a tu propia aplicación, tu propio almacenamiento y tu propio flujo de trabajo de publicación.

Definición

¿Qué es un generador de HTML de arrastrar y soltar?

Es un editor que permite a una persona ensamblar una página web arrastrando piezas a un lienzo, ajustándolas mediante controles en lugar de código, y sacando HTML y CSS reales por el otro lado. Para hacerlo de forma convincente, tiene que combinar todo lo siguiente en un solo software coherente:

Componentes HTML — cada elemento del lienzo modelado como algo sobre lo que el editor puede razonar
Un lienzo que renderiza la página tal y como lo hace el navegador, pero que se mantenga editable
Arrastrar y soltar, con objetivos válidos en lugar de cajas flotantes
Bloques reutilizables que un usuario puede extraer repetidamente
Controles de estilo que escriben reglas CSS reales
Edición responsiva por punto de interrupción
Gestión de activos para imágenes y medios
Persistencia, para que una página a medio terminar sobreviva a una pestaña cerrada
Exportación y publicación del HTML y CSS terminados

La diferencia entre un editor visual de HTML y una simple librería de arrastrar y soltar es que el editor gestiona todo el estado de edición — selección, componentes, estilos, comandos, almacenamiento y salida — como un solo sistema. Una biblioteca mueve un cuadro por la pantalla; un editor sabe qué es ese recuadro, qué puede contener, a qué regla CSS pertenece y cómo serializar el resultado.

Editor en directo

Prueba con un editor HTML real

Tres versiones públicas de GrapesJS. Nada carga hasta que das clic — los fotogramas no se solicitan, así que esta sección no te cuesta nada al llegar.

Abrir en una pestaña nueva

La demo original de GrapesJS. Arrastra un bloque, seleccionalo, cambia un estilo — luego abre la vista de código en su barra de herramientas y observa cómo cambian el HTML y el CSS contigo.

grapesjs.com/demo.htmlGratis

Carga una demo de terceros en un iframe. No se solicita nada hasta que haces clic.

Flujo de trabajo

De arrastrar y soltar a HTML de producción

1
01
Elige un bloque
El usuario elige de la paleta que definiste. Un bloque es un punto de partida reutilizable y nombrado — un hero, una tabla de precios, un formulario — no un div vacío arbitrario.
2
02
Arrástrala al lienzo
El editor decide dónde puede aterrizar legalmente el bloque, inserta el componente y lo selecciona. Las reglas de drop son tuyas para establecer por tipo de componente.
3
03
Editar contenido y estilos
El texto se edita en su lugar; el diseño, el espaciado, la tipografía y el color provienen del Style Manager. Cada cambio se convierte en una regla CSS que el editor registra.
4
04
Guarda el proyecto
El Storage Manager envía el estado del editor al punto final al que lo apuntes. Este es el estado necesario para seguir editando, no la página terminada.
5
05
Exportar o publicar HTML + CSS
Llama a getHtml() y getCss(), y luego haz lo que exija tu producto: sanear el HTML, envolverlo en tu plantilla, versionarlo, cachearlo y desplegarlo.

Superficie de edición

¿Qué pueden editar los usuarios?

Exactamente tanto como permitas. Cada uno de estos es algo que el editor puede exponer — y algo que puedes fijar por tipo de componente para que un marketer no pueda romper un diseño diseñado por un ingeniero.

Contenido

Texto, encabezados, enlaces y cualquier contenido que marques como editable. Los componentes que prefieres mantener intactos pueden simplemente dejarse no editables.

Distribución

Secciones, columnas, contenedores y el espaciado entre ellos, a través de los controles Dimension y Flex en el Style Manager.

Tipografía

Familia de fuentes, tamaño, grosor, altura y alineación de línea, escritos como declaraciones CSS ordinarias.

Colores

Texto, fondos, bordes y otras propiedades visuales. Los valores se serializan como rgb() en la hoja de estilos emitida.

Imágenes y medios

Se gestiona a través del Asset Manager, que puedes apuntar a tu propio punto final de subida o a un proveedor de almacenamiento.

Estilos responsivos

Reglas asignadas a un dispositivo. Estilizar mientras un punto de interrupción está activo emite una consulta de medios coincidente en lugar de sobrescribir la regla base.

Componentes

Elementos estructurados y reutilizables definidos por ti — la unidad en la que se convierte un bloque una vez que se deja caer, y lo que tu app puede reconocer después.

Atributos y rasgos

Los rasgos se convierten en los campos del panel de ajustes, así que un componente personalizado puede mostrar un titular y un enlace objetivo y nada más.

Algunos de estos son configuraciones más que predeterminados. GrapesJS incluye el Style Manager con General, Flex, Dimension, Tipografía, Decoraciones y Extra de fábrica; las subidas de assets, el comportamiento de texto enriquecido y los permisos por componente son cosas para las que puedes cablear — o instalar un plugin.

Salida

Controlas el HTML y el CSS

Un editor visual solo es útil si el resultado puede encajar en tu aplicación. GrapesJS mantiene dos cosas separadas, y la distinción importa más que cualquier lista de características: el estado que necesita para seguir editando y el marcado que realmente reciben tus usuarios.

Del lienzo a la página publicada

Editor visual
Estado del proyecto
HTML + CSS
Tu backend
Tu publicación

publish.jsJS

// What the editor needs to keep editing — components, styles,
// pages, assets and symbols. Store this to resume a session.
const projectState = editor.getProjectData();

// What your users actually receive. Two plain strings.
const html = editor.getHtml();  // <body>…</body>
const css = editor.getCss();    // one line of CSS

// From here it is your application's decision: sanitize it, wrap it
// in your own layout, version it, cache it, put it behind your CDN.
await fetch(`/api/pages/${pageId}/publish`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ html, css }),
});

getProjectData() devuelve el estado editable — páginas, estilos, recursos, símbolos y fuentes de datos. Almacenalo para reanudar una sesión; no es lo que sirves a los visitantes.
getHtml() y getCss() devuelven cadenas. No hay tiempo de ejecución para instalar en la página publicada ni servicio de renderizado en el bucle.
El saneado, el uso de plantillas, el versionado, la caché y el despliegue siguen de tu lado. Eso es un límite, no una carencia: es justo lo que permite que la salida encaje en un producto que ya tienes.

Una nota sobre expectativas: la hoja de estilos emitida es fiel, no está ajustada a mano. Las propiedades abreviadas salen expandidas en propiedades individuales, los colores como rgb(), y se antepone un pequeño reinicio salvo que lo desactives. Trata la salida como una fuente fiable que post-procesas, igual que harías con el resultado de cualquier paso de compilación.

Construir frente a empezar desde un núcleo

¿Por qué crear un editor HTML desde cero?

Todo editor visual de HTML necesita el mismo conjunto de subsistemas antes de poder hacer algo interesante. La cuestión no es si los vas a necesitar, sino si escribirlos es la parte de tu producto que vale la pena para los próximos seis meses de tu equipo.

Lo que necesita un editor HTML antes de editar nada

Lienzo editable
Arrastrar y soltar
Modelo de componentes
Selección
Paleta de bloques
Controles de estilo
Puntos de quiebre
Biblioteca de activos
Deshacer / volver a hacer
Serialización
Almacenamiento
Salida HTML
Salida CSS
API de plugins

Hazlo tú mismo

Eres dueño de los catorce

Y los posees permanentemente: el lienzo que tiene que mantenerse editable mientras se renderiza como un navegador, la lógica de drop-target, la pila de deshacer que sobrevive a todo lo demás, el serializador que convierte tu árbol en memoria de nuevo en marcado — además de todos los informes de errores contra ellos mientras el producto exista.

Empieza con GrapesJS

Empiezas donde ya funcionan

El lienzo, arrastrar y soltar, modelo de componentes, Block Manager, Style Manager, Device Manager, Asset Manager, deshacer historial, Storage Manager y las APIs de salida HTML/CSS vienen con el núcleo. Lo que escribes es la parte específica de tu producto.

Esto no es una afirmación de que GrapesJS sea tu producto completo. El almacenamiento, la autenticación, los permisos, la publicación, la sanitización y cada flujo de trabajo específico del producto siguen siendo tuyos — consulta el diagrama de arquitectura a continuación para ver exactamente dónde cae la línea.

Mira dónde cae la línea

Subsistema por subsistema

Lo que escribes y lo que ya existe

La columna de la derecha no garantiza que un subsistema esté terminado para tu caso de uso: nombra la parte de GrapesJS que amplías en lugar del archivo en blanco desde el que de otro modo empezarías.

Subsistema de editor	Constrúyelo tú	Empieza con GrapesJS
Lienzo	Lo construyes tú	Base del editor
Arrastrar y soltar	Lo construyes tú	Base del editor
Modelo de componentes	Lo construyes tú	DomComponents
Bloques	Lo construyes tú	Block Manager
Controles de estilo	Lo construyes tú	Style Manager
Edición responsiva	Lo construyes tú	Device Manager
Activos	Lo construyes tú	Asset Manager
Deshacer / volver a hacer	Lo construyes tú	Comandos e historial
Almacenamiento	Lo construyes tú	Storage Manager
Salida HTML	Lo construyes tú	editor.getHtml()
Salida CSS	Lo construyes tú	editor.getCss()
Componentes personalizados	Lo construyes tú	DomComponents.addType
Arquitectura de plugins	Lo construyes tú	API de plugins existente
Autorización y permisos	Lo construyes tú	Tu solicitud
Sanitización	Lo construyes tú	Tu solicitud
Publicación	Lo construyes tú	Tu solicitud

Las tres últimas filas son las honestas. Nada de incrustar un editor elimina tu responsabilidad sobre quién puede editar qué, qué se almacena y qué llega al público.

Arquitectura

Cómo encaja un generador de arrastrar y soltar HTML en tu aplicación

El editor es una capa de tu producto — no el producto en sí. Tu aplicación conserva a los usuarios, los permisos, los datos y la decisión sobre qué se activa.

Tu solicitud

Tú eres dueño de la superficie

Usuarios
Autorización y permisos
Enrutamiento
Facturación
Navegación

Capa incrustada

Editor visual GrapesJS

Amplíalo con plugins

Lienzo
Bloques
Componentes
Estilos
Activos
Dispositivos

Persistencia
Tu API
- Storage Manager
- Guardado automático
- Versiones
Datos
Tu base de datos
- Proyectos
- Páginas
- Activos
Entrega
Tu publicación
- Vista previa
- Aprobación
- Live HTML

GrapesJS proporciona la capa visual de edición HTML. Todo lo que está encima y debajo — quién edita, qué se almacena, qué se publica — permanece dentro de la aplicación que ya tienes.

Bajo el capó

Los bloques de construcción detrás del editor

Cinco responsables hacen la mayor parte del trabajo. Los conocerás en menos de una hora desde que empiezas, así que merece la pena saber de qué es responsable cada uno.

Componentes

Los elementos HTML representados como componentes editables, con sus propias reglas sobre lo que contienen, si pueden arrastrarse y qué propiedades exponen.

Block Manager

La paleta. Los bloques son lo que los usuarios arrastran; cada uno nombra el componente en el que se convierte. El núcleo incluye una paleta vacía, así que lo que aparece ahí es totalmente tu decisión.

Style Manager

Controles visuales de propiedades CSS, agrupados en sectores — General, Flex, Dimension, Tipography, Decorations y Extra por defecto. Los sectores y propiedades son configurables.

Storage Manager

Persiste el estado del proyecto en almacenamiento local, un punto final remoto o un adaptador de almacenamiento que tú mismo escribas. El guardado automático es una bandera de configuración.

Asset Manager

Imágenes y medios: el selector que ven los usuarios y la ruta de subida detrás de él, que apuntas a tu propio endpoint o a un plugin de proveedor.

Lee la documentación de GrapesJS

Componentes personalizados

Crea tus propios componentes HTML

Aquí es donde un constructor HTML deja de ser genérico. Define un tipo de componente, decide qué renderiza y expone solo las propiedades que los usuarios deberían controlar: el resto del marcado permanece exactamente como lo escribieron tus ingenieros.

hero-block.jsJS

// A block is what the user drags out of the panel.
editor.BlockManager.add('hero', {
  label: 'Hero',
  category: 'Sections',
  content: { type: 'hero' },
});

// A component type is what that block becomes on the canvas — and the
// only place you decide what the user may change about it.
editor.DomComponents.addType('hero', {
  model: {
    defaults: {
      tagName: 'section',
      attributes: { class: 'hero' },
      components: '<h1 class="hero__title">Build faster</h1>',
      // Traits become the fields in the settings panel.
      traits: [{ type: 'text', name: 'headline', label: 'Headline' }],
      droppable: false,
    },
  },
});

Lee la API de Componentes

Salida → componente de → bloque

El bloque no es el componente

Cuatro cosas comparten nombre en la mayoría de los tutoriales y son realmente diferentes. Mantenerlos separados es la diferencia entre un constructor que puedes mantener y un montón de cadenas HTML.

Bloquear
Componente
Rasgos
Margen
Tu solicitud

Bloquear

Lo que arrastra el usuario

Una entrada de paleta: una etiqueta, una categoría y el contenido que inserta. Puramente un punto de partida — no tiene vida después de la caída.

Componente

En qué se convierte

El tipo registrado en DomComponents. Decide la etiqueta, los hijos por defecto, si es posible soltar y cómo lo trata el editor a partir de ahí.

Rasgos

Qué pueden cambiar los usuarios

Los campos en el panel de ajustes. Un rasgo es un agujero deliberado en un componente que de otro modo está sellado — un titular, un enlace objetivo, un ID de plan.

Margen

Lo que sale

El componente se serializó de nuevo a HTML, con las clases y atributos que definiste, listo para lo que haga tu backend a continuación.

Diseña esta cadena deliberadamente y los usuarios no técnicos tienen verdadera libertad dentro de los límites que elijas. Si lo sáltas, habrás enviado un editor de texto que emite divs.

Bloques

Empieza con bloques HTML listos para fabricar

Estos son los tipos de secciones que casi todo constructor necesita desde el primer día, descritos por el marcado que emiten más que por su aspecto. Construyéndolos contra la API Block Manager, o instala un plugin de bloques y empieza desde una paleta completa.

Hero
Una sección con un encabezado, un párrafo de apoyo y un enlace estilizado como un botón.
Cabecera
Un encabezado con un elemento de logotipo y una lista de navegación que se pliega en anchos estrechos.
Características
Un contenedor de cartas repetidas, cada una con una ranura de icono, un encabezado y una copia del cuerpo.
Precios
Planifica tarjetas con un elemento de precio, una lista de características y un enlace de llamada a la acción.
Testimonios
Elementos de cita bloqueada con una cita y una imagen de avatar opcional.
Galería
Una cuadrícula de imágenes cuyas fuentes se llenan desde el Asset Manager.
CTA
Una única sección centrada con un título y un enlace principal.
Formas
Un elemento de forma con entradas etiquetadas y una acción que apuntas a donde quieras.
Pie de página
Columnas de enlace, texto legal y navegación secundaria en un elemento de pie de página.

Plugins de bloques de exploración

Vale la pena ser preciso: estos son ejemplos de tipos de bloques, no una lista de cosas integradas en GrapesJS. El núcleo comienza con un Block Manager vacío a propósito — qué paleta obtienen tus usuarios es una decisión que tomas, ya sea escribiendo los bloques o instalando uno de los plugins de bloques más abajo en esta página.

Casos de uso

¿Qué puedes construir?

El mismo núcleo de edición, señalando seis problemas diferentes. Cada uno de estos necesita control a nivel HTML por una razón distinta.

Editor de páginas HTML

Ofrece a los usuarios una forma visual de editar páginas que ya existen como HTML. Como el editor hace el marcado de ida y vuelta, estás ampliando tus páginas actuales en lugar de migrarlas al formato propietario de alguien.

Constructor de páginas WYSIWYG

Creador de páginas de aterrizaje

Deja que los profesionales del marketing ensamblen las páginas de campaña a partir de bloques que diseñó tu equipo, manteniendo intactas las clases y la estructura que espera tu sistema de diseño en el resultado.

Creador de páginas de aterrizaje

Creador de páginas SaaS

Integra la edición visual como una característica de tu producto. Los clientes crean páginas dentro de tu app, en tu dominio, almacenadas en tu base de datos.

Creador de páginas SaaS

Editor visual CMS

Añade una capa visual a una plataforma de contenido sin reemplazarla. El editor produce HTML que el CMS ya sabe almacenar y renderizar.

Editor de CMS sin cabeza

Generador de correo electrónico

El HTML del correo electrónico es una disciplina aparte: tablas, estilos en línea, peculiaridades del cliente. GrapesJS lo gestiona a través de los presets de MJML y del boletín en lugar de por la ruta de la página web.

Generador de correo React

Editor embebible

Incluye el editor dentro de un panel existente, detrás de tu propia autenticación y navegación, sin redirección a un sitio de terceros.

Creador de páginas embebible

Público

¿Quién utiliza un editor visual en HTML?

Diferentes equipos llegan aquí por distintos motivos, pero el requisito es el mismo: edición visual que no les cueste el control del marcado.

Desarrolladores

Añadir edición visual a una aplicación que ya existe, sin tener que adoptar una plataforma ni reescribir el front-end en torno al runtime de otra persona.

Equipos SaaS

Convierte la creación de páginas en una función por la que los clientes pagan, con el editor en tu dominio y los datos en tu base de datos.

Equipos de CMS

Da a los equipos de contenido edición visual sin reemplazar el CMS debajo, porque lo que sale es HTML que el sistema ya maneja.

Agencias

Construye un sistema de edición de páginas con tus propios bloques y componentes, y luego reutilízalo entre proyectos del cliente en lugar de reconstruirlo por proyecto.

Plataformas de marketing

Permite que los usuarios compongan páginas de destino de forma visual mientras tu plataforma mantiene las plantillas, el seguimiento y la cadena de publicación consistentes.

Incrustación

Integra el HTML Builder en tu producto

No tienes que enviar usuarios a otra web para editar sus páginas. Monta el editor dentro de tu propia aplicación y mantén tu autenticación, navegación y backend existentes.

Dónde se sienta el editor

Tu aplicación
Auth
Editor HTML
Tu API
Base de datos

En la práctica, esta es una ruta en tu app que renderiza un contenedor e inicializa el editor contra él. El usuario nunca sale de tu dominio, la sesión es la que ya tiene, y el proyecto carga y guarda a través de los endpoints que has escrito.

Consulta la guía para el creador de páginas embebidos

Almacenamiento

Guarda los proyectos de HTML Builder en tu propio backend

Apunta el Storage Manager a tu API y cada página se convierte en una fila en tu base de datos, detrás de tu propia autenticación. GrapesJS no aloja nada, y GJS.Market tampoco: nunca llega ningún contenido de usuario.

Dos cosas para guardar, no una

Estado del editor
Tu API de almacenamiento
Tu base de datos
HTML + CSS
Página en directo

editor-storage.jsJS

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

  // Editor state goes to your API, behind your own authentication.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

Mantén la distinción clara. El estado del editor es lo que el editor necesita para reabrir una página y poder editarla más. La salida publicada es el HTML y CSS que recibe un visitante. Tienen diferentes ciclos de vida, diferentes reglas de acceso y normalmente tablas distintas — y un plugin puede ayudar con el cableado, pero la arquitectura es tuya.

Publicación

Tú decides cómo se publica HTML

1
01
Edición
El usuario trabaja en el lienzo. Nada es público todavía; el editor solo toca el estado del proyecto.
2
02
Guarda un borrador
El guardado automático o un guardado explícito escribe el estado a través de tu endpoint de almacenamiento, bajo tus reglas de permiso.
3
03
Vista previa
Renderiza el HTML y CSS actuales en una ruta de vista previa para que el autor vea la página real, no el lienzo.
4
04
Aprobar
Si tu producto necesita ser revisado, este es tu flujo de trabajo: el editor no tiene opinión sobre quién puede aprobar.
5
05
Publicar
Toma getHtml() y getCss(), sanea el resultado, envuélvelo en tu plantilla, versiónalo y escríbelo allí donde sirvas tus páginas.
6
06
Live HTML
La página publicada es HTML y CSS simples en tu infraestructura. No se requiere tiempo de ejecución de editor para que un visitante la vea.

Esta es la diferencia más clara respecto a un creador de páginas alojado. No hay un proveedor que decida cuándo tu página se publica, en qué dominio se atiende o qué pasa si dejas de pagar.

Responsive

Construye HTML Responsive de forma Visual

El Device Manager cambia el lienzo entre anchos, y los estilos establecidos mientras un dispositivo está activo se escriben como una consulta multimedia con alcance a ese ancho en lugar de sobrescribir la regla base. GrapesJS viene con Escritorio, Tableta, Horizontal móvil y Vertical móvil; la lista y sus anchos son configuración, no un conjunto fijo.

EscritorioPor defecto

Tablet770px

Retrato móvil320px

Qué pueden cambiar los usuarios por punto de ruptura

Espaciado
Tipografía
Distribución
Visibilidad
Alineación
Fondos

Los anchos que se muestran son los valores predeterminados de GrapesJS. Vale la pena decirlo claramente: el editor define las reglas CSS — cómo se renderiza finalmente una página publicada sigue dependiendo del marcado y la hoja de estilos que envíes y del navegador que las lea.

Ecosistema

Extiende tu HTML Builder con plugins

Todo lo que hay a continuación es una lista real en GJS.Market, con el nombre, precio y miniatura mostrados en directo desde el catálogo. Agrupado de la forma en que esta página piensa sobre el problema: primero código y salida, luego los paneles que los rodean.

Edición de código y HTML

Permite que los usuarios —o tus propios desarrolladores— lean y editen el marcado y los estilos detrás de un componente sin salir del editor.

Explora esta categoría

Vista de código

Grapesjs Component Code Editor

Abre el HTML y CSS del componente seleccionado para la edición directa — la forma más rápida de hacer evidente la relación visual/código para un desarrollador escéptico.

Consideración	GrapesJS	Biblioteca de arrastrar y soltar	Creador de páginas alojado	Construir desde cero
Incluye editor visual	Sí	Parcial — solo el gesto	Sí	Lo que construyas
Control sobre HTML y CSS	Alta — la salida es tuya para post-procesar	Alto — tú escribes el margen	Varía según el proveedor	Total
Autoalojado	Sí	Sí	Normalmente no	Sí
Incrustable en tu app	Sí	Sí	Depende del proveedor	Sí
Modelo de componentes y rasgos	Incorporado	Escríbela tú	Modelo del proveedor	Escríbela tú
Controles de estilo y puntos de interrupción	Incorporado	Tú los escribes	Incorporado	Tú los escribes
Hora de un editor en activo	Días	Meses	Actas	Meses a años
Personalización de productos	Alto	Alto	Delimitado por el proveedor	No Acotado
Mantenimiento continuo	Tu integración, más un núcleo upstream	Todo el editor	Vendedores	Todo, para siempre
Licencia y coste	Núcleo BSD-3-Clause, $0 para usar	Normalmente permisivo	Suscripción	Tiempo de ingeniería

Crea un generador de HTML de arrastrar y soltar con GrapesJS

Una sección, tres vistas

Construye HTML visualmente en lugar de escribir cada diseño a mano

Arrastrar y soltar

Edición visual

Salida HTML + CSS

¿Qué es un generador de HTML de arrastrar y soltar?

Prueba con un editor HTML real

De arrastrar y soltar a HTML de producción

¿Qué pueden editar los usuarios?

Contenido

Distribución

Tipografía

Colores

Imágenes y medios

Estilos responsivos

Componentes

Atributos y rasgos

Controlas el HTML y el CSS

¿Por qué crear un editor HTML desde cero?

Eres dueño de los catorce

Empiezas donde ya funcionan

Lo que escribes y lo que ya existe

Cómo encaja un generador de arrastrar y soltar HTML en tu aplicación

Los bloques de construcción detrás del editor

Componentes

Block Manager

Style Manager

Storage Manager

Asset Manager

Crea tus propios componentes HTML

El bloque no es el componente

Lo que arrastra el usuario

En qué se convierte

Qué pueden cambiar los usuarios

Lo que sale

Empieza con bloques HTML listos para fabricar

Hero

Cabecera

Características

Precios

Testimonios

Galería

CTA

Formas

Pie de página

¿Qué puedes construir?

Editor de páginas HTML

Creador de páginas de aterrizaje

Creador de páginas SaaS

Editor visual CMS

Generador de correo electrónico

Editor embebible

¿Quién utiliza un editor visual en HTML?

Desarrolladores

Equipos SaaS

Equipos de CMS

Agencias

Plataformas de marketing

Integra el HTML Builder en tu producto

Guarda los proyectos de HTML Builder en tu propio backend

Tú decides cómo se publica HTML

Construye HTML Responsive de forma Visual

Extiende tu HTML Builder con plugins

Edición de código y HTML

Grapesjs Component Code Editor

Code Editor

Exportación y publicación

Export Zip

GrapesJS NodeJS JSON Converter to HTML/CSS

Grapesjs Netlify

Bloques HTML

Plugin Basic Blocks

Plugin Blocky for Tailwind CSS

Controles de estilo

Ui Suggest Classes

Grapesjs Style Gpickr

Componentes personalizados

Symbols

Texto enriquecido