Visual Editor

​

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 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

​

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. 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.

​

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 de Visual Editor coûtent-elles des crédits IA ?

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.

Puis-je modifier des éléments qui apparaissent à plusieurs endroits ?

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.

Pourquoi ne puis-je pas modifier le texte de certains éléments ?

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.

Comment trouver le code source d'un élément ?

Cliquez sur l’étiquette en haut à gauche d’un élément sélectionné pour accéder à son emplacement dans le code source.