L'éditeur de code de CrocoVibe : reprenez la main sur le code de vos projets

L'éditeur de code de CrocoVibe vous donne un accès direct au code de vos projets, sans jamais quitter le constructeur. Vous ouvrez un fichier, vous le modifiez, vous sauvegardez, et l'aperçu se met à jour dans la foulée. C'est le pont entre ce que l'IA génère pour vous et le contrôle fin que vous voulez parfois reprendre.

Pourquoi passer par l'éditeur de code ?

CrocoVibe génère un projet complet à partir de vos prompts (une idée, une URL, un design de référence). Dans 90 % des cas, la conversation avec l'IA suffit. Mais il arrive un moment où vous voulez changer une marge précise, corriger une phrase, ajuster le comportement d'un composant, sans relancer toute une génération.

C'est exactement à ça que sert l'éditeur de code :

• Plus de précision : modifiez directement le code quand le pilotage par l'IA n'est pas assez chirurgical.

• Des changements ciblés : ajustez un texte, un style, un composant ou une route sans retoucher le reste du projet.

• Zéro allers-retours : pas de téléchargement, pas d'éditeur externe, pas d'étape de déploiement. Tout se passe dans CrocoClick.

• Un débogage rapide : les erreurs remontent dès qu'elles apparaissent, et l'IA propose une correction en un clic.

• Le droit à l'erreur : l'historique des versions conserve chaque sauvegarde, vous pouvez revenir en arrière à tout moment.

• Une navigation fluide : la recherche globale vous emmène directement au bon fichier, à la bonne ligne.

Les fonctionnalités de l'éditeur

Rechercher et remplacer

Ouvrez la recherche avec Cmd/Ctrl + F pour trouver et modifier du texte dans le fichier ouvert. Pratique pour renommer un composant, mettre à jour un texte codé en dur ou uniformiser un nom de variable.

• Toutes les occurrences sont surlignées au fur et à mesure que vous tapez.

• Les options « sensible à la casse » et « mot entier » évitent les remplacements accidentels.

• Vous remplacez une occurrence à la fois, ou tout d'un coup.

Recherche globale dans le projet

La recherche globale balaie l'ensemble du projet, pas seulement le fichier ouvert. Sur un projet qui grossit, c'est ce qui vous évite d'ouvrir les fichiers un par un.

• Les résultats sont regroupés par fichier.

• Chaque correspondance est surlignée, avec son numéro de ligne.

• Un clic vous amène directement au fichier et à la ligne concernés.

Sauvegarde instantanée et aperçu en direct

Pas d'étape de déploiement pour voir le résultat. Vous cliquez sur Enregistrer, l'aperçu se rafraîchit en quelques secondes.

Détection intelligente des erreurs

Si votre modification casse la compilation, l'erreur remonte directement dans le chat, sans que vous ayez à aller la chercher ailleurs.

1. Repérez l'erreur et lancez la correction par l'IA.Après une sauvegarde, un message Code modifié peut apparaître avec la mention Compilation échouée. Cliquez sur Détails pour lire l'erreur, puis sur Essayer de corriger pour que l'IA analyse le problème et propose un correctif.

2. Vérifiez la correction et l'aperçu.L'IA identifie l'erreur, met à jour le code et publie un message expliquant ce qu'elle a corrigé. Cliquez sur Détails pour lire le détail, ou sur Aperçu pour rafraîchir la prévisualisation et confirmer que tout est rentré dans l'ordre.

Détection automatique des routes

Quand vous créez une nouvelle route dans le code, elle apparaît automatiquement dans le sélecteur de routes. Rien à déclarer manuellement, la structure de votre projet reste cohérente.

Historique des versions

Chaque sauvegarde crée une nouvelle version. Vous pouvez comparer, prévisualiser, marquer une version en favori et revenir en arrière sans repartir de zéro.

Pour y accéder, cliquez sur l'icône Horloge en haut du constructeur.

Protection des modifications non enregistrées

Si vous tentez de quitter l'éditeur avec des modifications non sauvegardées, un avertissement s'affiche. De quoi éviter de perdre vingt minutes de travail sur un clic malheureux.

Utiliser l'éditeur de code, étape par étape

Étape 1 : ouvrir l'éditeur de code

Ouvrez le projet CrocoVibe que vous voulez modifier. Dans l'espace de travail du projet, cliquez sur Code.

Étape 2 : choisir le fichier et modifier le code

Ouvrez le fichier à modifier depuis l'arborescence, puis apportez vos changements directement dans l'éditeur. Utilisez Rechercher et remplacer ou la recherche globale si vous ne savez pas où se trouve l'élément à modifier.

Étape 3 : enregistrer vos modifications

Cliquez sur Enregistrer pour appliquer vos changements et rafraîchir l'aperçu.

Étape 4 : vérifier l'aperçu et corriger les erreurs

Contrôlez que le contenu, la mise en page et les fonctionnalités se comportent comme prévu. Si une erreur de compilation apparaît, cliquez sur Détails pour la lire, puis sur Essayer de corriger pour laisser l'IA proposer un correctif.

Étape 5 : publier votre projet

Une fois vos modifications validées, publiez le projet pour les rendre visibles en ligne. La procédure complète est détaillée dans l'article CrocoVibe : créez sites, pages et applications 100 % codés avec l'IA de CrocoClick.

Questions fréquentes