PageKit: el creador de sitios GrapesJS autoalojado, con el código fuente incluido. Obtener acceso anticipado
Compara GrapesJS y TinyMCE para edición de texto enriquecido, creación visual de páginas, control HTML/CSS, extensibilidad, integraciones CMS y aplicaciones SaaS.TinyMCE se centra en la edición de contenido enriquecido. GrapesJS se centra en la edición visual de páginas y maquetación.
Se encarga de lo que ocurre dentro de un bloque de texto: formato, estructura, medios y la experiencia de escritura a su alrededor.
Se encarga de la página en sí: el árbol de componentes, la maquetación, los estilos, los breakpoints y las piezas reutilizables.
Ambos son editores de JavaScript maduros y bien mantenidos, y ambos se utilizan ampliamente en producción. No son el mismo tipo de herramienta, así que la pregunta útil no es cuál es mejor, sino qué capa de tu producto necesita un editor.
¿Necesitas ambos? Usa GrapesJS para la composición visual de páginas y TinyMCE para la edición avanzada de texto enriquecido — TinyMCE puede integrarse en GrapesJS como capa de edición de texto enriquecido.
La forma más clara de distinguirlos es preguntar qué objeto ha seleccionado el usuario cuando empieza a editar.
TinyMCE se centra en texto enriquecido y creación de contenido. Un usuario abre un campo, escribe, formatea, inserta una imagen o una tabla y guarda. El documento es un flujo de contenido, y el trabajo del editor es hacer que escribir y formatear ese contenido resulte sencillo.
GrapesJS se centra en la composición visual de la página. Un usuario arrastra una sección a un lienzo, anida componentes dentro de él, los restyliza, comprueba un punto de interrupción móvil y guarda un proyecto. El documento es un árbol de componentes, y el trabajo del editor es hacer que componer y estilizar ese árbol se sienta directo.
Un flujo de contenido. El orden importa; el anidamiento en su mayoría no.
Una composición. El anidamiento es la estructura, y llega tan profundo como el diseño requiera.
TinyMCE edita el contenido. GrapesJS edita la página.
Responde a esta con honestidad y el resto de la página es sobre todo confirmación.
“Escribe y formatea este contenido.”
Tus usuarios abren un campo, una publicación o un documento y producen texto. El diseño se fija con tus plantillas; lo que varía es lo que dicen las palabras y cómo están formateadas.
Alcance para
TinyMCE
“Crea y personaliza esta página.”
Tus usuarios ensamblan la página misma — secciones, columnas, espaciados, colores, puntos de interrupción — y esperan ver el resultado mientras trabajan.
Alcance para
GrapesJS
“Crea esta página y edita el contenido que contiene.”
Tus usuarios componen el diseño y luego escriben dentro, y ninguna de las dos puede parecer una idea secundaria. Este es el caso para el que existe la combinación.
Alcance para
GrapesJS + TinyMCE
Ambas son librerías que integras en una aplicación que ya posees. Ninguna dicta tu backend, tu autenticación, tus permisos o tu alojamiento — la diferencia está en qué banda de la pila ocupa cada una.
TinyMCE es el encargado de la superficie de edición. Lo que guardes, dónde lo guardas y cómo lo renderizas son decisiones de tu aplicación en este lado.
Módulos principales
GrapesJS es el propietario de la superficie de edición y de los módulos de lienzo que hay detrás. El almacenamiento, la publicación y el alojamiento siguen siendo decisiones de tu aplicación en este lado también.
Ambos pueden integrarse en aplicaciones existentes, pero sus responsabilidades principales son diferentes. Ninguno de los dos productos decide tu arquitectura por debajo de la línea de traspaso.
Sin puntuaciones ni columna de ganador. Cada celda nombra el mecanismo, así que puedes discrepar de una fila y seguir usando la tabla.
| Capacidad | TinyMCE | GrapesJS | Nota |
|---|---|---|---|
| La capa de contenido | |||
| Edición en texto enriquecido | Enfoque principal | Incorporado | GrapesJS incluye un editor de texto enriquecido y te permite reemplazarlo; TinyMCE es una de las cosas con las que la gente lo reemplaza. |
| Formato de texto | Incorporado | Incorporado | Negrita, cursiva, subrayado y tachado están en la barra de herramientas predeterminada de GrapesJS. |
| Encabezados | Incorporado | Incorporado | En GrapesJS, un encabezado es un componente con una etiqueta, no un desplegable de la barra de herramientas. |
| Listas | Incorporado | Extensión | No en la barra de herramientas predeterminada de GrapesJS; los plugins de extensión RTE los añaden. |
| Tablas | Incorporado | Extensión | TinyMCE incluye un plugin de tablas; del lado de GrapesJS, las tablas vienen de un plugin de componentes. |
| Enlaces | Incorporado | Incorporado | Ambos gestionan los enlaces directamente — GrapesJS también tiene un tipo de componente de enlace. |
| Imágenes y medios | Incorporado | Incorporado | TinyMCE inserta medios en el contenido; GrapesJS gestiona los recursos de toda la página. |
| Redacción de contenido | Enfoque principal | No es el foco | GrapesJS puede contener textos largos, pero los flujos de trabajo de escritura no son lo que optimiza. |
| Flujos de trabajo avanzados de texto enriquecido | Extensión | A medida | La línea premium de plugins de TinyMCE cubre casi todo esto; en GrapesJS integrarías un editor que lo hace. |
| Comentarios | Extensión | A medida | Un plugin premium TinyMCE. En GrapesJS esto es trabajo a nivel de aplicación. |
| Menciones | Extensión | A medida | Un plugin premium TinyMCE. En GrapesJS esto es trabajo a nivel de aplicación. |
| Colaboración en tiempo real | Extensión | A medida | TinyMCE ofrece colaboración en tiempo real como una capacidad premium; GrapesJS no tiene equivalente en núcleo. |
| La capa de página | |||
| Lienzo visual | No es el foco | Enfoque principal | TinyMCE edita dentro de un campo o de un elemento en línea, no en un lienzo de página. |
| Diseño de arrastrar y soltar | No es el foco | Incorporado | TinyMCE puede arrastrar contenido dentro de un documento; diseñar una página es otra tarea. |
| Composición de páginas | A medida | Enfoque principal | Montar una página a partir de secciones es justo para lo que sirve GrapesJS. |
| Edición visual HTML/CSS | A medida | Incorporado | GrapesJS edita las reglas de CSS visualmente a través del Style Manager; TinyMCE tiene una vista fuente, no un editor de estilos. |
| Edición visual responsiva | A medida | Incorporado | El Device Manager de GrapesJS cambia el ancho de lienzo y escribe consultas multimedia. |
| Piezas reutilizables | Extensión | Incorporado | TinyMCE tiene plantillas de contenido; GrapesJS tiene bloques y símbolos reutilizables en todas las páginas. |
| Anidamiento Component | No es el foco | Incorporado | Los componentes de GrapesJS se anidan sin límite y cada nivel es seleccionable. |
| Style Manager | A medida | Incorporado | Un módulo central GrapesJS con sectores, propiedades y reglas por selector. |
| Gestión de activos | Integración | Incorporado | TinyMCE entrega las subidas a un handler que proporciones; GrapesJS tiene un módulo Asset Manager. |
| Proyectos de varias páginas | A medida | Incorporado | La Pages API de GrapesJS mantiene varias páginas en un mismo proyecto. |
| Formas de producto | |||
| Almacenamiento de proyectos | Tu aplicación | Incorporado | GrapesJS tiene un Storage Manager con adaptadores locales y remotos; TinyMCE deja la persistencia completamente a ti. |
| Flujo de trabajo de publicación | Tu aplicación | Integración | Ninguna publica para ti. GrapesJS exporta HTML y CSS que entregas a tu pipeline. |
| Creador de páginas SaaS | A medida | Encaja bien | Construir un producto de creación de páginas en TinyMCE significa construir tú mismo la capa de página. |
| Editor embebible | Encaja bien | Encaja bien | Ambos se incrustan en una aplicación anfitriona; la diferencia está en lo que se incrusta. |
| Editor visual de marca blanca | A medida | Encaja bien | Los paneles, estilos y comandos de GrapesJS son todos reemplazables, que es lo que necesita el white-labeling. |
| Andén | |||
| Integración de CMS | Integración | Integración | Ambos se integran con los CMS — en diferentes capas del mismo CMS. |
| Tipos TypeScript | Incorporado | Incorporado | Ambos tienen sus propias definiciones de tipo. |
| Extensibilidad | Incorporado | Incorporado | Ambos tienen APIs de plugins documentadas y grandes ecosistemas de plugins. |
| Autoalojamiento | Incorporado | Incorporado | Ambos pueden ser autoalojados; TinyMCE también ofrece una opción de entrega en la nube. |
Cómo leer las celdas
Lee del registro de npm y los paquetes enviados en 2026-09-03.
| Paquete | Versión | Licencia | Tipos |
|---|---|---|---|
| tinymce | 8.9.0 | GPL-2.0-or-later or commercial | tinymce.d.ts |
| grapesjs | 0.23.6 | BSD-3-Clause | dist/index.d.ts |
El paquete de TinyMCE apunta a su propio archivo de licencia, que ofrece la GNU GPL o los términos comerciales de Tiny. El TinyMCE autoalojado te pide que declares cuál estás usando en la configuración del editor. Bajo los términos de código abierto pasas license_key: 'gpl' en la configuración del editor para aceptarlos.
Si la mayoría de estos puntos describen tu producto, TinyMCE es la herramienta adecuada y añadir un creador de páginas no lo mejorará.
Una página de destino que te vende la herramienta equivocada vale menos que una que te dice cuándo dejar de leer. Si la lista anterior es tu producto, TinyMCE es una respuesta fuerte y bien fundamentada.
Documentación de TinyMCESi la mayoría de estos describen tu producto, el problema de diseño es el que realmente tienes.
GrapesJS y TinyMCE pueden complementarse en lugar de competir por el mismo rol. GrapesJS se encarga de la página; TinyMCE toma el control en el momento en que un usuario empieza a editar el texto dentro de uno de sus componentes.
Edición visual de página
Lienzo, componentes, bloques, estilos, puntos de interrupción, recursos y datos de proyectos.
Edición de texto enriquecido
Formato, listas, tablas, enlaces y la experiencia de escritura dentro de un componente.
Usa GrapesJS para la página. Usa TinyMCE para el texto.
Esta es una configuración real, no un diagrama: GrapesJS expone su capa de texto enriquecido como un módulo reemplazable, y una integración intercambia TinyMCE detrás de ella. Además, son más piezas móviles que ejecutar un solo editor — dos librerías, dos rutas de actualización y la licencia propia de TinyMCE para elegir. Merece la pena cuando tus usuarios realmente hacen ambos trabajos; no merece la pena cuando solo hacen uno.
Edición profesional de texto enriquecido, directamente dentro del lienzo GrapesJS.
TinyMCE 8 × GrapesJS
No construyas la integración de TinyMCE desde cero. Este plugin sustituye el editor de texto enriquecido integrado GrapesJS por TinyMCE 8, con barras de herramientas separadas para elementos de bloque e inline y una barra de herramientas que funciona correctamente dentro de un lienzo iframe.
Características principales
Opciones que realmente usarás
por DevFuture Development
Lo que incluye
TinyMCE está licenciado por separado por Tiny bajo la GNU GPL o sus términos comerciales — este plugin es la integración GrapesJS, no una licencia TinyMCE.
Esta es una instancia real de GrapesJS ejecutándose en esta página. Arrastra un bloque, haz clic en un elemento para darle estilo, luego haz doble clic en cualquier texto y editarlo — el panel bajo el lienzo te indica exactamente qué capa de texto enriquecido estás usando.
La mayoría de los CMS necesitan ambas capas eventualmente. Cuál construyas primero depende de lo que se quejen tus editores.
CMS con enfoque en el contenido
CMS visual
¿Qué están editando exactamente tus clientes?
Para un producto SaaS, la cuestión no es qué prefiere tu equipo, sino qué verán tus clientes al abrir el editor.
TinyMCE puede ser altamente personalizado, pero no está diseñado principalmente como un marco visual completo para la construcción de páginas.
No es que TinyMCE no pueda ampliarse — su plugin API es exhaustivo y la gente ha construido cosas notables sobre él. Lo importante es que lo que necesita un creador de páginas no es lo que proporciona un editor de texto rico, así que tú los estarías construyendo.
Qué está editando el usuario
Lo que un creador de páginas necesita además
Si solo necesitas uno o dos de esos, extender TinyMCE puede ser la tarea más pequeña. Si necesitas la mayoría, estás escribiendo un constructor de páginas — y eso es lo que GrapesJS ya es.
A veces.
GrapesJS incluye su propio editor de texto enriquecido. Su barra de herramientas predeterminada tiene seis acciones, medidas en 2026-09-03 en la versión 0.23.6, y para titulares, botones, pies de foto y textos promocionales cortos eso es realmente suficiente — por eso la mayoría de los creadores de páginas de GrapesJS nunca añaden nada.
Acciones RTE predeterminadas de GrapesJS
Para aplicaciones que necesitan una experiencia de texto enriquecido más avanzada o especializada — contenido de formato largo, tablas, listas, formato estructurado, flujos de trabajo de revisión — TinyMCE puede integrarse como la capa de texto enriquecido, sin renunciar al lienzo visual.
Añadir TinyMCE a GrapesJSEsta es la sección que decide lo difícil que es una migración, así que merece la pena dos minutos.
editor.getContent()Lo que contiene
<h2>Build faster</h2>
<p>Editable <strong>copy</strong> with a <a href="/pricing">link</a>.</p>
<ul><li>One</li><li>Two</li></ul>Una cadena de marcado. Tu aplicación decide dónde está y cómo se renderiza — TinyMCE devuelve el contenido y se detiene ahí.
editor.getProjectData()Lo que contiene
{
"pages": [
{
"id": "SjtXdsYjpE8EJUpL",
"frames": [
{
"component": {
"type": "wrapper",
"components": [
{ "tagName": "section", "classes": ["hero"], "components": [
{ "tagName": "h2", "type": "text", "components": [
{ "type": "textnode", "content": "Build faster" }
]},
{ "type": "link", "classes": ["btn"],
"attributes": { "href": "#" } }
]}
]
}
}
]
}
],
"styles": [
{ "selectors": ["hero"], "style": { "padding-top": "40px", "…": "…" } }
],
"assets": [],
"symbols": [],
"dataSources": []
}Un proyecto estructurado: páginas, un árbol de componentes, reglas de estilo claveadas por selector, assets y configuración. HTML y CSS se generan a partir de él, no se almacenan como tal.
Los dos modelos cumplen propósitos diferentes y no deben tratarse como formatos intercambiables. No existe ningún convertidor que convierta una cadena de contenido en un árbol de componentes, porque el árbol transporta decisiones que la cadena nunca registró.
La dificultad de esto depende casi por completo de lo que TinyMCE esté haciendo actualmente en tu producto. Empieza por averiguarlo.
Audita lo que TinyMCE hace realmente hoy en día
Haz una lista de todos los lugares donde aparece el editor, todos los plugins activados y cada pieza de HTML personalizada de la que depende tu contenido.
Separar contenido del diseño
Parte de lo que escriben tus usuarios es contenido. Parte es diseño que se vieron obligados a expresar como contenido. Solo el segundo tipo necesita un nuevo hogar.
Decide qué capas vas a mover
Mover la capa de página a GrapesJS no requiere mover la capa de contenido fuera de TinyMCE. Decídelo antes de escribir código.
Modela tus tipos de contenido como componentes
Cada forma repetida en tu contenido existente se convierte en un tipo de componente GrapesJS con su propio traits.
Construye la paleta de bloques
El núcleo GrapesJS no incluye bloques. Lo que tus usuarios deberían poder arrastrar, tú defines — o instalas.
Mapea tu estilo
Decide qué expone el Style Manager y qué permanece bloqueado en tu sistema de diseño, luego conecta tu framework CSS.
Elige la capa de texto enriquecido
Mantén el GrapesJS RTE integrado si tu texto es corto. Integra TinyMCE si tus usuarios necesitan el editor que ya conocen.
Mover el contenido
El marcado existente puede importarse a un lienzo GrapesJS, pero mapearlo en los tipos de componentes es un trabajo deliberado, no un script.
Verifica la salida
Compara las páginas publicadas con las originales a través de los puntos de interrupción antes de cambiar a nadie.
Si tu uso de TinyMCE está cerca del stock, la mayor parte del trabajo es modelado más que conversión.
Cada uno de estos representa comportamientos que viven fuera de la cadena de contenido y que deben ser reconstruidos o mantenidos.
Una migración de TinyMCE → GrapesJS puede ser una migración arquitectónica de la edición de contenido a la edición visual de páginas, en lugar de un simple reemplazo de editor. Pilávalo como lo primero y la segunda mitad no te sorprenderá.
Tres resultados, y solo uno de ellos implica eliminar algo.
Contenido
Cuando la edición en texto enriquecido es el requisito principal y tus plantillas ya gestionan el diseño. Nada en esta página defiende cambiar una configuración que encaje.
Maquetación
Cuando los usuarios empiezan a pedir una composición de página que tus plantillas no pueden expresar. GrapesJS va junto a TinyMCE, en otra pantalla.
Creador de contenido visual
Cuando los usuarios necesitan la construcción visual de páginas y la edición avanzada de texto enriquecido en el mismo lugar. TinyMCE se convierte en la capa de texto enriquecido dentro del lienzo de GrapesJS.
Encuentra la fila más cercana a lo que estás construyendo.
| Caso de uso | Punto de partida recomendado |
|---|---|
| Editor del blog | TinyMCE |
| Editor del artículo | TinyMCE |
| Editor de documentación | TinyMCE |
| Campo de texto rico CMS | TinyMCE |
| Redacción de contenido | TinyMCE |
| Creador de páginas de aterrizaje | GrapesJS — leer más |
| Creador de sitios web | GrapesJS — leer más |
| Creador de páginas SaaS | GrapesJS — leer más |
| Editor visual HTML/CSS | GrapesJS — leer más |
| Creador de páginas embebible | GrapesJS — leer más |
| Editor visual de marca blanca | GrapesJS — leer más |
| Visual CMS | GrapesJS — leer más |
| Texto enriquecido dentro de un constructor de páginas | GrapesJS + TinyMCE — leer más |
Estas recomendaciones describen casos de uso principales, no limitaciones técnicas estrictas. Muchos productos van a contracorriente de esta tabla por buenas razones.
Texto
El contenido es el producto. El diseño viene de tus plantillas.
Documentación TinyMCEPáginas
El diseño es el producto. Los usuarios lo componen, lo estilizan y lo previsualizan.
Prueba el editorAmbos
Los usuarios componen páginas y escriben en ellas, y ninguna de las dos cosas puede parecer secundaria.
Ver la integraciónGrapesJS se renderiza en un elemento DOM y edita un lienzo iframe, por lo que se inserta en una aplicación construida con cualquiera de estos. No comparte sus modelos de componentes — un componente GrapesJS es el objeto modelo propio del editor, no un componente React o Vue — y las guías siguientes cubren el cableado que implica esa diferencia.
Ambos editores son extensibles y ambos tienen ecosistemas reales. Se extienden en direcciones diferentes, lo cual es la misma distinción desde el asiento de un desarrollador.
Plugins listos para usar para requisitos comunes de GrapesJS. Cada anuncio aquí es un producto real en este mercado.
TinyMCE no es el único editor que puedes poner detrás de la capa de texto enriquecido GrapesJS. Si tu equipo ya estandarizó otra cosa, probablemente sea aquí.
Ver la categoríaIntroduce CKEditor 5 como capa de texto enriquecido en línea.
Cambia Froala como capa de texto enriquecido en línea.
Sustituye la barra de herramientas integrada por Quill.
Añade acciones a la barra de herramientas integrada sin reemplazarla.
Tipos de componentes editables con sus propios paneles de configuración — las piezas que los usuarios configuran en lugar de restylear.
Ver la categoríaEl núcleo GrapesJS no incluye bloques en absoluto. Estas son las paletas con las que la gente parte en lugar de escribir una.
Ver la categoríaLa paleta de bloques iniciales con la que empiezan la mayoría de los proyectos.
Bloques que emiten clases de utilidad de Tailwind.
Marcado Bootstrap 5 como bloques arrastrables.
Bloques en forma de documento para maquetaciones de formato largo.
A dónde van los datos del proyecto cuando el usuario pulsa guardar, y cuántas páginas permanecen en un mismo proyecto.
Ver la categoríaGuarda los datos del proyecto en Directus.
Guarda los datos del proyecto en Firebase.
Mantiene los datos del proyecto en el navegador.
Añade una interfaz multipágina sobre la Pages API.
Más integraciones de texto enriquecido
Explorar por categoría
Catálogo comprobado en 2026-09-03.
Un creador de páginas que tus clientes usan dentro de tu producto.
Leer másUn editor que se inserta en una aplicación que ya envías.
Leer másPáginas de marketing que tu equipo edita sin necesidad de despliegue.
Leer másTu marca, tus paneles, tus órdenes.
Leer másUna capa de edición visual sobre el CMS que ya tienes ejecutado.
Leer másPlantillas de correo responsivo del mismo lienzo.
Leer másConstruir un editor de producción suele requerir más que instalar un paquete. Pide ayuda con la arquitectura GrapesJS, plugins personalizados, migraciones, integraciones y personalización de editores.
El alcance, el calendario y el precio se acuerdan por proyecto después de haber visto lo que ya tienes — aquí no hay un paquete fijo ni una estimación previa a esa conversación.
TinyMCE es una opción sólida cuando tu producto gira en torno a texto enriquecido y creación de contenido. GrapesJS es una opción sólida cuando tus usuarios necesitan construir visualmente páginas, diseños y componentes. Y cuando tu producto necesite ambos, combina GrapesJS con TinyMCE para crear un editor visual con una experiencia potente de texto enriquecido.
Un editor real está corriendo más arriba en esta página. Arrastra algo y comprueba si el modelo encaja con tu producto.
Abre el editorLa integración ya hecha con TinyMCE 8 — barras de herramientas de bloques e inline, soporte para Studio, código fuente incluido.
Consigue el pluginBlocks, componentes, adaptadores de almacenamiento e integraciones de texto enriquecido para las capas que preferirías no construir.
Explorar pluginsArquitectura, plugins personalizados, migraciones y white-labelling, se ajustan a lo que ya tienes.
Inicia una conversaciónSea cual sea la dirección que te haya indicado esta página, el resultado útil es el mismo: ahora sabes a qué capa de tu producto pertenece el editor y puedes dejar de comparar herramientas que nunca resolvieron el mismo problema.
Se encarga de lo que ocurre dentro de un bloque de texto: formato, estructura, medios y la experiencia de escritura a su alrededor.
Se encarga de la página en sí: el árbol de componentes, la maquetación, los estilos, los breakpoints y las piezas reutilizables.
GrapesJS compone la página; TinyMCE toma el control en el momento en que un usuario comienza a editar el texto dentro de uno de sus componentes.
-thumbnail.jpg&w=3840&q=70)