> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Web editor

> Build your documentation using the Mintlify web editor

<img className="block dark:hidden my-0 pointer-events-none" src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/editor-light.png" alt="Mintlify web editor interface in light mode" />

<img className="hidden dark:block my-0 pointer-events-none" src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/editor-dark.png" alt="Mintlify web editor interface in dark mode" />

## Introduction

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.
* **Real-time collaboration**: Multiple team members can work on documentation simultaneously, with changes visible to everyone.
* **No setup required**: Start writing immediately from your dashboard.

### Web editor flow

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.
  </Step>

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

  <Step title="Edit your content">
    Make changes in the web editor using either visual mode or Markdown mode.
  </Step>

  <Step title="Preview your changes">
    See how your changes will appear in visual mode.
  </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, publish your changes through a pull request.
  </Step>
</Steps>

## Editor modes

The web editor has two modes to accommodate different editing preferences and needs.

You can switch between modes at any time using the toggle in the top right corner of the editor toolbar.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/mode-toggle-light.png" alt="Mode toggle icons highlighted in the Mintlify web editor" className="block dark:hidden" />

  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/mode-toggle-dark.png" alt="Mode toggle icons highlighted in the Mintlify web editor" className="hidden dark:block" />
</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.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/visual-mode-light.png" alt="Visual editing mode in the Mintlify web editor" className="block dark:hidden" />

  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/visual-mode-dark.png" alt="Visual editing mode in the Mintlify web editor" className="hidden dark:block" />
</Frame>

### Markdown mode

Markdown mode provides direct access to the underlying `MDX` code of your documentation. `MDX` combines Markdown syntax with React components, giving you full control over your content structure. 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://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/markdown-mode-light.png" alt="Markdown mode in the Mintlify web editor" className="block dark:hidden" />

  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/markdown-mode-dark.png" alt="Markdown mode in the Mintlify Web Editor" className="hidden dark:block" />
</Frame>

## Git fundamentals

The web editor performs Git operations behind the scenes. Understanding these concepts will help you work more effectively with the web editor and collaborate with team members who are working in their local environments.

<AccordionGroup>
  <Accordion title="Repository">
    Your documentation's source where all files and their history are stored. The web editor connects to your repository to access and modify content.
  </Accordion>

  <Accordion title="Commit">
    A saved snapshot of your changes at a specific point in time.
  </Accordion>

  <Accordion title="Branch">
    A separate workspace for making changes without affecting your live documentation. Think of it as a safe sandbox for experiments and larger updates.
  </Accordion>

  <Accordion title="Deployment branch">
    The main branch that contains your live documentation content. Changes to this branch are automatically published to your documentation site. Often called `main`.
  </Accordion>

  <Accordion title="Pull request">
    A way to propose merging your branch changes into your live documentation. Allows for review and discussion before changes go live. Commonly called a PR.
  </Accordion>

  <Accordion title="Diff">
    A diff (or difference) shows the specific changes between two versions of a file. When reviewing pull requests, diffs highlight what has been added, removed, or modified.
  </Accordion>
</AccordionGroup>

### What the web editor automates

The web editor connects to your Git repository through our [GitHub App](/settings/github) or [GitLab integration](/settings/gitlab) and handles Git automatically. When you:

* **Open a file**: Fetches the latest version from your repository.
* **Make changes in a file**: Tracks your changes as a draft that can become a commit.
* **Save changes**: Creates a commit with your changes.
* **Create a branch**: Creates a new branch in your repository.
* **Publish on your deployment branch**: Creates a commit and pushes directly to your deployment branch.
* **Publish on other branches**: Creates a commit and opens a pull request.

### When to use branches

Branches let you work on changes without affecting the content on your live site. When your changes are ready, you can merge them into your deployment branch with a pull request.

**Best practice: Always work from branches.** This ensures your live documentation stays stable and enables proper review workflows.

## Creating a branch

1. Select the branch name in the editor toolbar (usually `main` by default).
2. Select **New Branch**.
3. Enter a descriptive name for your branch like `update-getting-started` or `fix-installation-steps`.
4. Select **Create Branch**.

<Note>
  You may need to select your new branch from the dropdown menu if the editor does not automatically switch to it.
</Note>

### Saving changes on a branch

To save your changes on a branch, select the **Save Changes** button in the top-right corner of the editor. This creates a commit with your changes and pushes it to your branch.

### Switching branches

1. Select the current branch name in the editor toolbar.
2. Select the branch you want to switch to from the dropdown menu.

<Tip>
  Any unsaved changes will be lost when switching branches. Make sure to save or publish your work before switching.
</Tip>

## Making changes

Edit existing content, create new pages, and organize your site structure in the web editor.

### Navigating files

Use the sidebar file explorer to browse your documentation, or press <kbd>Command</kbd> + <kbd>P</kbd> (<kbd>Ctrl</kbd> + <kbd>P</kbd> on Windows) to search for files.

