> ## Documentation Index > Fetch the complete documentation index at: https://docs.replit.com/llms.txt > Use this file to discover all available pages before exploring further. # Visual Editor > Apportez des modifications visuelles directes à vos designs et applications — ajustez le texte, les couleurs, la mise en page et les images en cliquant, sans écrire de code. ## Qu'est-ce que Visual Editor ? Visual Editor vous permet d'apporter des modifications concrètes à votre interface en cliquant directement sur les éléments. Il fonctionne à la fois sur le [canvas](/fr/design/canvas) dans Replit Design et dans Preview, afin que vous puissiez modifier les maquettes et les applications en cours d'exécution de la même façon. Les modifications simples — changements de texte, ajustements de couleur, retouches d'espacement — mettent à jour le code source directement sans consommer de crédits IA. Pour les changements qui impliquent une complexité cachée, Visual Editor passe automatiquement le relais à Agent. Concepts clés : * **Modifications déterministes** : les changements simples (texte, couleurs, espacement) s'appliquent directement au code source sans boucle Agent * **Aucun coût en crédits** : les modifications directes ne consomment pas de crédits IA — seuls les changements complexes passent par Agent * **Double contexte** : fonctionne de manière identique sur les frames du canvas et dans Preview * **Synchronisation du code source** : chaque modification met à jour instantanément le code source sous-jacent Visual Editor n'est actuellement disponible que sur les **navigateurs web**. Il n'est pas pris en charge sur Mobile App ou Desktop App. ## Comment utiliser Visual Editor ### Modifier sur le canvas Sélectionnez l'outil **Edit** dans la barre d'outils, puis cliquez sur n'importe quel élément à l'intérieur d'une frame. L'élément reçoit une surbrillance avec une puce le nommant, et le panneau Visual Editor s'ouvre à droite, montrant les propriétés que vous pouvez modifier pour cet élément, comme le contenu, la mise en page, la couleur et la bordure. Ajustez-les, puis sélectionnez **Save edits** pour appliquer ou **Discard** pour les abandonner. Une frame de configurateur de supercar avec l'outil Edit actif et un élément sélectionné, montrant le panneau Visual Editor à droite avec les sections Layout (Outer et Inner space), Color (Text, Background, Opacity) et Border (color, width, radius), ainsi que les boutons Discard et Save edits Les propriétés affichées correspondent à l'élément que vous sélectionnez : les éléments de texte exposent des contrôles de police, les images exposent la source et le téléversement, et les conteneurs exposent des contrôles de mise en page. ### Modifier dans Preview La même expérience de modification fonctionne dans votre application en cours d'exécution. Cliquez sur n'importe quel élément dans Preview pour commencer à modifier. Modifiez le texte en ligne, ajustez les couleurs avec le sélecteur, changez l'espacement avec les contrôles de style, ou remplacez des images. Appuyez sur enregistrer pour mettre à jour le code source. Les modifications simples s'appliquent directement sans consommer de crédits IA. Si la modification implique de la complexité, Visual Editor envoie des métadonnées ciblées à Agent pour obtenir de l'aide. ### Modification du texte Cliquez sur n'importe quel élément de texte et tapez pour le modifier directement. Si le texte est une chaîne dans votre code source, la modification s'applique immédiatement. ### Ajustements de couleur Utilisez le sélecteur de couleurs pour ajuster les couleurs du texte et de l'arrière-plan. Tapez un nom de couleur comme « violet » dans le champ de saisie, ou utilisez la pipette pour choisir une couleur n'importe où sur votre écran. ### Changements de style Ajustez le padding, les marges et la mise en page des éléments à l'aide de contrôles intuitifs. ### Contrôles de mise en page Visual Editor regroupe chaque contrôle en sections claires afin que vous puissiez trouver rapidement celle dont vous avez besoin : **Text**, **Layout**, **Color** et **Border**. (La section **Image** apparaît aussi lorsque vous sélectionnez un élément image.) La section **Layout** est l'endroit où vous ajustez la façon dont les enfants se placent à l'intérieur d'un conteneur sans passer par Agent. Sélectionnez un conteneur flex, développez Layout, et vous obtenez : * **Alignment** : un sélecteur de points 3×3 pour définir où les éléments se placent le long des deux axes à l'intérieur du conteneur. * **Direction** : deux boutons flèches qui empilent les enfants en ligne ou en colonne. * **Gap** : une valeur en pixels pour l'espace entre les éléments. L'icône à côté du champ Gap change pour correspondre à la direction actuelle, afin que vous sachiez toujours si vous ajustez l'espacement horizontal ou vertical. À côté, une icône flèche bascule **Distribute space between items**, qui pousse les enfants vers les bords opposés du conteneur. * **Outer space** : des champs par côté pour l'espace à l'extérieur de l'élément (un champ par côté, avec une bascule de lien pour verrouiller les quatre côtés à la fois). * **Inner space** : des champs pour l'espace à l'intérieur de l'élément le long de chaque axe, avec une bascule de lien pour les deux axes à la fois. La section Layout n'apparaît que lorsqu'au moins un contrôle de mise en page s'applique à l'élément sélectionné. Les nœuds de texte simple sans propriétés d'espacement ou de mise en page masquent entièrement la section, afin que l'éditeur reste compact. ### Mises à jour d'image Sélectionnez des images pour remplacer les URL ou téléverser vos propres fichiers avec des aperçus instantanés. ## Ce que vous pouvez faire * **Corrections de texte rapides** : mettez à jour les textes, les étiquettes et les titres sans ouvrir les fichiers sources * **Exploration des couleurs** : essayez différents schémas de couleurs en cliquant et en ajustant — pas besoin de trouver le bon CSS * **Ajustements de mise en page** : affinez le padding, les marges et l'espacement visuellement plutôt que de deviner les valeurs en pixels * **Remplacement d'images** : remplacez les images de substitution par de vraies ressources en cliquant et en téléversant * **Itération de design** : ajustez rapidement les frames du canvas pour comparer des directions visuelles sans allers-retours avec Agent ## Questions fréquentes Les modifications simples et déterministes — changements de texte, choix de couleurs, ajustements d'espacement — ne consomment pas de crédits IA. Elles mettent à jour le code source directement. Si Visual Editor détecte une complexité cachée, il achemine la modification via Agent, ce qui utilise des crédits. Oui. Sélectionner un élément rendu dans une boucle ou réutilisé dans plusieurs composants met en surbrillance et met à jour toutes les instances à la fois. Les éléments composites constitués de plusieurs sous-éléments ne peuvent pas être modifiés directement dans Visual Editor. Demandez plutôt à Agent dans le chat d'apporter ces modifications. Cliquez sur l'étiquette en haut à gauche d'un élément sélectionné pour accéder à son emplacement dans le code source.