Éditeur Visuel

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.

​

Qu’est-ce que l’Éditeur Visuel ?

L’Éditeur Visuel vous permet d’apporter des modifications pratiques à votre interface utilisateur en cliquant directement sur les éléments. Il fonctionne à la fois dans le Canvas de Design et dans l’Aperçu, vous permettant de modifier les maquettes et les applications en cours d’exécution de la même manière. Les modifications simples — changements de texte, ajustements de couleurs, ajustements d’espacement — mettent à jour le code source directement sans consommer de crédits IA. Pour les modifications impliquant une complexité cachée, l’Éditeur Visuel délègue automatiquement à Agent. Concepts clés :

• Modifications déterministes : Les modifications simples (texte, couleurs, espacement) s’appliquent directement au code source sans boucle Agent
• Aucun coût de crédit : Les modifications directes ne consomment pas de crédits IA — seules les modifications complexes passent par Agent
• Double contexte : Fonctionne de manière identique sur les frames du Canvas de Design et dans l’Aperçu
• Synchronisation du code source : Chaque modification met à jour instantanément le code source sous-jacent

​

Comment utiliser l’Éditeur Visuel

​

Éditer dans l’Aperçu

Cliquez sur n’importe quel élément de votre application en cours d’exécution pour commencer à modifier. Modifiez le texte, les couleurs, l’espacement ou les images — et voyez les modifications appliquées en direct.

​

Éditer sur le Canvas

La même expérience d’édition fonctionne sur les frames du Canvas de Design. Cliquez sur n’importe quel élément dans un frame pour le modifier — redimensionnez, changez le texte, ajustez les couleurs et l’espacement sur vos maquettes sans passer par une boucle Agent.

​

Édition de texte

Cliquez sur n’importe quel élément 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 couleurs

Utilisez le sélecteur de couleurs pour ajuster les couleurs de texte et d’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.

​

Modifications de style

Ajustez le rembourrage, les marges et la mise en page des éléments à l’aide de contrôles intuitifs.

​

Contrôles de mise en page

L’Éditeur Visuel regroupe tous les contrôles en sections claires pour que vous puissiez trouver celui dont vous avez besoin plus rapidement : Texte, Mise en page, Couleur et Bordure. (La section Image apparaît également lorsque vous sélectionnez un élément image.) La section Mise en page vous permet d’ajuster la disposition des éléments enfants dans un conteneur sans passer par Agent. Sélectionnez un conteneur flex, développez Mise en page, et vous obtenez :

• Alignement : Un sélecteur de points 3×3 pour définir où les éléments se positionnent sur les deux axes à l’intérieur du conteneur.
• Direction : Deux boutons fléchés qui empilent les éléments enfants en ligne ou en colonne.
• Écart : Une valeur en pixels pour l’espace entre les éléments. L’icône à côté de l’entrée d’écart change pour correspondre à la direction actuelle, vous permettant de toujours savoir si vous ajustez l’espacement horizontal ou vertical. À côté, une icône en forme de flèche active/désactive Distribuer l’espace entre les éléments, ce qui pousse les éléments enfants vers les bords opposés du conteneur.
• Espace extérieur : Entrées par côté pour l’espace à l’extérieur de l’élément (une entrée par côté, avec un bouton de lien pour verrouiller les quatre côtés à la fois).
• Espace intérieur : Entrées pour l’espace à l’intérieur de l’élément sur chaque axe, avec un bouton de lien pour les deux axes à la fois.

La section Mise en page 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 simples 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’images

Sélectionnez des images pour remplacer les URL ou télécharger 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 rembourrage, 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 vrais assets en cliquant et en téléchargeant
• Itération de design : Ajustez rapidement les frames Canvas pour comparer les directions visuelles sans allers-retours avec Agent

​

Questions fréquemment posées

Les modifications de l'Éditeur Visuel coûtent-elles des crédits IA ?

Les modifications simples et déterministes — changements de texte, sélections de couleurs, ajustements d’espacement — ne consomment pas de crédits IA. Elles mettent à jour le code source directement. Si l’Éditeur Visuel détecte une complexité cachée, il achemine la modification par Agent, ce qui utilise des crédits.

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

Oui. La sélection d’un élément rendu dans une boucle ou réutilisé dans plusieurs composants met en évidence et met à jour toutes les instances à la fois.

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

Les éléments composites composés de plusieurs sous-éléments ne peuvent pas être modifiés directement dans l’Éditeur Visuel. Demandez à Agent dans le chat d’apporter ces modifications à la place.

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.