Page Builder

Resumen

El Page Builder es el editor visual de Cmssy para componer páginas a partir de bloques. Cmssy es un CMS headless: construyes los componentes de bloques en tu propia app Next.js (App Router) con @cmssy/react + @cmssy/next y despliegas ese sitio tú mismo. El editor enmarca tu sitio desplegado en un iframe (la Preview URL de tu workspace + ?cmssyEdit=1) y lo controla mediante un puente postMessage — así que arrastras, haces clic y editas sobre el sitio real. Cuando publicas, el contenido se convierte en la versión publicada servida por la API de entrega, que tu sitio renderiza.

Diseño

El editor se divide en cinco zonas:

• Barra superior — título de la página, insignia Draft (para cambios sin publicar), botones Deshacer/Rehacer, selector de idioma y un menú de tres puntos con acciones de página (Publish, Revert, Preview, etc.).
• Barra lateral izquierda — el árbol de páginas de tu workspace. Haz clic en una página para abrirla. Arrastra páginas para reordenarlas. Redimensionable (256-512 px).
• Cajón derecho (Block Library) — catálogo de los bloques que registraste con defineBlock en tu app, agrupados por categoría. El editor aprende el esquema de cada bloque a través del puente del SDK. Arrastra desde aquí al lienzo para añadir.
• Lienzo — tu sitio real desplegado, enmarcado en un iframe. Los bloques se renderizan exactamente igual que en producción. Haz clic en cualquier bloque para seleccionarlo.
• Panel de propiedades — se desliza desde la derecha cuando seleccionas un bloque. Cada campo del esquema del bloque (declarado con fields) aparece aquí (campos de texto, selectores de medios, de enlaces, de colores, etc.).

Añadir un bloque

1. Abre la Block Library a la derecha.
2. Encuentra el bloque que quieres (desplázate o navega por categorías).
3. Arrástralo al lienzo.
4. Suéltalo abajo (se añade al final) o entre bloques existentes (se inserta en esa posición).

Al soltarlo, el bloque aparece con su contenido por defecto (del esquema del bloque) y se renderiza en vivo en tu sitio enmarcado. Haz clic en él para abrir el panel de propiedades y personalizarlo. Ver Bloques y Desarrollo de bloques para saber cómo se definen los bloques.

Aquí solo aparecen los bloques que registraste en tu app — el editor los lee por el puente del SDK, así que el selector siempre coincide con lo que tu sitio puede renderizar.

Editar el contenido de un bloque

Haz clic en cualquier bloque del lienzo para seleccionarlo. El panel de propiedades se abre a la derecha. Los campos se renderizan según el esquema del bloque:

• Texto — campo de texto inline / textarea.
• Texto enriquecido — abre un editor flotante dedicado abajo (negrita, cursiva, listas, enlaces).
• Medios (imagen/vídeo) — el selector de medios abre la biblioteca; elige uno existente o sube uno nuevo.
• Enlace — URL + etiqueta; el selector también sugiere páginas internas.
• Color — selector de color con tokens del tema.
• Select / checkbox / radio — desplegable o conmutadores a partir de la lista de opciones del esquema.
• Repeater — para bloques con listas de subelementos (p. ej. testimonios, ítems de FAQ), añade/quita filas inline.

Cada edición se envía al sitio enmarcado por el puente, así que los cambios aparecen en vivo en el sitio real mientras escribes.

Edición por idioma

El selector de idioma de la barra superior cambia la locale cuyo contenido estás editando. Cambiar de inglés a polaco:

• Guarda los valores actuales de los campos en la copia inglesa.
• Carga la copia polaca en el panel de propiedades y el lienzo.
• Los campos vacíos en polaco muestran el texto de placeholder, no el fallback en inglés.

Cada campo de texto se almacena por idioma. Los números, IDs y ajustes (p. ej. URLs de imágenes) se comparten entre idiomas.

Mover y eliminar bloques

Pasa el cursor sobre un bloque en el lienzo para revelar los controles:

• Asa de arrastre (icono grip) — arrastra arriba/abajo para reordenar.
• Eliminar — haz clic en el icono de papelera O pulsa Delete / Backspace con el bloque seleccionado (y sin ningún campo de texto enfocado).
• Duplicar — atajo de teclado Cmd+D (macOS) / Ctrl+D (Win/Linux).

