Crea un constructor de páginas React listo para producción con GrapesJS

Un preset de GrapesJS creado con React, el envoltorio oficial de React y shadcn/ui, de modo que la interfaz del editor ya se ve como una aplicación React moderna. Justamente lo que si no tendrías que dedicar meses a diseñar.

Un editor visual no es una funcionalidad: son catorce subsistemas que deben entenderse entre sí, y cada uno esconde casos límite que solo descubrirás cuando haya usuarios reales dentro.

Lo que tendrías que construir desde cero

• Arrastrar y soltar
• Componentes
• Bloques
• Gestor de estilos
• Edición responsive
• Gestor de recursos
• Deshacer y rehacer
• Almacenamiento
• Exportación de HTML y CSS
• Edición de texto enriquecido
• Páginas
• Gestor de dispositivos
• Arquitectura de plugins
• Interfaz del editor

No reconstruyas el editor. Construye tu producto.

No es el único framework de editores, pero sí el que deja más control en tus manos.

No hace falta comprar una plataforma entera para tener un editor visual. El motor es gratis para siempre; solo pagas por las piezas que de otro modo te costarían meses de ingeniería.

El núcleo del editor es el mismo en todos los casos. Lo que cambia es la combinación de plugins que pones encima.

Consigue un editor GrapesJS React funcionando con unas pocas líneas de código.

import GjsEditor from '@grapesjs/react';
import 'grapesjs/dist/css/grapes.min.css';

export default function Builder() {
  return (
    <GjsEditor
      options={{
        height: '100vh',
        storageManager: false,
      }}
    />
  );
}

Ocho plugins a los que los equipos de React recurren primero. Cada tarjeta enlaza con la ficha real, donde están el precio, la compatibilidad, las reseñas y las instrucciones de instalación.

React

React UI for GrapesJS

El envoltorio oficial de React del equipo de GrapesJS. Envoltorios declarativos sobre los módulos del núcleo para que construyas la interfaz del editor con tus propios componentes React.

GratisVer plugin

React

Reactor Preset for GrapesJS

Lleva tu propio sistema de componentes React al lienzo, de modo que lo que tus usuarios arrastran son los componentes que ya tienes en producción.

GratisVer plugin

Preset

GrapesJS Shadcn

Una carcasa de editor completa construida con React y shadcn/ui. Te ahorra los meses que suelen irse en diseñar y montar la interfaz del editor.

999,99 US$Ver plugin

Bloques

Plugin Blocky for Tailwind CSS

Una amplia librería de bloques Tailwind CSS responsive ya hechos, listos para arrastrar al lienzo.

59,00 US$Ver plugin

Almacenamiento

Autosave & Restore — Crash Recovery for GrapesJS

Guardado automático y restauración para el editor, para que una pestaña cerrada o una batería agotada no le cuesten una hora de trabajo a tu usuario.

12,00 US$Ver plugin

Páginas

Grapesjs Project Manager

Gestión de proyectos, plantillas y páginas con gestores de almacenamiento incluidos: la vía más rápida para pasar de editar un documento a manejar proyectos de verdad.

GratisVer plugin

Texto enriquecido

TinyMCE 8 Inline Text Editor

Sustituye el editor de texto enriquecido integrado por TinyMCE, con edición en línea y barras de herramientas separadas para elementos de bloque y en línea.

69,00 US$Ver plugin

IA

Autofill — Dummy Content Filler for GrapesJS

Rellena una maqueta con contenido de ejemplo con un solo comando, para que un lienzo en blanco no bloquee una demo ni una revisión de diseño.

9,00 US$Ver plugin

Tres combinaciones que cubren la mayoría de los productos. Cada una es el núcleo del editor más el puñado de plugins que lo convierten en una herramienta concreta.

Los precios se leen en vivo del marketplace.

La unidad honesta es el tiempo de ingeniería, no una licencia. Abajo tienes lo que cuesta construir cada subsistema frente a instalarlo. Son estimaciones para dimensionar, no un presupuesto.

Solo aparecen datos que podemos documentar. Cuando una afirmación no se ha podido verificar para las cuatro herramientas, la fila se ha omitido en lugar de suponerla.

Verificado el 2026-08-26. Los datos de licencia y frameworks provienen de los metadatos de paquete y la documentación de cada proyecto. Comparativas en detalle: GrapesJS frente a Craft.js · Alternativa al editor Puck · GrapesJS frente a Builder.io

Craft.js y Puck te dan un árbol React con arrastrar y soltar. Todo lo demás que alguien espera de un editor sigue siendo cosa tuya.

Sin logos ni testimonios en esta página: solo las cifras del ecosistema, que puedes comprobar tú mismo.

Las estrellas provienen del repositorio de GrapesJS en GitHub y el número de plugins del catálogo de GJS.Market. Ambos verificados el 2026-08-26.

Usa el núcleo de código abierto de GrapesJS. Añade los plugins que necesites. Construye el editor que tu producto realmente requiere.