É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 en cliquant directement sur les éléments. Il fonctionne à la fois dans le Canvas de design et dans l’aperçu, de sorte que vous pouvez modifier des maquettes et des applications en cours d’exécution de la même façon. Les modifications simples — changements de texte, ajustements de couleurs, réglages d’espacement — mettent à jour le code source directement sans consommer de crédits IA. Pour les modifications qui impliquent une complexité cachée, l’éditeur visuel passe automatiquement la main à Agent. Concepts clés :

• Modifications déterministes : Les modifications simples (texte, couleurs, espacement) s’appliquent directement au code source sans passer par un cycle Agent
• Sans coût de crédit : Les modifications directes ne consomment pas de crédits IA — seules les modifications complexes passent par Agent
• Contexte dual : Fonctionne de manière identique sur les cadres 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

​

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

​

Modification sur le Canvas

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

​

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

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.

​

Modifications de style

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

​

Mises à jour des 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 rapides de texte : Mettez à jour le contenu, les étiquettes et les titres sans ouvrir les fichiers source
• Exploration des couleurs : Essayez différents schémas de couleurs en cliquant et en ajustant — sans avoir à trouver le bon CSS
• Ajustements de mise en page : Affinez visuellement le rembourrage, les marges et l’espacement au lieu de deviner les valeurs en pixels
• Remplacement d’images : Remplacez les images fictives par de vraies ressources en cliquant et en téléchargeant
• Itération de design : Ajustez rapidement les cadres Canvas pour comparer des 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 via 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 constitué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.