mintlify__docs/editor/pages.mdx

---
title: "Create and edit pages"
description: "Create, edit, and organize documentation pages in the web editor."
keywords: ["editor","content","pages","files"]
---

## Navigate files

Browse your documentation pages in the **Navigation** tab of the left panel.

- Click navigation elements to expand or collapse them.
- Click pages to open them in the editor.
- Click the search icon or press <kbd>Cmd</kbd> + <kbd>K</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>K</kbd> (Windows) to search for files and content. Search finds matches in both filenames and page content.
- Click the hide sidebar button in the toolbar to collapse the sidebar and give the editor more space.

<Note>
  The navigation tab lists pages by their titles. The files tab lists pages by their filename and extension.
</Note>

## Create new pages

1. Click the <Icon icon="plus" /> plus button in the navigation element where you want to add a page.
1. Click **Add a page**.
1. Enter a filename. The editor adds the `.mdx` extension automatically.

## Edit content

Switch between visual and Markdown mode with the toggle in the toolbar. The web editor saves your changes when switching modes.

<Frame>
  <img
    src="/images/editor/mode-toggle-light.png"
    alt="Mode toggle in the toolbar."
    className="block dark:hidden"
  />

  <img
    src="/images/editor/mode-toggle-dark.png"
    alt="Mode toggle in the toolbar."
    className="hidden dark:block"
  />
</Frame>

### Visual mode

Edit content with real-time previews that show how the content looks when published.

- **Add text**: Type in the editor to see how the text appears when published.
- **Format text**: Use the toolbar to bold, italicize, or apply other formatting to text.
- **Add components**: Press <kbd>/</kbd> to open the component menu and select components.
- **Add images**: Use the image component from the <kbd>/</kbd> menu or type <kbd>/image</kbd>.
- **Add videos**: Type <kbd>/video</kbd> to upload or select a video.
- **Add embedded content**: Type <kbd>/embed</kbd> to insert a YouTube, Loom, or custom HTML embed. See [Add media](/editor/media) for details.
- **Add Mermaid diagrams**: Type <kbd>/mermaid</kbd> to insert a Mermaid diagram with an interactive preview, zoom/pan controls, and code editor.
- **Add snippets**: Type <kbd>/snippet</kbd> to search for and insert a reusable snippet. The editor adds the required import statement automatically.
- **Add math equations**: Type <kbd>/inline-math</kbd> for an inline LaTeX equation or <kbd>/block-math</kbd> for a centered block equation. [Enable LaTeX](/editor/configurations) in your site settings first.
- **Add prompt blocks**: Type <kbd>/prompt</kbd> to insert an AI prompt template with copy actions.
- **Edit tables**: When your cursor is inside a table, use the floating toolbar to add or remove rows and columns, or merge cells.
- **Insert links**: Select text and press <kbd>Cmd</kbd> + <kbd>K</kbd>, or drag a page from the navigation tree into the editor to create a link with the page title.

See [Components](/components) for the complete list of available components.

### Markdown mode

Edit the MDX source code.

- **Direct MDX editing**: Write MDX and Markdown syntax for precise control over content.
- **Component properties**: Set component properties and configurations.
- **Frontmatter**: Edit page metadata at the top of the file.

See [Format text](/create/text) and [Format code](/create/code) for more information on MDX syntax.

## Configure pages

Configure page settings to control how pages appear in navigation, search results, and your site layout.

Hover over a page, then click the gear icon. You can also right-click a file and select **Settings**.

<Frame>
  <img
    src="/images/editor/page-settings-light.png"
    alt="A page highlighted in the sidebar so that the settings gear icon is visible."
    className="block dark:hidden"
  />
  <img
    src="/images/editor/page-settings-dark.png"
    alt="A page highlighted in the sidebar so that the settings gear icon is visible."
    className="hidden dark:block"
  />
</Frame>

### Customize navigation appearance

Control how the page appears in your site's navigation sidebar.

- **Title**: Set the main heading. Appears in navigation, browser tabs, and search results.
- **Slug**: Set the URL path for the page. The slug defaults to the path relative to your repository root without the file extension. For example, `guides/getting-started.mdx` becomes `guides/getting-started`. Changing the slug renames and moves the file to match the new path.
- **Sidebar title**: Display shorter text in navigation when the full title is too long for the sidebar.
- **Icon**: Add a visual marker next to the page to help users identify it quickly.
- **External URL**: Link to an external site instead of a page. Use this to add external resources to your navigation.

### Optimize for search and sharing

Help users find your page and improve how it appears when shared.

- **Description**: Write a brief summary. Appears in search results and SEO meta tags.
- **Keywords**: Add relevant search terms to help users discover this page.
- **OG Image URL**: Set a custom preview image for social media shares and link previews.

### Control page layout

Choose how the page displays to match your content needs.

- **Standard layout** (`default`): Default page with sidebar navigation and table of contents.
- **Full-width layout** (`wide`): Hides table of contents to allow wider layouts for tables, diagrams, or other content.
- **Centered layout** (`center`): Hides sidebar and table of contents for better readability of text-heavy pages like changelogs.
- **Custom width** (`custom`): Minimal layout with only the top navbar for landing pages or other unique layouts.

## Manage pages

### Move pages

Drag and drop pages to reorder them in your navigation or move files between folders in the file tree.

### Rename pages

In the file explorer, right-click a file then click **Rename**. The editor preserves the file extension automatically. You only need to enter the name for the page.

### Duplicate pages

Right-click a page and select **Duplicate**.

### Delete pages

Right-click a page and select **Delete**. Deleting a page removes it from your navigation automatically.

### Hide pages

To remove a page from navigation without deleting the file, enable the **Hidden** toggle in the page settings. A hidden page remains in your repository and users can still access the page by navigating directly to the page's URL. You can unhide a page in the page settings or add it to your `docs.json` navigation.