> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Premiers pas 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/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/editor-light.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=17914b283c822ea9dc6b8d96da0cc736" 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/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/editor-dark.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=33bfd8a3aad29fcf7b4f4c114d254190" 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 votre documentation directement dans votre navigateur.

* **Édition visuelle** : Modifiez votre documentation avec un éditeur WYSIWYG (what you see is what you get) qui affiche le rendu final de votre contenu.
* **Synchronisation Git** : Toutes les modifications sont automatiquement synchronisées avec votre dépôt Git pour assurer le contrôle de version.
* **Collaboration** : Plusieurs personnes peuvent travailler simultanément sur la documentation.
* **Intégration de composants** : Ajoutez des encadrés, des blocs de code et d’autres composants avec des commandes slash.
* **Aucune configuration requise** : Commencez à écrire immédiatement depuis votre tableau de bord.

<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="Choisissez votre branche">
    Créez une branche ou apportez des modifications directement sur votre branche de déploiement. Nous recommandons de créer une branche afin de pouvoir prévisualiser vos changements avant leur mise en ligne.
  </Step>

  <Step title="Ouvrez votre fichier">
    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="Modifiez votre contenu">
    Modifiez votre contenu dans l’Éditeur web. Essayez d’alterner entre le mode visuel et le mode Markdown à l’aide du commutateur dans l’angle supérieur droit pour voir le mode que vous préférez.
  </Step>

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

  <Step title="Publiez vos modifications">
    Si vous travaillez sur votre branche de déploiement, publiez vos changements directement depuis l’Éditeur web. Sur les autres branches, créez une pull request pour révision 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 l’interrupteur 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/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/mode-toggle-light.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=cd6fc6e9d1d309eadfd252619f7ed332" alt="Icônes du sélecteur 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/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/mode-toggle-dark.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=2215ab43c8730b610b6dd9e9a7973135" alt="Icônes du sélecteur 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 où les modifications effectuées dans l’éditeur sont exactement celles qui seront publiées sur votre site de documentation. Ce mode est idéal si vous souhaitez voir en temps réel le rendu de vos modifications.

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

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/KAieJWDWb9msJsqT/images/editor/visual-mode-light.png?fit=max&auto=format&n=KAieJWDWb9msJsqT&q=85&s=63c4d052d0db4b435f62d0cd67e852bb" 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/mintlify-mintlify-add-hello-world-quickstart-48843/KAieJWDWb9msJsqT/images/editor/visual-mode-dark.png?fit=max&auto=format&n=KAieJWDWb9msJsqT&q=85&s=c25362f2cd0c0b4e5c0e29d605b98960" 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. Il 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 Markdown.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/markdown-mode-light.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=d6f9613132889c340e433db83032a664" 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/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/editor/markdown-mode-dark.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=bc96316eb99e718a7fed0bbdeb6ff0f9" 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 bonnes pratiques de collaboration avec les [branches](/fr/editor/branches).
* Explorez la [gestion de contenu](/fr/editor/content-management) avec l’Éditeur web.
* Familiarisez-vous avec les [options de publication](/fr/editor/publishing) adaptées à différents scénarios.