Crea tu propio constructor de páginas de código abierto

Un editor visual de páginas cuyo código fuente se publica bajo una licencia de código abierto, para que puedas leerlo, ejecutarlo en tu propia infraestructura, modificarlo y construir un producto encima. Puede ser una biblioteca que incrustes en tu aplicación, o una aplicación completa de creación de sitios web que despliegues — son cosas muy diferentes que comparten la misma etiqueta.

No hay un mejor — hay uno mejor para tus necesidades. Si vas a integrar un editor en tu propia aplicación y quieres salida HTML/CSS, GrapesJS encaja. Si las páginas son árboles de tus componentes React, un editor React primero encaja mejor. Si quieres una aplicación terminada para crear sitios web en lugar de una base, un creador web desplegable será más rápido. Responde primero "¿biblioteca o aplicación?" elimina más opciones que cualquier comparación de funcionalidades.

Sí. El paquete core GrapesJS se publica bajo la licencia BSD-3-Clause, y el envoltorio oficial de @grapesjs/react bajo MIT. Ambas son licencias permisivas. Ten en cuenta que el núcleo GrapesJS no es MIT, a pesar de lo que dicen muchos artículos comparativos.

Sí. GrapesJS es una biblioteca JavaScript del lado del cliente que instalas desde npm y combinas con tu aplicación. No hay servicio que llamar ni cuenta que crear, así que se ejecuta donde esté tu frontend.

Sí, y es uno de los usos más comunes. BSD-3-Clause es una licencia permisiva que permite el uso comercial y propietario siempre que mantengas el aviso de derechos de autor y el texto de la licencia en tu distribución. Revisa la licencia de cada proyecto individualmente antes de comprometerte — algunos creadores de páginas de código abierto usan AGPL-3.0, que conlleva obligaciones que importan específicamente para productos alojados.

Sí. Los paneles, botones, sectores de estilo y la shell circundante son configurables, y varios editores publicados reemplazan completamente el diseño por defecto mientras ejecutan el mismo núcleo. Si quieres que el editor se parezca a tu producto en lugar de a GrapesJS, ese es un resultado soportado, no un hack.

Sí. GrapesJS tiene una API de almacenamiento donde registras un adaptador con funciones de carga y almacenamiento. Lo que ocurre dentro de ellas — qué endpoint, qué autenticación, qué esquema — es totalmente tuyo, así que los datos del proyecto van a tu propia base de datos en lugar de a la de nadie más.

Sí. El wrapper oficial de @grapesjs/react monta el editor como un componente React, así que está dentro de tu árbol de componentes con tu estado y enrutamiento alrededor de él. El núcleo del editor en sí sigue siendo agnóstico respecto al framework: el wrapper es una capa de integración, no una reescritura.

Sí, con una salvedad que merece la pena dejar claro. La edición multipágina es un módulo central, así que la parte de edición está cubierta. Todo lo que la convierte en un creador de sitios web en lugar de un editor de páginas — enrutamiento, dominios, alojamiento, despliegues, cuentas de usuario — es código de aplicación que escribes tú. GrapesJS te da el editor, no la plataforma.

Sí, usando plugins. La salida de correo no está en el paquete base: MJML y los presets del boletín añaden los bloques específicos de correo y la cadena de salida que sobrevive a los clientes de correo reales. Es una capacidad real, usada en producción, pero está instalada, no es algo que se obtenga por defecto.

El paquete base es BSD-3-Clause y el envoltorio React es MIT, y ambos permiten el uso comercial, incluso en productos de código cerrado, siempre que se conserven los avisos de derechos de autor y licencia. Esto es un resumen del texto de la licencia, no asesoramiento legal — lee el archivo LICENSE en el repositorio y pregunta a tu propio asesor si la respuesta es relevante para un contrato.

Se sitúan en categorías diferentes. GrapesJS es una biblioteca BSD-3-Clause que instalas e incrustas dentro de tu propia aplicación, donde suministras la interfaz, el backend y la publicación. Webstudio es un constructor visual de sitios web AGPL-3.0 — una aplicación independiente, con una oferta alojada. Las licencias también difieren en un aspecto que importa para productos alojados: AGPL-3.0 conlleva obligaciones de disponibilidad de código fuente que BSD-3-Clause no tiene.

Modelo de datos y framework. Puck es un editor React con licencia MIT: una página es un árbol JSON de tus componentes React, renderizado por React. GrapesJS es independiente del framework y funciona con salida HTML y CSS, lo que se adapta a productos que sirven o exportan marcado. Si tus páginas son componentes React, Puck se mapea a ellas de forma más directa; si son páginas web, GrapesJS lo hace.

Quién lleva el trabajo. Con el código abierto obtienes el código fuente, el autoalojamiento, tu propia ubicación de datos y un control profundo de la interfaz — y te encargas del alojamiento, las actualizaciones y el mantenimiento. Con un constructor alojado, el proveedor lleva todo eso, y aceptas sus precios, hoja de ruta y límites de personalización. Ninguno es universalmente mejor; depende de si operar el editor es un coste que quieres.

No. GrapesJS es totalmente utilizable sin comprar nada, y muchos editores de producción están construidos completamente sobre el núcleo más el código que escribió el equipo. Los plugins merecen la pena cuando una funcionalidad no es el diferenciador de tu producto — un preajuste de email, un conjunto de bloques, un adaptador de almacenamiento — y no merecen la pena cuando lo es.

Sí, y es la forma normal de usar el editor. Registras un tipo de componente que define el marcado y los rasgos que los usuarios pueden editar, luego registras un bloque que lo hace arrastrable desde el panel. Son dos registros separados, lo cual merece la pena saberlo antes de preguntarte por qué tu nuevo componente no está en el panel.