Éditeur Visuel

Cliquez sur les éléments pour modifier le texte, les couleurs, l’espacement, les polices, et plus encore. Idéal pour les petits ajustements ; utilisez le chat pour les modifications importantes.

L’Éditeur Visuel te permet de modifier l’interface de ton application en cliquant sur les éléments et en modifiant leurs propriétés directement. Passe en mode Visual dans la barre d’outils du builder pour l’activer.

Comment ça fonctionne

1. Passe en mode Visual — c’est un sous-mode de Preview dans la barre d’outils (les deux segments de la barre d’outils sont Preview et Admin)
2. Survole les éléments dans l’aperçu — ils se mettent en surbrillance avec un overlay
3. Clique sur un élément pour le sélectionner
4. Modifie les propriétés dans le panneau latéral : texte, couleurs, espacement, polices, bordures, images, effets

Les modifications sont appliquées instantanément dans l’aperçu et écrites dans tes fichiers sources. Utilise le bouton Reset last edit dans le panneau latéral pour annuler le dernier changement de propriété.

Que puis-je modifier ?

• Texte — Modifie le contenu directement
• Taille de police — xs, sm, base, lg, xl, etc.
• Graisse de police — thin, light, normal, medium, semibold, bold, extrabold
• Famille de police — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
• Style de police — Bascule italique
• Alignement du texte — gauche, centré, droite, justifié
• Couleur du texte — N’importe quelle couleur Tailwind
• Couleur d’arrière-plan — N’importe quelle couleur Tailwind
• Espacement — Padding et margin sur tous les côtés
• Bordure — Largeur, couleur et rayon (disponible sur les éléments conteneurs sans contenu texte)
• Image — Remplace par une recherche de photo de stock ou télécharge ta propre image (s’applique aux éléments img et aux images d’arrière-plan)
• Effets — Ombre et opacité

Annuler / Rétablir

Utilise Cmd+Z (Mac) ou Ctrl+Z (Windows) pour annuler les modifications. Cmd+Shift+Z / Ctrl+Shift+Z pour rétablir.

Palette de la page

L’Éditeur Visuel analyse ta page et expose toutes les couleurs Tailwind et propriétés personnalisées CSS déjà utilisées. Lorsque tu ouvres le sélecteur de couleur pour l’élément sélectionné, tu peux choisir depuis cette palette de la page pour rester cohérent avec ton système de design existant, sans avoir à deviner des codes hexadécimaux.

Interroger l’IA à propos d’un élément sélectionné

Pour les ajustements que l’éditeur de propriétés ne peut pas exprimer, saisis une courte instruction dans le champ Ask AI en bas du panneau latéral. L’élément sélectionné est transmis comme contexte, de sorte que des instructions comme « rends cette carte plus compacte » ou « ajoute un état de survol avec un léger relief » fonctionnent sans que tu aies à décrire quel élément tu vises.

Éléments statiques vs dynamiques

L’Éditeur Visuel fonctionne mieux sur les éléments statiques dont le className et le contenu texte sont des littéraux de chaîne dans le JSX. Pour les éléments dynamiques (classNames calculés, rendu conditionnel, expressions), l’éditeur bascule automatiquement vers le chat IA avec une instruction structurée.

Quand utiliser l’Éditeur Visuel ?

L’Éditeur Visuel est idéal pour les petits ajustements rapides :

• Corriger une faute de frappe
• Ajuster l’espacement
• Changer une couleur
• Mettre à jour le texte d’un bouton

Pour les modifications plus importantes (nouvelles sections, restructurations de mise en page, nouvelles fonctionnalités), utilise plutôt le chat IA.

Comment enregistrer les modifications ?

Les modifications sont enregistrées automatiquement lorsque tu modifies une propriété. Le fichier est écrit dans ton runtime, et le changement est commité dans ton historique de versions lors du prochain tour du builder qui effectue un commit.

FAQ

Puis-je annuler les modifications visuelles ?

Oui. Utilise Cmd+Z / Ctrl+Z pour annuler. L’Éditeur Visuel maintient sa propre pile d’annulation/rétablissement.

Pourquoi puis-je modifier certains éléments mais pas d’autres ?

Les attributs de texte statique et de className peuvent être modifiés directement. Les valeurs dynamiques ou calculées (littéraux de gabarit, expressions ternaires, appels de fonction) basculent automatiquement vers le chat IA.

Quand utiliser l’Éditeur Visuel plutôt que le chat IA ?

Outil	Idéal pour
Visual Editor	Modifications rapides de propriétés (texte, couleurs, espacement) en cliquant
AI Chat	Modifications complexes, nouvelles fonctionnalités, débogage

Ce sont les deux seules façons de modifier ton application — il n’y a pas d’éditeur de code. Consulte Modifier et accéder à ton code.