É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 changements plus importants.
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
Section intitulée « Comment ça fonctionne »- Passe en mode Visual dans la barre d’outils (aux côtés de Preview, Code et Dashboard)
- Survole les éléments dans l’aperçu — ils se mettent en évidence avec une superposition
- Clique sur un élément pour le sélectionner
- Modifie les propriétés dans le panneau latéral : texte, couleurs, espacement, polices, bordures, images, effets
Les modifications sont appliquées instantanément à l’aperçu et écrites dans tes fichiers sources. Utilise le bouton Reset last edit dans le panneau latéral pour annuler la dernière modification de propriété.
Que puis-je modifier ?
Section intitulée « 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 — left, center, right, justify
- 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 textuel)
- 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
Section intitulée « 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
Section intitulée « Palette de la page »L’Éditeur Visuel inspecte ta page et expose toutes les couleurs Tailwind et propriétés CSS personnalisées 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 les codes hexadécimaux.
Interroger l’IA sur un élément sélectionné
Section intitulée « Interroger l’IA sur un élément sélectionné »Pour les ajustements que l’éditeur de propriétés ne peut pas exprimer, tape une courte instruction dans le champ Ask AI en bas du panneau latéral. L’élément sélectionné est transmis comme contexte, donc des instructions comme « rends cette carte plus compacte » ou « ajoute un état de survol avec un léger effet de soulèvement » fonctionnent sans que tu aies à décrire quel élément tu vises.
Éléments statiques vs dynamiques
Section intitulée « Éléments statiques vs dynamiques »L’Éditeur Visuel fonctionne mieux sur les éléments statiques dont le className et le contenu textuel 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 ?
Section intitulé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 changements plus importants (nouvelles sections, restructuration de la mise en page, nouvelles fonctionnalités), utilise plutôt le chat IA.
Comment enregistrer les modifications ?
Section intitulée « Comment enregistrer les modifications ? »Les modifications sont enregistrées automatiquement lorsque tu modifies une propriété. Le fichier est écrit dans ton runtime et validé lors d’un commit effectué par l’IA ou par toi-même.
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.
Quelle est la différence entre l’Éditeur Visuel et l’éditeur de code ?
| Outil | Idéal pour |
|---|---|
| Visual Editor | Modifications rapides de propriétés (texte, couleurs, espacement) en cliquant |
| Code Editor | Édition complète du code source avec VS Code |
| AI Chat | Changements complexes, nouvelles fonctionnalités, débogage |