mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
ec5e78af4c
* Update git-essentials.mdx * Update index.mdx * add v2 group * recent updates * remove v2 path * small classic editor page * add tutorial * updates based on notion doc * Create branching-and-publishing.mdx * Update collaborate.mdx * redirects * update pages * update create pages * remove pages * update redirects * Update navigation.mdx * remove redundancies * update configurations * 💅 * remove unused images * update live preview * correct image * Add missing visual mode shortcuts and ungroup action Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
117 lines
6.1 KiB
Plaintext
117 lines
6.1 KiB
Plaintext
---
|
|
title: "Create and edit pages"
|
|
description: "Create pages, edit content, upload media, and manage files in the Mintlify editor."
|
|
keywords: ["editor", "content", "pages", "files", "create", "edit", "media", "images", "video"]
|
|
---
|
|
|
|
## Navigate files
|
|
|
|
Browse pages in the **Navigation** tab of the left panel. Click a page to open it. Click the search icon or press <kbd>Cmd</kbd> + <kbd>K</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>K</kbd> (Windows) to search by filename or page content.
|
|
|
|
<Note>
|
|
API specification files (OpenAPI and AsyncAPI) are read-only in the web editor. To update a spec file, edit it in your preferred code editor and push the changes to your documentation repository.
|
|
</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.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/mode-toggle-light.png" alt="The mode toggle in the editor toolbar." className="block dark:hidden" />
|
|
<img src="/images/editor/mode-toggle-dark.png" alt="The mode toggle in the editor toolbar." className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
**Visual mode** shows a real-time preview as you type. Press <kbd>/</kbd> to open the component menu and insert components, images, videos, and other content. You can also drag and drop media files directly onto the page. Other shortcuts:
|
|
|
|
- **Insert a link**: Select text and press <kbd>Cmd</kbd> + <kbd>K</kbd> (macOS) or <kbd>Ctrl</kbd> + <kbd>K</kbd> (Windows), or drag a page from the navigation tree into the editor to create a link with the page title.
|
|
- **Insert an emoji**: Type <kbd>:</kbd> followed by a keyword to open the emoji picker.
|
|
- **Edit a table**: When your cursor is inside a table, use the floating toolbar to add or remove rows and columns, or merge cells.
|
|
|
|
**Markdown mode** gives you direct access to the MDX source. Use it for precise control over component properties and frontmatter.
|
|
|
|
<Note>
|
|
API specification files (OpenAPI and AsyncAPI) are read-only in the web editor. Edit them in your code editor and push the changes to your repository.
|
|
</Note>
|
|
|
|
For a full list of components, see [Components](/components). For MDX syntax, see [Format text](/create/text) and [Format code](/create/code).
|
|
|
|
### Block actions
|
|
|
|
In visual mode, hover over any block to reveal a drag handle on the left. Click the handle to open a context menu with actions for that block:
|
|
|
|
- **Turn into**: Convert the block to a different type—text, headings, blockquote, or list.
|
|
- **Duplicate**: Insert a copy of the block immediately after it.
|
|
- **Delete**: Remove the block.
|
|
|
|
<Frame>
|
|
<img src="/images/editor/block-actions-light.png" alt="The block actions menu in visual mode." className="block dark:hidden" />
|
|
<img src="/images/editor/block-actions-dark.png" alt="The block actions menu in visual mode." className="hidden dark:block" />
|
|
</Frame>
|
|
|
|
### Table of contents
|
|
|
|
In visual mode, the editor shows a minimap on the right side of the page that reflects the heading structure of your document. Hover over the minimap to expand it into a full table of contents. Click any heading to scroll to that section.
|
|
|
|
### Code block options
|
|
|
|
When editing a code block in visual mode, you can:
|
|
|
|
- **Highlight or focus lines**: Select text within the code block, then use the toolbar that appears to mark lines as highlighted or focused. Highlighted lines are visually emphasized; focused lines dim everything else.
|
|
- **Mark diff lines**: Select lines and use the toolbar to mark them as additions (`+`) or removals (`-`).
|
|
- **Wrap**: Toggle line wrapping in the code block settings.
|
|
- **Expandable**: Make the code block collapsible so readers can expand it on demand.
|
|
|
|
## Review changes before publishing
|
|
|
|
Open the publish menu and click any changed file to enter diff view. The editor highlights differences between your draft and the last published version. If you're in visual mode, you see a visual diff; if you're in Markdown mode, you see a Markdown diff.
|
|
|
|
Diff view is read-only. Click the <Icon icon="x" /> button next to the mode toggle to return to editing.
|
|
|
|
## Manage pages
|
|
|
|
- **Move**: Drag and drop pages to reorder them in navigation.
|
|
- **Rename**: Right-click a page and select **Rename**.
|
|
- **Duplicate**: Right-click a page and select **Duplicate**.
|
|
- **Delete**: Right-click a page and select **Delete**. The page is removed from navigation automatically.
|
|
|
|
### Pages deleted via Git
|
|
|
|
If a teammate deletes a page through Git while you have it open, the editor enters read-only mode and shows a banner. Your content is preserved so you can copy it before navigating away.
|
|
|
|
## Configure pages
|
|
|
|
Hover over a page and click the gear icon, or right-click and select **Settings**, to configure:
|
|
|
|
- **Title**, **Slug**, and **Sidebar title**: Control how the page appears in navigation and its URL.
|
|
- **Description** and **Keywords**: Improve search and SEO.
|
|
- **Layout**: Choose from standard, wide, centered, or custom.
|
|
|
|
For details on each setting, see [Pages](/organize/pages).
|
|
|
|
## Add media
|
|
|
|
### Images and videos
|
|
|
|
Type <kbd>/image</kbd> to upload a new image or select an existing one from your repository. Type <kbd>/video</kbd> to upload or select a video.
|
|
|
|
You can also drag and drop files from your computer directly onto a page. In visual mode, the file inserts inline. In Markdown mode, the editor inserts the file path at your cursor position. Images save to your `images/` folder and videos to `videos/`.
|
|
|
|
### Light and dark image variants
|
|
|
|
After inserting an image in visual mode, hover over it to reveal the image toolbar. Use **Light/dark variants** to upload separate images for light and dark mode.
|
|
|
|
### Embed external media
|
|
|
|
- **YouTube**: Type <kbd>/youtube</kbd> and paste the video URL.
|
|
- **Loom**: Type <kbd>/loom</kbd> and paste the video URL.
|
|
- **Vimeo**: Type <kbd>/vimeo</kbd> and paste the video URL.
|
|
- **Custom HTML**: Type <kbd>/embed</kbd> and switch to **Manual embed**.
|
|
|
|
For more on formatting images and using the Frame component, see [Images and embeds](/create/image-embeds).
|