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

# Getting started with the web editor

> Learn how to create and edit documentation with the web editor

<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="Mintlify web editor interface in light mode" 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="Mintlify web editor interface in dark mode" width="1184" height="320" data-path="images/editor/editor-dark.png" />

The web editor is a visual interface for creating, editing, and reviewing documentation directly in your browser.

* **Visual editing**: Make changes to your documentation using a what-you-see-is-what-you-get (WYSIWYG) editor that shows how your content will look when published.
* **Git synchronization**: All changes automatically sync with your Git repository to maintain version control.
* **Team collaboration**: Multiple people can work on documentation simultaneously.
* **Component integration**: Add callouts, code blocks, and other components with slash commands.
* **No setup required**: Start writing immediately from your dashboard.

## Web editor workflow

Here is how you'll typically work in the web editor:

<Steps>
  <Step title="Choose your branch">
    Create a branch or make changes directly to your deployment branch. We recommend creating a branch so that you can preview your changes before they go live.
  </Step>

  <Step title="Open your file">
    Navigate to an existing file in the sidebar or create a new one using the file explorer.
  </Step>

  <Step title="Edit your content">
    Make changes in the web editor. Try switching between visual mode and Markdown mode using the toggle in the top-right corner to see which mode you prefer.
  </Step>

  <Step title="Preview your changes">
    Visual mode shows you how your changes will appear on your live site. Use this to verify everything looks correct.
  </Step>

  <Step title="Publish your changes">
    If you're working on your deployment branch, publish your changes directly from the web editor. On other branches, you'll create a pull request for review before publishing.
  </Step>
</Steps>

## Editor modes

The web editor has two modes to accommodate different editing preferences and needs. Use the toggle in the top right corner of the editor toolbar to switch between editing modes.

<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="Mode toggle icons highlighted in the web editor." 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="Mode toggle icons highlighted in the web editor." className="hidden dark:block" width="3016" height="1212" data-path="images/editor/mode-toggle-dark.png" />
</Frame>

### Visual mode

Visual mode provides a WYSIWYG experience where the changes that you make in the editor are the changes that will be published to your documentation site. This mode is ideal for when you want to see how your changes will look in real-time.

Press `/` to open the component menu and add styled content, callouts, code snippets, or other components.

<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="Visual editing mode in the Mintlify web editor" 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="Visual editing mode in the Mintlify web editor" className="hidden dark:block" width="3018" height="1226" data-path="images/editor/visual-mode-dark.png" />
</Frame>

### Markdown mode

Markdown mode provides direct access to the underlying `MDX` code of your documentation. This mode is ideal for when you need precise control over component properties or when you prefer to write in Markdown syntax.

<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="Markdown mode in the Mintlify web editor" 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="Markdown mode in the Mintlify Web Editor" className="hidden dark:block" width="3016" height="1246" data-path="images/editor/markdown-mode-dark.png" />
</Frame>

## Next steps

* Learn fundamental [Git concepts](/editor/git-concepts).
* Learn best practices for collaborating with [branches](/editor/branches).
* Explore [content management](/editor/content-management) with the web editor.
* Understand [publishing options](/editor/publishing) for different scenarios.