### Editing content

Make changes to your pages using visual mode or Markdown mode.

In visual mode, press <kbd>/</kbd> to open the dropdown component menu. Add content blocks, callouts, code blocks and other components to customize your documentation.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/component-menu-light.png" alt="The unfurled component menu emphasized in the Mintlify web editor" className="block dark:hidden" />

  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/component-menu-dark.png" alt="The unfurled component menu emphasized in the Mintlify web editor" className="hidden dark:block" />
</Frame>

### Creating new pages

1. Select the **Create a new file** icon in the file explorer.
   <img
     src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/files-menu-light.png"
     className="block dark:hidden rounded-2xl border border-gray-100 shadow-lg"
     style={{
   width: '268px',
   height: 'auto',
   }}
     alt="Files menu in the web editor."
   />

<img
  src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/files-menu-dark.png"
  className="hidden dark:block rounded-2xl border border-white/10 shadow-lg"
  style={{
  width: '268px',
  height: 'auto',
}}
  alt="Files menu in the web editor in dark mode."
/>

1. Enter a filename.
2. Press <kbd>Enter</kbd> to create the file.

Your new page will open in the editor, ready for content to be added.

### Updating navigation

Add, remove, and reorder pages in your navigation by editing your `docs.json` file:

1. Navigate to your `docs.json` in the file explorer.
2. Update the `navigation` property to get the navigation structure that you want. See [Navigation](/navigation) for more information.

This example shows how to add a Themes page to the Profile group.

```json title="Adding a Themes page" highlight="18"
{
    "navigation": {
        "groups": [
            {
                "group": "Getting started",
                "pages": [
                    "index",
                    "quickstart",
                    "installation"
                ]
            },
            {
                "group": "Profile",
                "pages": [
                    "settings",
                    "account-types",
                    "dashboard",
                    "themes"
                ]
            }
        ]
    }
}
```

## Publishing changes

Select the **Publish** button to save your changes and make them available.

How your changes are published depends on which branch you are working on:

* **Deployment branch**: Updates your live site immediately.
* **Other branches**: Creates a pull request so you can review changes before they go live.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/publish-flow-light.png" alt="The publish button emphasized in the Mintlify web editor" className="block dark:hidden" />

  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/publish-flow-dark.png" alt="The publish button emphasized in the Mintlify web editor" className="hidden dark:block" />
</Frame>

## Pull requests and reviewing changes

Pull requests let you propose changes from your branch so that other people can review them before merging into your live documentation. This helps ensure that your changes are correct and gives your team a chance to collaborate on content.

<Tip>
  Even if you're working solo, pull requests are valuable for previewing changes before they go live and maintaining a clear history of updates.
</Tip>

### Creating a pull request on a branch

When you're ready to publish changes from your branch:

1. Make sure all your changes are saved on your branch.
2. Select **Publish Pull Request** in the top-right corner of the editor.
3. Add a title and description for your pull request. A good title and description help reviewers understand the changes you've made.
4. Select **Publish Pull Request**.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/pull-request-light.png" alt="Publish pull request button emphasized in the Mintlify web editor" className="block dark:hidden" />

  <img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify-nick-eng-3707-update-chat-endpoints-to-single-assi/images/editor/pull-request-dark.png" alt="Publish pull request button emphasized in the Mintlify web editor" className="hidden dark:block" />
</Frame>

The web editor will create a pull request in your Git repository and provide a link to view it.

### Reviewing pull requests

Once your pull request is created:

1. **Review your changes**: You and your team members can review your pull request in your Git provider like GitHub or GitLab.
2. **Make additional changes**: After reviewing, make any changes in your web editor. Saving your changes will update your pull request.
3. **Merge when ready**: When your pull request is ready, merge it to deploy changes to your live documentation site.

## Troubleshooting

Here are solutions to common issues you might encounter with the web editor.

<AccordionGroup>
  <Accordion title="Changes not appearing after publishing">
    **Possible causes:**

    * Deployment is still in progress
    * Caching issues in your browser

    **Solutions:**

    1. Check deployment status in your Mintlify Dashboard.
    2. Try hard refreshing your browser (<kbd>Ctrl</kbd> + <kbd>F5</kbd> or <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>).
    3. Clear your browser cache.
  </Accordion>

  <Accordion title="Permission errors when publishing">
    **Possible causes:**

    * Insufficient permissions to the Git repository
    * Authentication issues with your Git provider

    **Solutions:**

    1. Verify you have correct access to the repository.
    2. Check if your Git integration is properly configured.
    3. Review the [Editor Permissions](/advanced/dashboard/permissions) documentation.
  </Accordion>

  <Accordion title="Editor loading issues">
    **Possible causes:**

    * Network connectivity problems
    * Large documentation repositories

    **Solutions:**

    1. Check your internet connection.
    2. Refresh the page and try again.
    3. Contact support if the issue persists.
  </Accordion>
</AccordionGroup>
