Page Builder

Aperçu

Le Page Builder est l'éditeur visuel de Cmssy pour composer des pages à partir de blocs. Cmssy est un CMS headless : vous construisez les composants de blocs dans votre propre application Next.js (App Router) avec @cmssy/react + @cmssy/next et vous déployez ce site vous-même. L'éditeur encadre votre site déployé dans une iframe (l'URL de Preview de votre workspace + ?cmssyEdit=1) et le pilote via un pont postMessage — vous glissez, cliquez et éditez donc sur le site réel. Quand vous publiez, le contenu devient la version publiée servie par l'API de diffusion, que votre site rend.

Mise en page

L'éditeur est divisé en cinq zones :

• Barre supérieure — titre de la page, badge Draft (pour les changements non publiés), boutons Annuler/Rétablir, sélecteur de langue et un menu à trois points avec les actions de page (Publish, Revert, Preview, etc.).
• Barre latérale gauche — l'arborescence des pages de votre workspace. Cliquez sur une page pour l'ouvrir. Glissez les pages pour les réordonner. Redimensionnable (256-512 px).
• Tiroir droit (Block Library) — catalogue des blocs que vous avez enregistrés avec defineBlock dans votre application, groupés par catégorie. L'éditeur apprend le schéma de chaque bloc via le pont SDK. Glissez d'ici vers le canevas pour ajouter.
• Canevas — votre vrai site déployé, encadré dans une iframe. Les blocs se rendent exactement comme en production. Cliquez sur n'importe quel bloc pour le sélectionner.
• Panneau de propriétés — glisse depuis la droite quand vous sélectionnez un bloc. Chaque champ du schéma du bloc (déclaré avec fields) apparaît ici (champs texte, sélecteurs de médias, de liens, de couleurs, etc.).

Ajouter un bloc

1. Ouvrez la Block Library à droite.
2. Trouvez le bloc voulu (défilez ou parcourez les catégories).
3. Glissez-le sur le canevas.
4. Déposez-le en bas (ajout à la fin) ou entre des blocs existants (insertion à cette position).

Au dépôt, le bloc apparaît avec son contenu par défaut (issu du schéma du bloc) et se rend en direct dans votre site encadré. Cliquez dessus pour ouvrir le panneau de propriétés et le personnaliser. Voir Blocs et Développement de blocs pour la définition des blocs.

Seuls les blocs enregistrés dans votre application apparaissent ici — l'éditeur les lit via le pont SDK, le sélecteur correspond donc toujours à ce que votre site peut rendre.

Éditer le contenu d'un bloc

Cliquez sur n'importe quel bloc du canevas pour le sélectionner. Le panneau de propriétés s'ouvre à droite. Les champs se rendent selon le schéma du bloc :

• Texte — champ texte inline / textarea.
• Texte riche — ouvre un éditeur flottant dédié en bas (gras, italique, listes, liens).
• Médias (image/vidéo) — le sélecteur de médias ouvre la bibliothèque ; choisissez un élément existant ou uploadez-en un nouveau.
• Lien — URL + libellé ; le sélecteur suggère aussi les pages internes.
• Couleur — sélecteur de couleur avec les tokens du thème.
• Select / case à cocher / radio — menu déroulant ou bascules à partir de la liste d'options du schéma.
• Repeater — pour les blocs avec des listes de sous-éléments (p. ex. témoignages, items de FAQ), ajoutez/supprimez des lignes inline.

Chaque modification est envoyée au site encadré via le pont, les changements apparaissent donc en direct dans le site réel pendant que vous tapez.

Édition par langue

Le sélecteur de langue de la barre supérieure bascule la locale dont vous éditez le contenu. Passer de l'anglais au polonais :

• Enregistre les valeurs actuelles des champs dans la copie anglaise.
• Charge la copie polonaise dans le panneau de propriétés et le canevas.
• Les champs vides en polonais affichent le texte de placeholder, pas le repli anglais.

Chaque champ texte est stocké par langue. Les nombres, IDs et réglages (p. ex. URLs d'images) sont partagés entre les langues.

Déplacer et supprimer des blocs

Survolez un bloc sur le canevas pour révéler les contrôles :

• Poignée de glissement (icône grip) — glissez vers le haut/bas pour réordonner.
• Supprimer — cliquez sur l'icône corbeille OU appuyez sur Delete / Backspace quand le bloc est sélectionné (et qu'aucun champ texte n'a le focus).
• Dupliquer — raccourci clavier Cmd+D (macOS) / Ctrl+D (Win/Linux).

Aucune boîte de confirmation n'apparaît — les suppressions sont immédiates mais totalement réversibles via Annuler.

Annuler et rétablir

• Cmd+Z / Ctrl+Z — annuler le dernier changement.
• Cmd+Shift+Z / Ctrl+Shift+Z — rétablir.

L'historique est conservé par page, jusqu'à 50 étapes. Passer à une autre page préserve les historiques des deux pages indépendamment. L'édition de texte a son propre annuler natif qui n'entame pas l'historique des blocs.

Sauvegarde automatique du brouillon et publication

Votre brouillon est la copie de travail du contenu de la page, stockée dans Cmssy. Pendant que vous éditez, les changements sont enregistrés dans le brouillon — rouvrez l'éditeur plus tard et vous reprenez là où vous en étiez. Le brouillon est ce que le site encadré rend en mode aperçu ; les visiteurs continuent de voir la version publiée jusqu'à ce que vous publiiez.

Le brouillon vit dans Cmssy, pas dans votre navigateur : il vous suit donc entre appareils et navigateurs — le dernier brouillon enregistré est toujours là quand vous rouvrez la page.

Brouillon vs publié

Chaque page a deux états de ses blocs :

• Brouillon — ce que vous voyez et éditez dans le builder, et ce que rend le mode aperçu. Toujours le plus récent.
• Publié — ce que sert l'API de diffusion et ce que voient les visiteurs sur votre site déployé.

Le badge Draft dans la barre supérieure apparaît dès que la page a des changements non publiés (ou n'a jamais été publiée).

Depuis le menu à trois points :

• Publish — promeut le brouillon actuel en version publiée. L'API de diffusion la sert désormais ; votre site Next.js déployé re-rend la page (l'ISR se revalide à la publication via le webhook /api/revalidate), le changement atteint donc les visiteurs en quelques secondes.
• Unpublish — retire la page de l'API de diffusion (votre site renvoie 404 pour elle). Le brouillon reste.
• Revert to published — rejette tous les changements du brouillon et revient à la dernière version publiée. Irréversible au-delà de la profondeur d'annulation.

Blocs de layout (header / footer / barres latérales)

Les blocs de layout — header, footer, barres latérales — se rendent sur chaque page par héritage. Dans le site encadré, ils apparaissent autour du contenu de votre page avec leurs propres contrôles en surimpression.

• Cliquez sur un bloc de layout pour l'éditer comme n'importe quel bloc de contenu.
• Les changements d'un bloc de layout hérité se propagent à toutes les pages qui en héritent.
• Une page précise peut surcharger un bloc de layout — le changement ne s'applique qu'à cette page.

Tous les détails : Blocs de layout.

Mode aperçu

Menu à trois points → Preview ouvre votre brouillon actuel dans un nouvel onglet. Cela charge votre site déployé en mode aperçu (brouillon) à une URL signée, pour vérifier l'apparence du contenu non publié sur le vrai site avant de publier.

Menu à trois points → Open Page ouvre l'URL publiée sur votre site déployé (404 si non publiée).

Mode interaction

Une bascule en bas à droite du canevas alterne entre deux modes :

• Mode édition (par défaut) — poignées en surimpression visibles, les clics sélectionnent les blocs, les liens dans les blocs sont inertes.
• Mode interaction — surimpressions masquées, liens et formulaires se comportent exactement comme sur votre site en ligne (c'est votre site en ligne). Utilisez-le pour tester le comportement interactif sans quitter l'éditeur.

Éditer avec l'IA (MCP)

Au-delà de l'éditeur visuel, Cmssy expose un serveur MCP pour que Claude puisse créer des pages, ajouter des blocs et éditer du contenu pour vous — le même contenu que sert l'API de diffusion. Voir MCP Server.

Référence des raccourcis clavier

Remplacez Cmd par Ctrl sous Windows et Linux. Tous les raccourcis sont bloqués pendant que vous tapez dans un champ texte — l'annulation native du texte, la suppression, etc. continuent donc de fonctionner normalement.

Ce que l'éditeur ne fait pas (encore)

• Pas de bascule d'aperçu responsive. Le canevas est fluide mais ne simule pas des largeurs d'appareils spécifiques. Utilisez le bouton Preview et redimensionnez votre navigateur pour tester.
• Pas de collaboration en temps réel. Si deux utilisateurs éditent la même page simultanément, le dernier enregistrement gagne. Coordonnez les éditions par page ou par section.
• Pas d'historique de versions au-delà de l'annulation. Revert to published est le rollback le plus profond. Si vous avez besoin de versions nommées ou d'un historique à long terme, exportez avant les gros changements.