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

# Éditeur et outils

> Découvrez les outils disponibles dans l'Éditeur de projet — l'éditeur, la prévisualisation, la console, le shell et bien plus encore.

L'Éditeur de projet comprend une gestion de la disposition et des outils intégrés qui alimentent votre expérience de création d'applications.
Ces fonctionnalités de l'Éditeur de projet se spécialisent dans la gestion d'aspects spécifiques du processus de développement, vous permettant de
vous concentrer sur la création plutôt que sur la configuration.

## Disposition personnalisable de l'Éditeur de projet

Les outils de gestion de la disposition de l'Éditeur de projet vous permettent de personnaliser les composants de l'environnement de développement.
Il se compose des types d'éléments d'interface utilisateur suivants :

| Élément      | Description                                                                                                       | Capacités                                                                                                                                                                                           | Cas d'utilisation                                                                                                                                        |
| ------------ | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Fenêtres** | Onglets de navigateur contenant un ou plusieurs panneaux                                                          | <ul><li>Peuvent être organisées sur plusieurs écrans</li></ul>                                                                                                                                      | <ul><li>Organiser l'Éditeur de projet sur plusieurs écrans</li><li>Travailler sur différents projets simultanément</li></ul>                             |
| **Panneaux** | Sections d'une fenêtre contenant un ou plusieurs onglets                                                          | <ul><li>Prennent en charge le fractionnement horizontal et vertical</li><li>Peuvent être redimensionnés et réorganisés</li><li>Peuvent être convertis en panneau flottant dans la fenêtre</li></ul> | <ul><li>Voir le code et la prévisualisation côte à côte</li><li>Créer des dispositions personnalisées pour différentes tâches de développement</li></ul> |
| **Onglets**  | Contiennent exactement un outil de l'Éditeur de projet, comme l'éditeur de fichiers, la Prévisualisation ou Agent | <ul><li>Peuvent être déplacés entre les panneaux et réorganisés en leur sein</li><li>Permettent de passer entre différents fichiers ou outils d'un seul clic</li></ul>                              | <ul><li>Ouvrir différents outils ou fichiers selon les besoins</li></ul>                                                                                 |

La vidéo suivante identifie chaque élément de disposition de l'Éditeur de projet :

<Frame>
  <iframe src="https://www.loom.com/embed/495838f6de3a42a890461572615ad48e?sid=df5d78b9-6d2e-4396-8853-4e3fa2b81db4" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Arborescence de fichiers

L'arborescence de fichiers liste tous les fichiers et répertoires de votre application Replit.

<Accordion title="Comment accéder à l'arborescence de fichiers">
  Sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/files-icon.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=4b9ac8b70c07960d9f9a3f6eacee4ab6" alt="icône dossier avec flèches" width="16" height="16" data-path="images/icons/files-icon.svg" /> dossier à gauche pour basculer
  la visibilité de l'arborescence de fichiers.
</Accordion>

Vous pouvez effectuer les actions suivantes dans l'arborescence de fichiers :

* Sélectionner un dossier pour afficher son contenu
* Sélectionner un fichier ou le faire glisser vers un panneau pour l'ouvrir dans un éditeur de fichiers
* Effectuer des opérations sur les fichiers telles que dupliquer, renommer, déplacer, télécharger ou supprimer

La vidéo suivante montre plusieurs actions dans l'arborescence de fichiers :

<Frame>
  <iframe src="https://www.loom.com/embed/84129671e4fd4346b426b726609a7cae?sid=ea104265-b5ac-4f93-bf50-6136258de174" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Dock d'outils

Le dock d'outils vous permet de rechercher et d'ouvrir les outils de l'Éditeur de projet dans de nouveaux onglets.

<Accordion title="Comment accéder au dock d'outils">
  Sélectionnez parmi les outils couramment utilisés ou sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-all-tools-button.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=579643854fb13c402de516695e52c554" alt="Icône Tous les outils" width="16" height="16" data-path="images/icons/workspace-all-tools-button.svg" /> **Tous les outils**
  pour ouvrir le menu contextuel de recherche d'outils.
</Accordion>

La capture d'écran suivante montre le menu contextuel **Tous les outils** ouvert dans le dock d'outils :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/tools-dock.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=7a48f62509f3cb7aaab01c8aa7f8ba24" alt="capture d'écran du dock d'outils" height="50" data-path="images/workspace/tools-dock.png" />
</Frame>

## Bouton Exécuter

Le bouton **Exécuter** exécute le workflow sélectionné de l'application Replit.

<Accordion title="Comment accéder au bouton Exécuter">
  Le bouton **Exécuter** se trouve en haut de l'écran de l'Éditeur de projet. Sélectionnez le bouton pour exécuter le workflow.

  Lorsque votre application Replit est en cours d'exécution, le libellé du bouton est remplacé par **Arrêter**. Sélectionnez le bouton pour arrêter l'application.
</Accordion>

Pour apprendre à sélectionner, afficher et gérer les workflows, consultez [Workflows](/core-concepts/project-editor/app-setup/workflows/).

La vidéo suivante montre comment afficher et exécuter un workflow :

<Frame>
  <iframe src="https://www.loom.com/embed/086c8447bf234ca290ad11f0bbb2e13e?sid=1e8597e5-a3c4-4b36-b42e-f3ad97533334" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Page Spotlight

La page Spotlight vous permet de voir et de modifier la page de couverture de votre application Replit et d'accéder aux options de partage.

<Accordion title="Comment accéder à la page Spotlight">
  Sélectionnez le nom de votre projet en haut à gauche de l'Éditeur de projet pour basculer la page Spotlight.
