> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Bien démarrer avec l’éditeur web

> Apprenez à créer et à modifier de la documentation avec l’éditeur web

<img className="block dark:hidden my-0 pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/editor-light.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=f5b9307f62ca5d00a4cb58ced31f4ba6" alt="Interface de l’éditeur web Mintlify en mode clair" width="1184" height="320" data-path="images/editor/editor-light.png" />

<img className="hidden dark:block my-0 pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/editor-dark.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=ed4f1674ab628904a760aae6779425bd" alt="Interface de l’éditeur web Mintlify en mode sombre" width="1184" height="320" data-path="images/editor/editor-dark.png" />

L’éditeur web est une interface visuelle pour créer, modifier et relire de la documentation directement dans votre navigateur.

* **Édition visuelle** : Modifiez votre documentation avec un éditeur WYSIWYG (What You See Is What You Get) qui montre le rendu final de votre contenu.
* **Synchronisation Git** : Toutes les modifications sont automatiquement synchronisées avec votre référentiel Git pour maintenir le contrôle de version.
* **Collaboration en équipe** : Plusieurs personnes peuvent travailler simultanément sur la documentation.
* **Intégration de composants** : Ajoutez des encarts, des blocs de code et d’autres composants à l’aide de commandes slash.
* **Aucune configuration requise** : Commencez à écrire immédiatement depuis votre Dashboard.

<div id="web-editor-workflow">
  ## Flux de travail de l’éditeur web
</div>

Voici comment vous travaillerez généralement dans l’éditeur web :

<Steps>
  <Step title="Choose your branch">
    Créez une branche ou apportez des modifications directement à votre branche de déploiement. Nous recommandons de créer une branche afin de pouvoir prévisualiser vos modifications avant leur mise en ligne.
  </Step>

  <Step title="Open your file">
    Accédez à un fichier existant dans la barre latérale ou créez-en un nouveau à l’aide de l’explorateur de fichiers.
  </Step>

  <Step title="Edit your content">
    Apportez des modifications dans l’éditeur web. Essayez d’alterner entre le mode visuel et le Mode Markdown à l’aide du basculeur situé dans le coin supérieur droit pour voir quel mode vous préférez.
  </Step>

  <Step title="Preview your changes">
    Le mode visuel vous montre comment vos modifications apparaîtront sur votre site en production. Utilisez-le pour vérifier que tout est correct.
  </Step>

  <Step title="Publish your changes">
    Si vous travaillez sur votre branche de déploiement, publiez vos modifications directement depuis l’éditeur web. Sur les autres branches, créez une pull request (demande de fusion) pour relecture avant la publication.
  </Step>
</Steps>

<div id="editor-modes">
  ## Modes de l’éditeur
</div>

L’éditeur web propose deux modes pour s’adapter à différentes préférences et besoins d’édition. Utilisez le commutateur dans l’angle supérieur droit de la barre d’outils de l’éditeur pour passer d’un mode à l’autre.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/mode-toggle-light.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=eaf266da91f2e616c73564c49bbee776" alt="Icônes de commutation de mode mises en évidence dans l’éditeur web." className="block dark:hidden" width="3024" height="1216" data-path="images/editor/mode-toggle-light.png" />

  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/mode-toggle-dark.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=1177b32348eb6209abc5a89000d00bc3" alt="Icônes de commutation de mode mises en évidence dans l’éditeur web." className="hidden dark:block" width="3016" height="1212" data-path="images/editor/mode-toggle-dark.png" />
</Frame>

<div id="visual-mode">
  ### Mode visuel
</div>

Le mode visuel offre une expérience WYSIWYG (What You See Is What You Get) où les modifications que vous effectuez dans l’éditeur sont exactement celles qui seront publiées sur votre site de documentation. Ce mode est idéal pour prévisualiser en temps réel l’apparence de vos modifications.

Appuyez sur « / » pour ouvrir le menu des composants et ajouter du contenu mis en forme, des encadrés, des extraits de code ou d’autres composants.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/1pfjDJXEL6HIHDKE/images/editor/visual-mode-light.png?fit=max&auto=format&n=1pfjDJXEL6HIHDKE&q=85&s=af73ef24f74aa0634b32c77f6b3c5f3c" alt="Mode d’édition visuel dans l’éditeur web Mintlify" className="block dark:hidden" width="3024" height="1232" data-path="images/editor/visual-mode-light.png" />

  <img src="https://mintcdn.com/omer-914cc1c6/1pfjDJXEL6HIHDKE/images/editor/visual-mode-dark.png?fit=max&auto=format&n=1pfjDJXEL6HIHDKE&q=85&s=d810bd3db962d058f86871e4e16e9b0e" alt="Mode d’édition visuel dans l’éditeur web Mintlify" className="hidden dark:block" width="3018" height="1226" data-path="images/editor/visual-mode-dark.png" />
</Frame>

<div id="markdown-mode">
  ### Mode Markdown
</div>

Le mode Markdown donne un accès direct au code `MDX` sous-jacent de votre documentation. Ce mode est idéal lorsque vous avez besoin d’un contrôle précis des propriétés des composants ou lorsque vous préférez écrire en syntaxe Markdown.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/markdown-mode-light.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=10cb0a57a11e812861cea36cc2c0088e" alt="Mode Markdown dans l’éditeur web Mintlify" className="block dark:hidden" width="3024" height="1248" data-path="images/editor/markdown-mode-light.png" />

  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/markdown-mode-dark.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=fb0d0dd0f4d18b85376e5ff10c068a41" alt="Mode Markdown dans l’éditeur web Mintlify" className="hidden dark:block" width="3016" height="1246" data-path="images/editor/markdown-mode-dark.png" />
</Frame>

<div id="next-steps">
  ## Prochaines étapes
</div>

* Apprenez les [concepts Git](/fr/editor/git-concepts) fondamentaux.
* Découvrez les meilleures pratiques de collaboration via les [branches](/fr/editor/branches).
* Explorez la [gestion du contenu](/fr/editor/content-management) avec l’éditeur web.
* Comprenez les [options de publication](/fr/editor/publishing) selon différents cas d’usage.