No aparece ningún diálogo de confirmación — las eliminaciones son inmediatas pero totalmente reversibles con Deshacer.

Deshacer y rehacer

• Cmd+Z / Ctrl+Z — deshacer el último cambio.
• Cmd+Shift+Z / Ctrl+Shift+Z — rehacer.

El historial se guarda por página, hasta 50 pasos. Cambiar a otra página conserva los historiales de ambas de forma independiente. La edición de texto tiene su propio deshacer nativo que no consume el historial de bloques.

Autoguardado del borrador y publicación

Tu borrador es la copia de trabajo del contenido de la página, almacenada en Cmssy. Mientras editas, los cambios se guardan en el borrador — reabre el editor más tarde y continúas donde lo dejaste. El borrador es lo que el sitio enmarcado renderiza en modo vista previa; los visitantes siguen viendo la versión publicada hasta que publiques.

El borrador vive en Cmssy, no en tu navegador, así que te sigue entre dispositivos y navegadores — el último borrador guardado siempre está ahí cuando reabres la página.

Borrador vs publicado

Cada página tiene dos estados de sus bloques:

• Borrador — lo que ves y editas en el builder, y lo que renderiza el modo vista previa. Siempre lo más reciente.
• Publicado — lo que sirve la API de entrega y lo que ven los visitantes en tu sitio desplegado.

La insignia Draft de la barra superior aparece siempre que la página tiene cambios sin publicar (o nunca se ha publicado).

Desde el menú de tres puntos:

• Publish — promociona el borrador actual a publicado. La API de entrega pasa a servirlo; tu sitio Next.js desplegado vuelve a renderizar la página (el ISR se revalida al publicar mediante el webhook /api/revalidate), así que el cambio llega a los visitantes en segundos.
• Unpublish — retira la página de la API de entrega (tu sitio devuelve 404 para ella). El borrador se mantiene.
• Revert to published — descarta todos los cambios del borrador y vuelve a la última versión publicada. Irreversible más allá de la profundidad de deshacer.

Bloques de layout (header / footer / barras laterales)

Los bloques de layout — header, footer, barras laterales — se renderizan en todas las páginas por herencia. En el sitio enmarcado aparecen alrededor del contenido de tu página con sus propios controles superpuestos.

• Haz clic en un bloque de layout para editarlo igual que cualquier bloque de contenido.
• Los cambios en un bloque de layout heredado se propagan a todas las páginas que lo heredan.
• Una página concreta puede sobrescribir un bloque de layout — el cambio aplica solo a esa página.

Todos los detalles: Bloques de layout.

Modo vista previa

Menú de tres puntos → Preview abre tu borrador actual en una pestaña nueva. Carga tu sitio desplegado en modo vista previa (borrador) en una URL firmada, para verificar cómo se ve el contenido sin publicar en el sitio real antes de publicar.

Menú de tres puntos → Open Page abre la URL publicada en tu sitio desplegado (404 si no está publicada).

Modo interacción

Un conmutador en la esquina inferior derecha del lienzo alterna entre dos modos:

• Modo edición (por defecto) — controles superpuestos visibles, los clics seleccionan bloques, los enlaces dentro de los bloques están inertes.
• Modo interacción — superposiciones ocultas, los enlaces y formularios se comportan exactamente como en tu sitio en vivo (es tu sitio en vivo). Úsalo para probar el comportamiento interactivo sin salir del editor.

Editar con IA (MCP)

Más allá del editor visual, Cmssy expone un servidor MCP para que Claude pueda crear páginas, añadir bloques y editar contenido por ti — el mismo contenido que sirve la API de entrega. Ver MCP Server.

Referencia de atajos de teclado

Sustituye Cmd por Ctrl en Windows y Linux. Todos los atajos quedan bloqueados mientras escribes dentro de un campo de texto — así el deshacer nativo del texto, el borrado, etc. siguen funcionando con normalidad.

Lo que el editor no hace (todavía)

• Sin conmutador de vista previa responsive. El lienzo es fluido pero no simula anchos de dispositivo concretos. Usa el botón Preview y redimensiona tu navegador para probar.
• Sin colaboración en tiempo real. Si dos usuarios editan la misma página a la vez, gana el último guardado. Coordinad las ediciones por página o sección.
• Sin historial de versiones más allá de deshacer. Revert to published es el rollback más profundo. Si necesitas versiones con nombre o historial a largo plazo, exporta antes de hacer cambios grandes.