</Accordion>

La vidéo suivante montre comment accéder à la page Spotlight :

<Frame>
  <iframe src="https://www.loom.com/embed/568fa9603a5546919e97b06695ea1da5?sid=cbc2a2f4-ae3f-4a96-85ef-45941f587d35" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen width="100%" height="420px" />
</Frame>

## Menu Options

Le menu Options vous permet d'effectuer les types d'actions de disposition suivants :

* **Gestion des fenêtres** : Ouvrir l'Éditeur de projet pour l'application Replit dans une nouvelle fenêtre
* **Gestion des panneaux** : Ajouter des panneaux, déplacer un panneau, maximiser un panneau et basculer entre les positions flottante et fixe
* **Gestion des onglets** : Ouvrir ou sélectionner d'autres onglets, déplacer un onglet vers un autre panneau et fermer un onglet

<Accordion title="Comment accéder au menu Options">
  Sélectionnez les <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/vertical-dots.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=7b4b6a9992b3b20202297b60b6ef416d" alt="icône points verticaux" height="16" width="16" data-path="images/icons/vertical-dots.svg" /> trois points verticaux
  situés dans le coin supérieur droit de l'onglet actif pour ouvrir le menu Options.
</Accordion>

La capture d'écran suivante montre le menu contextuel Options dans le panneau de gauche :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/workspace-options-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=5d8892fb1057bfc37de6aff5af278295" alt="capture d'écran montrant le menu Options de l'Éditeur de projet" width="1968" height="1136" data-path="images/workspace/workspace-options-menu.png" />
</Frame>

## Barre de recherche

La barre de recherche vous permet de trouver des fichiers, du texte ou des outils dans l'Éditeur de projet.

<Accordion title="Comment accéder à la barre de recherche">
  1. Pour ouvrir la barre de recherche, sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/X_IP1EeHGm0cA2VA/images/icons/workspace-search-icon.svg?fit=max&auto=format&n=X_IP1EeHGm0cA2VA&q=85&s=d3feed840da2d19e1ee4873d137114dc" alt="icône loupe" width="16" height="16" data-path="images/icons/workspace-search-icon.svg" /> loupe en haut.
  2. Entrez votre texte de recherche et sélectionnez parmi les suggestions d'autocomplétion.
</Accordion>

La capture d'écran suivante montre le menu contextuel de recherche :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/search-menu.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=205cdb6244d368c4b7e57215f1328e42" alt="capture d'écran montrant le menu de recherche de l'Éditeur de projet" width="1732" height="1224" data-path="images/workspace/search-menu.png" />
</Frame>

## Panneau Ressources

Le panneau Ressources affiche les ressources informatiques et l'utilisation de votre environnement de développement, y compris la RAM, le CPU et le stockage.
Ces informations peuvent vous aider à estimer et à optimiser les exigences de publication de votre application Replit.

<Accordion title="Comment accéder au panneau Ressources">
  1. Sélectionnez l'icône <img class="icon-svg" src="https://mintcdn.com/replit/rJldsgYVucXB_6kW/images/icons/resources.svg?fit=max&auto=format&n=rJldsgYVucXB_6kW&q=85&s=8df05261182e3e39f28dcccf809d66c2" alt="icône ordinateurs empilés" width="16" height="16" data-path="images/icons/resources.svg" /> ressources située à côté du nom de votre application pour basculer le panneau.
  2. Survolez les éléments **Calcul** ou **Stockage** pour plus de détails.
</Accordion>

La capture d'écran suivante montre le panneau Ressources :

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/resources-panel.png?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=63449b197613dc36bf9dcd1f9c17e7c7" alt="capture d'écran montrant le panneau Ressources de l'Éditeur de projet" width="1214" height="652" data-path="images/workspace/resources-panel.png" />
</Frame>

## Outils

Pour en savoir plus sur les autres outils de l'Éditeur de projet, sélectionnez dans la liste suivante :

<CardGroup cols={3}>
  <Card title="Secrets" icon="key" iconType="solid" href="/core-concepts/project-editor/app-setup/secrets" horizontal={true}>
    Protégez les clés API, les identifiants et les mots de passe de votre application.
  </Card>

  <Card title="Historique des fichiers" icon="clock-rotate-left" iconType="solid" href="/core-concepts/project-editor/version-control/file-history" horizontal={true}>
    Revenez en arrière pour récupérer des modifications perdues grâce à la fonctionnalité de suivi des versions de Replit.
  </Card>

  <Card title="Multijoueur" icon="users" iconType="solid" href="/replitai/invite-teammates" horizontal={true}>
    Codez ensemble en temps réel avec deux utilisateurs ou plus.
  </Card>

  <Card title="Paramètres utilisateur" icon="gear" iconType="solid" href="/core-concepts/project-editor/editor-and-tools/user-settings" horizontal={true}>
    Personnalisez votre expérience de codage via l'outil Paramètres.
  </Card>

  <Card title="Console" icon="terminal" iconType="solid" href="/core-concepts/project-editor/editor-and-tools/console" horizontal={true}>
    Voir la sortie de votre application Replit
  </Card>

  <Card title="Shell" icon="terminal" iconType="solid" href="/core-concepts/project-editor/editor-and-tools/shell" horizontal={true}>
    Interagissez avec l'Éditeur de projet à l'aide d'une interface en ligne de commande.
  </Card>

  <Card title="Prévisualisation" icon="laptop" iconType="solid" href="/core-concepts/project-editor/editor-and-tools/preview" horizontal={true}>
    Prévisualisez et déboguez votre application web.
  </Card>
</CardGroup>