-thumbnail.jpg&w=3840&q=70)
-thumbnail.jpg&w=3840&q=70)
Empieza con GrapesJS
Cuéntanos qué tiene que hacer el editor y en qué aplicación encuentra, y recibe un plan de integración concreto.
Empieza con GrapesJSComparación del marco de editores
GrapesJS vs Craft.js
Compara dos enfoques de código abierto para construir editores visuales, creadores de páginas y experiencias de edición SaaS.Observa cómo difieren GrapesJS y Craft.js en arquitectura, integración con React, infraestructura de editores, personalización, extensibilidad, almacenamiento y desarrollo en producción.
Ambos son de código abierto y ambos son frameworks — ninguno es un producto alojadoCraft.js es React-first por diseño; GrapesJS funciona como una biblioteca en cualquier páginaCada reclamación a continuación está fechada y vinculada a la propia documentación del proyecto
Craft.js
Fundación React-primera editora
- Tu solicitudTuyo
- Craft.jsMarco
- Tu UI de editorTuyo
El editor es una aplicación React que diseñas tú.
GrapesJS
Una base de editor visual más completa
- Tu solicitudTuyo
- GrapesJSMarco
- Lienzo
- Bloques
- Style Manager
- Capas
- Tu backendTuyo
El editor llega reunido; lo extiendes.
Dos minutos
¿Qué framework se adapta a tu producto?
Cinco preguntas sobre tu pila, tu producción y cuánto del editor quieres poseer. El resultado nombra las respuestas que lo impulsaron, para que puedas discrepar en los detalles más que en la conclusión.
0 de 5 respondió
Respuesta rápida
La versión corta, antes de los detalles
Ambos proyectos son frameworks de código abierto que instalas en una aplicación que ya posees. La diferencia está en dónde te ponen al día.
Elige Craft.js cuando
Tu aplicación es React, y el editor también es una aplicación React.
Señales
- Tu solicitud está profundamente centrada en React
- Tu editor se basa fundamentalmente en componentes React
- Quieres el máximo control sobre la arquitectura del editor
- Te sientes cómodo construyendo partes significativas de la experiencia de usuario del editor
- Tu salida está estrechamente ligada a React
Cambias el tiempo hasta el primer editor por un modelo de edición que es tu modelo de componentes.
Lee la documentación de Craft.jsElige GrapesJS cuando
Quieres un editor visual funcional para extender en lugar de un conjunto de primitivas que ensamblar.
Señales
- Necesitas una base más completa para un editor visual
- Quieres infraestructura de editor integrada
- Necesitas bloques, componentes, estilos, capas y recursos
- Quieres soportar múltiples entornos frontend
- Quieres ampliar el editor con plugins
- Estás construyendo un editor visual SaaS
- Necesitas un constructor de páginas embebible
- Necesitas correo electrónico y edición de páginas en un solo motor
Cambias algo de libertad arquitectónica por un editor que ya trabaja desde el primer día.
Empieza con GrapesJSArquitectura
Craft.js vs GrapesJS: ¿qué estás construyendo realmente?
Esta es la decisión de la que cae el resto de la página. Ambos frameworks te asignan un árbol de nodos, arrastrar y soltar y serialización. Difieren en cuánto del editor alrededor de ese árbol ya existe.
Craft.js
React → Craft.js → tus componentes → tu editor UI
- Tu solicitudCódigo que escribes y posees
- ReactCódigo que escribes y posees
- Craft.jsMarco de código abierto
- Tus componentesCódigo que escribes y posees
- Tu UI de editorCódigo que escribes y posees
- Tu backendCódigo que escribes y posees
Craft.js proporciona el árbol de nodos, el comportamiento de arrastrar y soltar, el historial y la serialización. Todo lo que ve un usuario — los paneles, las barras de herramientas, los controles de propiedades, la paleta de bloques — es React que escribes tú, usando tus propios componentes. Ese es el objetivo del diseño, no un hueco en él.
GrapesJS
Tu app → GrapesJS → tu backend
- Tu solicitudCódigo que escribes y posees
- GrapesJSMarco de código abierto
Subsistemas de editor que el framework ya incluye
- Lienzo
- Componentes
- Bloques
- Style Manager
- Capas
- Activos
- Commands
- Almacenamiento
- Tu backendCódigo que escribes y posees
GrapesJS proporciona un editor funcional: un lienzo, un modelo de componentes, una paleta de bloques, un gestor visual de estilos, un árbol de capas, un gestor de activos, un registro de comandos y una capa de almacenamiento. Lo reestilizas, reemplazas paneles y añades plugins — pero no empiezas escribiéndolos.
Quién la escribe
- Código que escribes y posees
- Marco de código abierto
Craft.js te da una base React primero. GrapesJS te da una base más amplia de editor visual.
Ninguno de los dos frameworks es una plataforma. Ninguno proporciona un CMS, alojamiento, autenticación, cuentas de usuario, facturación, permisos, multi-tenencia o una pipeline de publicación. Esos pertenecen a la aplicación en ambos lados, y cualquier comparación que los ponga en una columna está midiendo lo incorrecto.
Comparación de características
GrapesJS vs Craft.js, capacidad por capacidad
Lee las celdas, no un tic ni un cruce. "Requiere la implementación de tu editor" no es lo mismo que "falta", y "tu aplicación" no es lo mismo que "no soportada" — la mayor parte del tercio inferior de esta tabla es idéntica para ambos, porque ambos son frameworks y no productos.
| Capacidad | GrapesJS | Craft.js |
|---|---|---|
| Arquitectura primaria | Marco de edición visual | Marco de editor React |
| Dependencia de React | Opcional | Obligatorio |
| Flexibilidad del marco | Agnóstico respecto al marco | Solo React |
| Lienzo | Incorporado | Característica del marco |
| Arrastrar y soltar | Incorporado | Incorporado |
| Componentes | Incorporado | Característica del marco |
| Bloques | Incorporado | Requiere la implementación de tu editor |
| Capas | Incorporado | Paquete oficial de acompañamiento |
| Gestión de estilos | Incorporado | Requiere la implementación de tu editor |
| Activos | Incorporado | Requiere la implementación de tu editor |
| Commands | Incorporado | Implementación personalizada |
| Vista previa del dispositivo | Incorporado | Requiere la implementación de tu editor |
| Edición responsiva | Incorporado | Requiere la implementación de tu editor |
| Deshacer / volver a hacer | Incorporado | Incorporado |
| Editor personalizado UI | Integrado, totalmente personalizable | Tuyo de extremo a extremo |
| Componentes personalizados | Incorporado | Característica del marco |
| Bloques personalizados | Incorporado | Requiere la implementación de tu editor |
| Plantillas | A través de un plugin | Implementación personalizada |
| Integración de almacenamiento | Incorporado | Responsabilidad de la aplicación |
| JSON / datos de proyectos | Incorporado | Incorporado |
| Salida HTML/CSS | Incorporado | Implementación personalizada |
| Renderizado de componentes React | editor UI en React; lienzo renderiza HTML | Nativo del modelo |
| Flujos de trabajo de correo electrónico | A través de un plugin | Implementación personalizada |
| MJML | A través de un plugin | No aplicable |
| Ecosistema de plugins | Plugins más un mercado | Pequeño ecosistema |
| Extensibilidad API | Incorporado | Característica del marco |
| Autoalojamiento | Apoyado | Apoyado |
| Etiquetado blanco | Integrado, totalmente personalizable | Tuyo de extremo a extremo |
| Incrustación SaaS | Responsabilidad de la aplicación | Responsabilidad de la aplicación |
| Backend personalizado | Responsabilidad de la aplicación | Responsabilidad de la aplicación |
| Base de datos personalizada | Responsabilidad de la aplicación | Responsabilidad de la aplicación |
| Autenticación | Responsabilidad de la aplicación | Responsabilidad de la aplicación |
| Permisos | Responsabilidad de la aplicación | Responsabilidad de la aplicación |
| Publicación | Responsabilidad de la aplicación | Responsabilidad de la aplicación |
| Multi-inquilina | Responsabilidad de la aplicación | Responsabilidad de la aplicación |
Cada fila anterior se leía de la propia documentación, repositorio y entrada del registro npm de cada proyecto en 2026-09-03. Cuando una capacidad es accesible a través del propio ecosistema de un marco, la célula lo dice en lugar de marcarla como ausente.Fuentes: Resumen de Craft.js · API del editor de Craft.js · Paquete de capas Craft.js · Craft.js en npm · Documentación de GrapesJS · GrapesJS en npm
Señales del ecosistema
Lanzamientos actuales y tamaño de la comunidad
La popularidad no es un argumento técnico, y esta tabla no es un veredicto. Está aquí porque la cadencia de lanzamiento y el tamaño de la comunidad afectan cuánto tiempo esperas a una respuesta cuando algo se rompe — lo cual es un coste real de ingeniería, a diferencia de un recuento de estrellas por sí solo.
| Paquete | Última versión | Licencia | Publicado | Estrellas de repositorio |
|---|---|---|---|---|
| grapesjs | 0.23.6 | BSD-3-Clause | 2026-08-25 | 26,185 |
| @craftjs/core | 0.2.12 | MIT | 2025-02-14 | 8,738 |
Lee desde el registro npm y el GitHub API en la fecha anterior. Ninguno de los dos repositorios está archivado. Craft.js sigue en una línea 0.2.x y su versión más reciente es anterior a esta página por más de un año; existe una alfa 0.3.0 pero no se ha actualizado desde 2022. Eso es un hecho que merece la pena conocer antes de un compromiso de varios años — no es, por sí solo, una razón para descartar el proyecto, y los equipos que lo ejecutan en producción hoy no están varados. Craft.js declara React como una dependencia entre pares React 16.8 – 19. Craft.js también publica dos paquetes complementarios: @craftjs/layers y @craftjs/utils.
Ámbito de trabajo
¿Cuánta infraestructura de editor necesitas construir?
La columna más útil de esta página. No es una lista de lo que falta a cada marco, sino una lista de dónde encaja el trabajo.
| Capacidad | Craft.js | GrapesJS |
|---|---|---|
| Fundación de editor | Marco | Marco |
| Lienzo | Arquitectura del editor central | Incorporado |
| Modelo de componentes | Orientado a React | Incorporado |
| Bloques | Requiere la implementación de tu editor | Incorporado |
| Controles de estilo | Requiere la implementación de tu editor | Incorporado |
| Capas | Paquete oficial de acompañamiento | Incorporado |
| Gestión de activos | Requiere la implementación de tu editor | Disponible |
| Controles del dispositivo | Requiere la implementación de tu editor | Disponible |
| Commands | Arquitectura del editor central | Disponible |
| Almacenamiento | Aplicación / integración | Storage Manager |
| UI personalizado | Control total | Altamente personalizable |
"Requiere tu implementación de editor" significa que el framework te da el estado y el APIs, y tú renderizas la superficie. Para un equipo que quiere que la superficie sea suya, esa es la funcionalidad. Para un equipo que necesita un editor funcional este trimestre, es el calendario.
Ninguna de las dos columnas es un atajo. Una de ellas simplemente empieza más adelante y la otra se acerca más cerca de tu propio modelo de componentes.
El comercio
Editor headless frente a base de editor visual
Cada ventaja en esta página tiene un coste equivalente. Aquí están uno al lado del otro, en la misma forma, al mismo tamaño.
Craft.js
Es ideal para equipos que quieren una arquitectura nativa React y una interfaz de editor diseñada por ellos mismos.
Lo que obtienes
- El editor es React, de arriba a abajo — no hay un segundo modelo de renderizado sobre el que razonar
- Tus componentes de producción son los componentes del lienzo
- Control total sobre la experiencia de edición, porque tú renderizas todo
- Un núcleo pequeño y legible con una superficie API estable
- El estado serializado es un árbol de nodos sencillo que puedes moldear según tu esquema
Cuánto cuesta
- Los paneles, controles de propiedades, paletas de bloques y cambio de dispositivos son tuyos para construir
- No hay gestor visual de estilo: tú diseñas los controles que tienen tus usuarios
- No hay ruta de exportación de HTML/CSS desde el primer momento; renderizas el árbol tú mismo
- Está vinculado a React, por lo que el editor no puede viajar a otro frontend
- Un ecosistema pequeño: pocas extensiones ya listas para incluir
El coste es diseñar la interfaz del editor. El retorno es un editor que se ajuste exactamente a tu arquitectura.
GrapesJS
Es mejor para equipos que quieren que la infraestructura de editor visual funcional se extienda.
Lo que obtienes
- Ya existen y funcionan juntos lienzos, bloques, capas, estilos, recursos y comandos
- Edición de dispositivos sensibles y un gestor de estilos visual desde el primer día
- Se ejecuta como una biblioteca en cualquier página, así que el editor no está ligado a un solo framework frontend
- Un plugin documentado API más un catálogo de extensiones listas
- Limpia HTML y CSS de fábrica, además de datos de proyecto serializables
Cuánto cuesta
- El lienzo es HTML, no tu árbol React — un sistema de diseño React tiene que ser espejado como componentes
- Heredas una arquitectura de editor en lugar de diseñarla
- Personalización profunda significa aprender el módulo APIs antes de poder dominarlos
- Igualar un diseño de producto muy opinativo requiere trabajo real en los paneles
El coste es aprender una arquitectura que diseñó otra persona. El retorno es un editor que ya funciona.
Míralo funcionando
Abrir en una pestaña nuevaTres editores, un motor
La demo oficial: arrastrar bloques al lienzo, editar estilos en el gestor de estilos, cambiar el ancho de los dispositivos, inspeccionar el árbol de capas. Sin plugins, sin configuración — esto es lo que incluye el núcleo.
grapesjs.com/demo.htmlCódigo abierto
Cargas desde un origen de terceros
Los tres ejecutan el mismo motor de código abierto. La diferencia entre ellos es la configuración, los paneles y los plugins — que es la forma práctica de "framework extensible de editor visual". Las demos se cargan desde orígenes de terceros solo después de que decidas cargarlas.
React
Si tu producto es React-primero
Esta es la pregunta con la que la mayoría de los lectores realmente llegan, y la respuesta honesta se divide en la mitad.
Craft.js es una opción muy adecuada cuando
El editor no es un componente de tu app React — es tu app React.
Señales
- El editor es fundamentalmente una aplicación React
- Tu contenido se corresponde directamente con los componentes de React
- Quieres que el modelo de componentes de React maneje el editor
- Tus usuarios son desarrolladores o un equipo técnico interno
El lienzo representa los mismos componentes que en producción. Nada se refleja, nada se desvía.
GrapesJS es una opción muy adecuada cuando
React es una parte de tu stack y no su totalidad.
Señales
- React es solo una parte de tu stack
- Quieres un editor independiente de frameworks
- Necesitas edición visual HTML/CSS
- Quieres reutilizar el editor en diferentes entornos de aplicaciones
El editor UI puede ser React mientras que el lienzo sigue siendo HTML — lo que lo hace portátil.
El lienzo es la verdadera distinción. Craft.js renderiza tu árbol React dentro del editor; GrapesJS edita un documento HTML y te da los HTML y CSS resultantes. Un sistema de diseño React puede representarse en GrapesJS como componentes del editor, pero es una representación, y mantener esa representación sincronizada con la producción es un trabajo que deberías planificar.
Independencia del marco
¿Y si necesitas más que React?
GrapesJS puede servir como base de editor en diferentes entornos frontend, mientras que Craft.js está diseñado específicamente para React.
GrapesJS
Lee eso con precisión. El motor es una biblioteca JavaScript que se monta sobre un elemento DOM, lo que la hace utilizable desde cualquiera de los entornos frontend mencionados arriba. No significa que exista un envoltorio oficial para cada uno de ellos: hay un envoltorio oficial de React, y las integraciones Vue y Angular son patrones más que paquetes. Las páginas por framework que aparecen a continuación muestran el código real de integración.
SaaS
¿Incorporar un editor visual a tu SaaS?
El editor es una superficie entre varias, y es la única sobre la que ambos frameworks tienen opinión. Todo lo que lo rodea sigue siendo tuyo.
- Autenticación
- Organizaciones
- Facturación
- Permisos
- Base de datos
- Editor visual
GrapesJS
Este diagrama se vería igual con Craft.js en lugar de GrapesJS. Ninguno de los dos frameworks proporciona autenticación, organizaciones, facturación, permisos ni una base de datos, y una comparación que implique lo contrario está vendiendo algo.
Casos de uso
Qué equipos realmente construyen con él
Seis formas que adopta la misma superficie de edición una vez que está dentro de un producto. Cada una se cubre en profundidad en su propia página.
Creador de sitios web
Deja que los clientes creen y publiquen sus propios sitios dentro de tu producto, con tus componentes y tu alojamiento.
Consulta la guía del constructor SaaSSuperficie de edición CMS
Pon una capa de edición visual sobre contenido que ya está en tu base de datos o un CMS sin cabeza.
Consulta la configuración CMS sin cabezaCreador de páginas de aterrizaje
Ofrece a los equipos de marketing un lienzo limitado de secciones aprobadas en lugar de una herramienta de diseño sin límites.
Consulta la construcción de la página de aterrizajeEditor de portal de clientes
Incrusta el editor dentro de un panel en el que tus clientes ya inician sesión, en lugar de enviarlos a otro sitio.
Consulta la guía de incrustaciónConstructor multiinquilino
Distribuye el mismo editor a muchos inquilinos con marca por inquilino, conjuntos de bloques y permisos — implementados en tu aplicación.
Ver opciones de marca blancaGenerador de correo electrónico
Reutiliza el mismo motor para plantillas de marketing y correo transaccional en lugar de comprar un segundo editor.
Consulta la configuración del correo electrónicoIncrustación
Integra el editor en tu producto
El editor puede convertirse en una parte nativa de tu aplicación en lugar de ser un servicio alojado separado. Ambos frameworks lo soportan; la diferencia está en cuánto de la superficie ensamblas antes de poder enviarla.
Tu solicitud
El producto al que tus usuarios ya inician sesión
- Tu ruta y distribución
- Tu sesión y permisos
- Tu navegación y shell
- Tus fichas de diseño
Superficie de edición
El editor, montado dentro de él
Explorar plugins- Lienzo y paneles
- Tu conjunto de bloques
- Tus componentes
- Plugins que añades
Propiedad tuya
Shell de aplicación
- Auth
- Enrutamiento
- Multitenencia
- Facturación
Código abierto
Motor de edición
- Lienzo
- Componentes
- Estilos
- Commands
Propiedad tuya
Capa de datos
- Tu API
- Tu base de datos
- Tus activos
- Tus versiones
Ruta de solicitud
- Tu panel de control
- Editor visual
- GrapesJS
- Tu API
- Tu base de datos
Sistema de diseño
Construye en torno a tu sistema de diseño
El framework de edición adecuado debería permitir construir la experiencia de edición en torno a los componentes con los que realmente trabajan tus usuarios. Ambos frameworks hacen esto; difieren en qué es un componente.
Del sistema de diseño al lienzo
- Tu sistema de diseño
- Componente de editor
- Bloque en la paleta
- En el lienzo
Conjunto típico de bloques
Las secciones que realmente colocan tus usuarios
Un conjunto de bloques es una decisión de producto, no una característica del marco. Estas son las secciones que la mayoría de los equipos acaban enviando primero: restringidas, con marca y seguras para entregar a un usuario no técnico.
Hero
Titular, texto de apoyo y acción principal, con un diseño bloqueado.
Precios
Planifica columnas impulsadas por tus propios datos en lugar de texto libre.
Características
Una cuadrícula repetible donde el recuento está acotado y los iconos provienen de tu conjunto.
Llamada a la acción
Una sola banda de conversión con opciones de color aprobadas por la marca.
Navegación
Navegación del sitio que tus usuarios pueden poblar pero no reestructurar.
Formulario
Campos conectados a tu endpoint, con validación que controlas.
Testimonios
Citas y atribuciones extraídas de registros en lugar de reescribirlas.
Tarjeta de producto
Una ficha de comercio atada a un producto real, no a una imagen de uno.
Las restricciones que tus usuarios no pueden romper valen más que un lienzo sobre el que todo es posible.
Almacenamiento
Conecta el editor con tu propio backend
Ambos frameworks serializan su estado y te lo entregan. Ninguno lo almacena. GrapesJS proporciona un Storage Manager con llamadas de carga y almacenamiento; Craft.js te da el árbol de nodos serializado y deja el transporte a tu aplicación.
Camino de persistencia
- Editor
- Capa de almacenamiento
- REST / GraphQL
- Tu API
- Tu base de datos
Destinos comunes
- PostgreSQL
- MySQL
- MongoDB
- REST
- GraphQL
- Headless CMS
Tu aplicación es la propietaria de la arquitectura backend. Ninguno de los dos frameworks proporciona base de datos, API, versionado, publicación o CDN, y la lista anterior es una lista de cosas que ya ejecutas — no funciones que ninguno de los dos proyectos proporcione.
Correo electrónico
¿Y la edición de correos electrónicos?
El correo electrónico es el caso más claro en el que ambos frameworks no son intercambiables. GrapesJS puede extenderse para flujos de trabajo de edición de correo mediante presets que intercambian el conjunto de bloques y el formato de exportación; Craft.js no tiene un camino equivalente, porque su salida es un árbol React en lugar de un marcado.
Ruta del correo electrónico
- GrapesJS
- Componentes de correo electrónico
- MJML / HTML
- Tu infraestructura de correo electrónico
- Generador de boletines
- Editor de correo electrónico CRM
- Plantillas de automatización de marketing
- Plantillas de correo electrónico transaccional
- Editor de correo electrónico orientado al cliente
Nada de esto es automático. Un editor de correo necesita un conjunto de bloques seguro para tablas, un paso de exportación y pruebas entre clientes — el motor elimina el problema del lienzo, no el del correo electrónico.
Marca blanca
Haz que el editor forme parte de tu marca
Ambos frameworks te permiten poseer la superficie, desde direcciones opuestas: con Craft.js la escribes, así que es tuya por defecto; con GrapesJS reemplazas la interfaz que ya proporciona el framework. Tres niveles, en el orden en que suelen llegar los equipos.
- 01
Superficie
Las partes que un usuario ve en la primera pantalla.
- Colores, tipos y espaciado de tus fichas
- Tu logo y nombre del producto en la interfaz del editor
- Paneles y barras de herramientas personalizados
- Iconos de tu propio set
- 02
Vocabulario
Las palabras que tu producto ya usa para estas ideas.
- Renombrar bloques, sectores y comandos
- Traduce la interfaz a tus sitios
- Sustituye las etiquetas genéricas por términos de dominio
- Oculta los paneles que tus usuarios no necesitan
- 03
Capacidad
Lo que cada usuario puede hacer en absoluto.
- Conjuntos de bloques por inquilino
- Secciones bloqueadas y regiones de solo lectura
- Pasos de aprobación y revisión
- Roles y auditoría — implementados en tu aplicación
La última capa es la que ningún framework de editor proporciona. Los roles, la aprobación y la auditoría son características de aplicación en ambos lados de esta comparación.
Licencias
Licencias
Verificado en relación con la entrada actual del registro y el archivo de licencias de cada paquete en la fecha siguiente, porque este sitio ha publicado información de licencia inconsistente en el pasado.
| Paquete | Licencia | Fuente |
|---|---|---|
| grapesjs | BSD-3-Clause | Licencia |
| @grapesjs/react | MIT | Licencia |
| @craftjs/core | MIT | Licencia |
| GJS.Market | Términos comerciales por producto | Mercado |
Los productos del Marketplace se licencian individualmente por sus autores; los términos se muestran en cada página de producto antes de la compra. El núcleo GrapesJS y su envoltorio React tienen licencias diferentes — el núcleo no es MIT. Craft.js publica todos sus paquetes bajo una sola licencia.
Esto es una declaración sobre qué licencia publica cada paquete, no asesoramiento legal. Lee los archivos de licencias y compécalos con tu propio modelo de distribución. Licencias releyéndose 2026-09-03.
Coste
Comparar el coste total de ingeniería
No hay una cifra de horas en esta página. "Cuarenta horas frente a trescientas veinte" depende enteramente de tu equipo, tu diseño y tu definición de hecho, y cualquier página que lo cite es una suposición. Lo que sigue es el trabajo que existe en cada lado, así que puedes valorarlo según tu propia velocidad.
Craft.js
Trabajo de ingeniería potencial antes de tener un editor que tus usuarios puedan usar.
- Interfaz del editor
- Barra de herramientas, paneles laterales, posibilidades de selección y el diseño que las almacena.
- Paleta de bloques
- Una paleta UI más los metadatos que deciden qué se puede dejar en cada sitio.
- Controles de estilo
- Tipografía, espaciado, color y controles de maquetación, y los accesorios a los que escriben.
- Gestión de activos
- Sube, navega, selecciona y reemplaza, conectado por cable a tu almacenamiento.
- Controles responsivos
- Conmutación de puntos de interrupción en el lienzo y valores por punto de interrupción en el modelo.
- Persistencia
- Serializar, transportar, versionar y restaurar — el árbol te lo asignas a ti, la pipeline no.
- Plantillas y publicación
- Puntos de partida para los usuarios y lo que significa "publicado" en tu producto.
GrapesJS
Ya hay más infraestructura de editores disponible, lo que reduce cuánto de infraestructura específica del editor se implementa desde cero. No la reduce a cero.
- Integración
- Montar el editor en tu app, en tu framework, con tu build.
- Tu conjunto de bloques
- Convertir tu sistema de diseño en bloques y componentes — el verdadero trabajo de este lado.
- Cableado de almacenamiento
- Apuntando el Storage Manager a tu API y gestionando fallos y conflictos.
- Personalización de paneles
- Sustituir o reestilizar los paneles que no combinan con tu producto.
- Características de aplicación
- Roles, aprobación, versionado, publicación y arrendamiento — tuyos en ambos lados.
Ambas columnas terminan en el mismo lugar: un editor que tus usuarios pueden usar, dentro de una aplicación que aún tienes que construir. La diferencia está en cuál de estas líneas escribe primero tu equipo.
Mercado
¿Qué necesitas construir?
Empieza por el editor principal y añade la funcionalidad que tu producto realmente necesita. Cada anuncio a continuación es un producto real, publicado actualmente: los precios se leen en directo desde el catálogo cuando se crea esta página.
Creador de páginas React
Presets y componentes para equipos que montan el editor dentro de una aplicación React.
Navegar categoríaReact UI
React UI for GrapesJS
Los paneles de editor se renderizan como componentes React, así que la interfaz del editor coincide con la aplicación que los rodea.
GratisVista
Preset
Reactor Preset for GrapesJS
Un punto de partida configurado para un editor alojado en React en lugar de una llamada de entrada en blanco.
GratisVista
Componente
Hero React Component GrapesJS
Un ejemplo práctico de un componente React expuesto al lienzo como un bloque editable.
GratisVista
Starter
GrapesJS React Demo — Starter Integration for React Developers
Una integración mínima para leer antes de conectar el editor a tu propio árbol React.
GratisVista
Generador de correo electrónico
Presets y conjuntos de bloques que convierten el mismo motor en un editor de correo.
Navegar categoríaBloqueos de correo electrónico
GrapesJS Email Blocky – Premium Responsive Email Blocks
Un conjunto de bloques de correo responsivo, así que la primera plantilla de correo no son tablas escritas a mano.
69,00 US$Vista
Preset MJML
MJML Preset
Cambia el lienzo a un modelo de componente de correo electrónico y exporta los clientes de correo de marcado aceptados.
GratisVista
Preajuste de correo electrónico
Newsletter Preset
Un conjunto de bloques y ruta de exportación con forma de boletín para el correo de marketing.
GratisVista
Bloques de documentos
GrapesJS Document Blocky
Bloques de documento de formato largo para editores que generan páginas en lugar de páginas de destino.
69,00 US$Vista
Constructor SaaS
Persistencia y gestión de varias páginas: las piezas que un producto necesita una vez que una persona edita.
Navegar categoríaAlmacenamiento
Directus Storage
Persiste los datos proyectados directamente en un CMS headless en lugar de un endpoint personalizado.
GratisVista
Almacenamiento
Grapesjs Firebase Storage
Cableado de almacenamiento para equipos que ya están funcionando en una base de datos de documentos alojada.
GratisVista
Almacenamiento
IndexedDB Storage
Persistencia local para borradores, edición offline y prototipos antes de que exista el API.
GratisVista
Página múltiple
Pages Manager
Proyectos de varias páginas en una sesión de editor: el punto en que una demo se convierte en un producto.
25,00 US$Vista
Creador de páginas de aterrizaje
Bibliotecas de bloques, secciones y gestión de plantillas para páginas de marketing.
Navegar categoríaBloques
Plugin Blocky for Tailwind CSS
Una biblioteca de bloques de clase utilidad, para que la salida del lienzo coincida con un sistema de diseño existente.
59,00 US$Vista
Sección
Super Header for GrapesJS
Una sección de navegación configurable, que por lo demás es lo primero que todo equipo reconstruye.
39,00 US$Vista
Sección
Super Footer for GrapesJS
La sección de zapata correspondiente, con el mismo modelo de configuración.
39,00 US$Vista
Plantillas
Templates Manager
Puntos de partida guardados entre los que eliges los usuarios en vez de enfrentarse a un lienzo vacío.
39,00 US$Vista
Constructor de marca blanca
Para un editor white-label, el punto de partida es un preset que reemplaza toda la shell en lugar de un plugin que le añade algo — las tres demos anteriores son exactamente esas, y cada una es un producto.
Explorar por categoría
- Plugins
- Presets
- Bloques
- Componentes
- Almacenamiento
- Correo electrónico
- Texto enriquecido
- Estilos
- Constructores de terrenos
- Commands
- IA
El catálogo tiene dos listados realmente impulsados por IA en lugar de una categoría completa de IA. Se nombran aquí en lugar de tener su propia sección: el centro de categorías de IA no tiene nada publicado detrás, así que enviar lectores allí sería un desperdicio de clic.
Empieza con el editor central y añade la funcionalidad que tu producto realmente necesita.
Catálogo verificado 2026-09-03. grapesjs-gpt-plugin · grapesjs-image-ai-thumbai
Implementación
Habla con un experto en GrapesJS
Si la comparación anterior llega a GrapesJS y el conjunto de bloques es el trabajo que tienes delante, esto es lo que hacemos.
- Montar el editor dentro de una aplicación existente
- Convertir un sistema de diseño en componentes y bloques de editor
- Cablear el Storage Manager a tu API y a tu base de datos
- Añadir una ruta de creación de correo electrónico a un editor existente
- Etiquetado en blanco de la carcasa, los paneles y el vocabulario
- Portabilidad de un editor construido sobre otro framework
Decisión
¿Qué marco deberías elegir?
Catorce requisitos, y el marco al que cada uno apunta. Tres de ellos apuntan a ambos, porque para esos requisitos cualquiera de los dos marcos servirá y pretender lo contrario haría que el resto de esta tabla fuera menos fiable.
| Requisito | Mejor ajustado |
|---|---|
| React-primer editor | Craft.js |
| Edición profunda de componentes React | Craft.js |
| Crea tu propia experiencia de editor | Craft.js |
| Control máximo nativo React | Craft.js |
| Editor usado solo por desarrolladores | Craft.js |
| Editor independiente del framework | GrapesJS |
| Infraestructura integrada de editor visual | GrapesJS |
| Edición visual HTML/CSS | GrapesJS |
| Creador de páginas SaaS | GrapesJS |
| Editor de correo electrónico y de página en un solo motor | GrapesJS |
| Ecosistema de editores existente | GrapesJS |
| Datos del proyecto JSON que guardas tú mismo | Cualquiera de los dos |
| Autoalojamiento sin proveedor | Cualquiera de los dos |
| Deshacer y volver a hacer desde la caja | Cualquiera de los dos |
¿Dónde se sitúa tu producto?
El editor tiene que generar un árbol de componentes React en vivo
Craft.js
Para este es el caso para que existe Craft.js. Ningún plugin de GrapesJS cambia el hecho de que su lienzo sea HTML.
Quieres diseñar cada panel y controlarte tú mismo
Craft.js
Craft.js espera que renderices la superficie, así que no hay nada que reemplazar primero.
El editor solo lo usan los desarrolladores de tu propio equipo
Craft.js
Un editor React diseñado específicamente es más barato de mantener que uno general que ya has reducido.
El editor tiene que ejecutarse fuera de React, ahora o más adelante
GrapesJS
GrapesJS se monta en un elemento DOM, por lo que es accesible desde cualquier entorno frontend.
Este trimestre necesitas un editor útil
GrapesJS
El lienzo, los bloques, los estilos, las capas y los recursos ya existen y ya funcionan juntos.
Necesitas tanto la creación de páginas como de correo electrónico
GrapesJS
Un motor cubre ambos mediante presets de correo electrónico; un árbol React no se convierte en marcado de correo electrónico.
Preguntas
GrapesJS y Craft.js, respondidos
¿Cuál es la diferencia entre GrapesJS y Craft.js?
Craft.js es un framework React para crear experiencias personalizadas de páginas y editores: proporciona un árbol de nodos serializable, arrastrar y soltar, un historial de deshacer/rehacer y React APIs, y renderizas la interfaz del editor con tus propios componentes React. GrapesJS es un framework de editor visual que llega con más elementos del editor ya construidos — un lienzo, un modelo de componentes, una paleta de bloques, un gestor visual de estilos, un árbol de capas, un gestor de recursos, un registro de comandos y una capa de almacenamiento. La cuestión práctica es si quieres construir un editor React altamente personalizado a partir de primitivas de nivel inferior o partir de una base más completa de editor visual.
¿Es GrapesJS una alternativa a Craft.js?
Para la mayoría de los proyectos, sí — ambos son frameworks de código abierto para convertir un editor en software propio, y cualquiera puede ser la base para un constructor de páginas. Sin embargo, no son reemplazos directos entre sí: los modelos de canvas difieren, así que moverse entre ellos implica reimplementar componentes en lugar de intercambiar una dependencia. Si estás evaluando específicamente un reemplazo o migración, la página alternativa dedicada a Craft.js cubre ese camino.
¿El Craft.js es solo React?
Sí. Craft.js está construido sobre React y declara React como dependencia de pares, actualmente en el rango 16.8 a 19. No hay una compilación de Vue, Angular ni JavaScript vanilla, y su modelo de componentes asume React en todo momento. Eso es una decisión de diseño y no una omisión — ser nativo de React es lo que permite que tus componentes de producción sean los componentes del lienzo.
¿Es independiente el framework GrapesJS?
El motor es una biblioteca JavaScript que se monta sobre un elemento DOM, por lo que puede ejecutarse dentro de una aplicación React, Vue, Angular, Next.js o en JavaScript simple. Eso no es lo mismo que decir que existe un envoltorio oficial para cada entorno: existe un paquete oficial de envolvimiento React, mientras que las integraciones Vue y Angular son patrones documentados en lugar de paquetes mantenidos. Las páginas por marco en este sitio muestran el código real de montaje y desmontaje para cada entorno.
¿Cuál es mejor para un creador de páginas React?
Depende de lo que produzca el creador. Si la salida es un árbol de componentes React y tus usuarios editan directamente tus propios componentes, Craft.js es el que encaje más cercano. Si la salida es HTML y CSS que tiene que renderizarse fuera de React — una página publicada, una plantilla exportada, un correo electrónico — GrapesJS encaja mejor, con la interfaz del editor aún escrita en React. Ambos son viables; el modelo de lienzo, no la interfaz, es lo que lo decide.
¿Cuál es mejor para un creador de páginas SaaS?
Normalmente GrapesJS, por una razón de programación más que técnica. Un constructor SaaS llega a clientes que esperan controles de estilo, edición responsiva, un selector de activos y un árbol de capas desde el primer día, y eso ya existe en GrapesJS. Craft.js puede impulsar perfectamente un constructor de SaaS — solo significa construir esa superficie antes de que el primer cliente la vea. Todo lo relacionado con el editor, incluyendo arrendamiento, roles y facturación, es trabajo de tu aplicación en cualquier caso.
¿GrapesJS incluye un editor visual?
Sí. Al instalarlo tienes un editor funcional: un lienzo con arrastrar y soltar, una paleta de bloques, un gestor de estilos visual, un árbol de capas, un gestor de recursos, anchos de dispositivos, un gestor de deshacer y una capa de almacenamiento, todo conectado por cable. Seguirás configurándolo, estilizando los paneles y suministrando tus propios bloques antes de enviarlos a los usuarios, pero estás editando un editor en lugar de ensamblarlo.
¿Craft.js incluye un editor visual completo?
No, y no tiene intención de hacerlo. Su documentación describe la modulación de los bloques de construcción de un editor de páginas en lugar de lanzarlo: obtienes el árbol de nodos, el comportamiento de arrastrar y soltar, historial y serialización, además de un paquete oficial de panel de capas, y construyes la interfaz de edición en React encima. Para un equipo que quiere que la interfaz sea suya, esa es la función.
¿Puede GrapesJS funcionar con React?
Sí. Existe un paquete oficial de envolvimiento React que monta el editor y expone sus paneles como componentes React, así que la interfaz del editor puede formar parte de tu árbol React. La matiz importante es que el propio lienzo renderiza HTML en lugar de tus componentes React: tu sistema de diseño se representa en el editor como componentes, y mantener esa representación sincronizada con la producción es un trabajo que merece la pena planificar.
¿Puede GrapesJS funcionar con Vue y Angular?
Sí, con la misma advertencia que cualquier biblioteca montada en DOM: la inicializas después de que el componente se monta y la destruyes al desmontarla, manteniendo la instancia fuera del sistema de reactividad del framework. No existe un paquete oficial Vue o Angular, así que estos son patrones de integración más que dependencias. Las páginas de Vue y Angular en este sitio repasan el código del ciclo de vida de cada una.
¿Puedo construir un editor de correo electrónico con GrapesJS?
Sí, intercambiando el conjunto de bloques y el destino de exportación. Los preajustes de correo electrónico reemplazan el modelo de componentes canvas por uno que acepta clientes de correo de marcado, incluyendo una ruta MJML. No es automático — aún necesitas un conjunto de bloques seguro para tablas, un paso de exportación y pruebas de cliente — pero el motor elimina el problema del lienzo. Craft.js no tiene un camino equivalente, porque su salida es un árbol React en lugar de un marcado.
¿Puedo autoalojar GrapesJS?
Sí. Es una biblioteca de código abierto que instalas desde npm y sirves desde tu propia aplicación; no hay cuenta, ni servicio alojado ni teléfono para casa. Lo mismo ocurre con Craft.js. El autoalojamiento es uno de los ejes en los que estos dos frameworks no difieren, lo cual vale la pena decirlo claramente en una página de comparación.
¿Puedo conectar GrapesJS a mi propia base de datos?
Sí. El Storage Manager expone las llamadas de carga y almacenamiento, así que tú decides el punto final, la forma de la carga útil y el transporte — REST, GraphQL o cualquier otra cosa que tu aplicación ya transmita. Los datos del proyecto son JSON, así que pueden estar en PostgreSQL, MySQL, MongoDB o en un CMS sin cabeza. Craft.js serializa su árbol de nodos de la misma manera y deja el transporte completamente en tus manos.
¿Puedo crear un editor de marca blanca?
Sí, y los dos frameworks llegan desde direcciones opuestas. Con Craft.js la superficie es tuya por defecto porque la escribiste tú. Con GrapesJS reemplazas la interfaz que ofrece: rediseñas los paneles, renombras bloques y sectores, traduces la interfaz y ocultas lo que tus usuarios no necesitan. La marca a nivel de capacidad — conjuntos de bloques por inquilino, regiones bloqueadas, pasos de aprobación — es trabajo de aplicación en ambos lados.
¿Puedo crear componentes personalizados?
Sí, en ambos, y esto es lo más cercano que están entre sí. En Craft.js, un componente personalizado es un componente React anotado con ajustes del editor. En GrapesJS, un componente personalizado es un tipo registrado con el modelo del componente más un bloque que lo coloca. Ambos permiten limitar lo que los usuarios pueden cambiar; la diferencia está en si lo que aparece en el lienzo es un elemento React o un elemento DOM que gestiona el editor.
¿GrapesJS proporciona un CMS?
No. Proporciona la superficie de edición y te entrega los datos serializados del proyecto. Los modelos de contenido, el flujo de trabajo, la digitalización, la planificación, los roles y la entrega son trabajo de tu aplicación o de tu CMS. Si ya ejecutas un CMS sin interfaz gráfica, el editor puede estar encima de él como capa de edición — es una configuración común, pero es una integración que construyes tú y no una función que habilites. Lo mismo ocurre con Craft.js.
¿GrapesJS ofrece alojamiento?
No. Ninguno de los dos frameworks aloja nada. No hay infraestructura de proveedores en ninguna de las arquitecturas: el editor se ejecuta en tu página, los datos van a tu API, y publicar significa lo que tu aplicación decida que significa. Si quieres una plataforma de contenido visual alojada en lugar de un framework, eso es una categoría de producto diferente y una comparación distinta.
¿Cuánto cuesta construir un editor basado en GrapesJS?
El framework no cuesta nada — es de código abierto, sin cuota de licencia ni precio por puesto, y lo mismo ocurre con Craft.js. El verdadero coste es la ingeniería: traducir tu sistema de diseño en bloques y componentes, cablear el almacenamiento, personalizar paneles y construir las funciones de la aplicación alrededor del editor. Esta página deliberadamente no cita una hora ni una cifra de dinero, porque depende totalmente de tu equipo y de tu definición de hecho. Los plugins de mercado reducen partes específicas de ese trabajo y se valoran por producto.
Siguiente paso
Construye el editor visual que tu producto necesita
Craft.js ofrece a los equipos de React una base flexible para construir editores personalizados. GrapesJS ofrece a los equipos una base más amplia de editores visuales que puede integrarse, personalizarse y ampliarse para aplicaciones de producción.
Explora los plugins GJS.Market
Presets, bibliotecas de bloques, adaptadores de almacenamiento y componentes de correo electrónico — las piezas que la mayoría de los equipos escribirían primero.
Explorar pluginsHabla con un experto en GrapesJS
Sistemas de diseño convertidos en bloques, almacenamiento cableado a tu API, paneles reconstruidos para adaptarse a tu producto.
Habla con un expertoElige la base del editor que se ajuste a tu arquitectura — y luego construye el producto alrededor de ella.
Sustitución de Craft.js en un producto existenteMontar el editor en una aplicación ReactDiseñando un creador de páginas para equipos ReactEl mismo motor dentro de una aplicación VueCiclo de vida del editor en una app AngularRenderizado del servidor y el editor en Next.jsPoner el editor dentro de tu panel de controlEmpaquetar un constructor como un producto comercialFlujos de trabajo de branding, arrendamiento y aprobaciónAutoría de correo electrónico en este motorCómo funcionan los creadores de correos electrónicos de arrastrar y soltarEl panorama de los constructores de páginas de código abiertoAyuda con la implementación y migración