diff --git a/docs.json b/docs.json index a137f89a6..af7a69e0c 100644 --- a/docs.json +++ b/docs.json @@ -24,7 +24,19 @@ "index", "quickstart", "installation", - "editor" + { + "group": "Web editor", + "icon": "mouse-pointer-2", + "pages": [ + "editor/getting-started", + "editor/git-concepts", + "editor/branches", + "editor/content-management", + "editor/publishing", + "editor/keyboard-shortcuts", + "editor/troubleshooting" + ] + } ] }, { @@ -506,6 +518,10 @@ { "source": "api-reference/chat/*", "destination": "api-reference/assistant/*" + }, + { + "source": "editor", + "destination": "editor/getting-started" } ], "integrations": { diff --git a/editor.mdx b/editor.mdx deleted file mode 100644 index 12bfb13e4..000000000 --- a/editor.mdx +++ /dev/null @@ -1,388 +0,0 @@ ---- -title: "Web editor" -description: "Build your documentation using the Mintlify web editor" -icon: "mouse-pointer-2" ---- - -Mintlify web editor interface in light mode - -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: - - - - Create a branch or make changes directly to your deployment branch. - - - Navigate to an existing file or create a new one. - - - Make changes in the web editor using either visual mode or Markdown mode. - - - See how your changes will appear in visual mode. - - - 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. - - - -## 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. - - - Mode toggle icons highlighted in the Mintlify web editor - Mode toggle icons highlighted in the Mintlify web editor - - -### 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. - - - Visual editing mode in the Mintlify web editor - Visual editing mode in the Mintlify web editor - - -### 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. - - - Markdown mode in the Mintlify web editor - Markdown mode in the Mintlify Web Editor - - -## 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. - - - - Your documentation's source where all files and their history are stored. The web editor connects to your repository to access and modify content. - - - - A saved snapshot of your changes at a specific point in time. - - - - A separate workspace for making changes without affecting your live documentation. Think of it as a safe sandbox for experiments and larger updates. - - - - The main branch that contains your live documentation content. Changes to this branch are automatically published to your documentation site. Often called `main`. - - - - 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. - - - - 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. - - - -### 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**. - - - You may need to select your new branch from the dropdown menu if the editor does not automatically switch to it. - - -### 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. - - - Any unsaved changes will be lost when switching branches. Make sure to save or publish your work before switching. - - -## 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 Command + P (Ctrl + P on Windows) to search for files. - -### Editing content - -Make changes to your pages using visual mode or Markdown mode. - -In visual mode, press / to open the dropdown component menu. Add content blocks, callouts, code blocks and other components to customize your documentation. - - - The unfurled component menu emphasized in the Mintlify web editor - The unfurled component menu emphasized in the Mintlify web editor - - -### Creating new pages - -1. Select the **Create a new file** icon in the file explorer. - Files menu in the web editor. - Files menu in the web editor in dark mode. -1. Enter a filename. -1. Press Enter 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. -1. 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. - - - The publish button emphasized in the Mintlify web editor - The publish button emphasized in the Mintlify web editor - - -## 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. - - - Even if you're working solo, pull requests are valuable for previewing changes before they go live and maintaining a clear history of updates. - - -### 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. -1. Select **Publish Pull Request** in the top-right corner of the editor. -1. Add a title and description for your pull request. A good title and description help reviewers understand the changes you've made. -1. Select **Publish Pull Request**. - - - Publish pull request button emphasized in the Mintlify web editor - Publish pull request button emphasized in the Mintlify web editor - - -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. -1. **Make additional changes**: After reviewing, make any changes in your web editor. Saving your changes will update your pull request. -1. **Merge when ready**: When your pull request is ready, merge it to deploy changes to your live documentation site. - -## Keyboard shortcuts - -The web editor supports all common keyboard shortcuts such as copy, paste, undo, and select all, and the following shortcuts: - -| Command | macOS | Windows | -|:--------|:------|:--------| -| **Search files** | Cmd + P | Control + P | -| **Add link to highlighted text** | Cmd + K | Control + K | -| **Add line break** | Cmd + Enter | Control + Enter | -| **Bold** | Cmd + B | Control + B | -| **Italic** | Cmd + I | Control + I | -| **Underline** | Cmd + U | Control + U | -| **Strikethrough** | Cmd + Shift + S | Control + Shift + S | -| **Code** | Cmd + E | Control + E | -| **Normal text** | Cmd + Alt + 0 | Control + Alt + 0 | -| **Heading 1** | Cmd + Alt + 1 | Control + Alt + 1 | -| **Heading 2** | Cmd + Alt + 2 | Control + Alt + 2 | -| **Heading 3** | Cmd + Alt + 3 | Control + Alt + 3 | -| **Heading 4** | Cmd + Alt + 4 | Control + Alt + 4 | -| **Ordered list** | Cmd + Shift + 7 | Control + Shift + 7 | -| **Unordered list** | Cmd + Shift + 8 | Control + Shift + 8 | -| **Blockquote** | Cmd + Shift + B | Control + Shift + B | -| **Subscript** | Cmd + , | Control + , | -| **Superscript** | Cmd + . | Control + . | - -## Troubleshooting - -Here are solutions to common issues you might encounter with the web editor. - - - - **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 (Ctrl + F5 or Cmd + Shift + R). - 3. Clear your browser cache. - - - **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. - - - **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. - - diff --git a/editor/branches.mdx b/editor/branches.mdx new file mode 100644 index 000000000..71e6a3d4a --- /dev/null +++ b/editor/branches.mdx @@ -0,0 +1,36 @@ +--- +title: "Working with branches" +description: "Use branches to make and review changes without affecting your live documentation" +--- + +Branches are a feature of version control that point to specific commits in your repository. Your deployment branch, usually called `main`, represents the content that is used to build your live documentation. All other branches are independent of your live docs unless you choose to merge them into your deployment branhc. + +Branches let you create separate instances of your documentation to make changes, get reviews, and try new approaches before publishing. Your team can work on branches to update different parts of your documentation at the same time without affecting what users see on your live site until you publish any changes. + +We recommend always working from branches when updating documentation to keep your live site stable and enable review workflows. + + + - Name branches clearly so teammates understand what you're working on. + - Delete branches after merging to keep your repository organized. + - Let your team know when you're working on major changes that might affect their work. + + +## 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-api-examples`. +4. Select **Create Branch**. + +## 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 and pushes your work to your branch. + +## Switching branches + +1. Select the branch name in the editor toolbar. +2. Select the branch you want to switch to from the dropdown menu. + + + Unsaved changes are lost when switching branches. Make sure to save or publish your work before switching branches. + diff --git a/editor/content-management.mdx b/editor/content-management.mdx new file mode 100644 index 000000000..5b11cbe4e --- /dev/null +++ b/editor/content-management.mdx @@ -0,0 +1,110 @@ +--- +title: "Managing content" +description: "Create, edit, and organize your documentation pages" +--- + +## Navigating your files + +Use the sidebar file explorer to browse your documentation files. Click on any file to open it in the editor. + +Press Command + P (Ctrl + P on Windows) to search for files by name. + +## Creating new pages + + + + Select the **Create a new file** icon in the file explorer sidebar. + + Files menu in the web editor + Files menu in the web editor in dark mode + + + Filenames must end in `.mdx`. For example, `api-reference.mdx` or `getting-started.mdx`. + + + Press Enter to create the file. It will open automatically in the editor, ready for content to be added. + + + +## Organizing your navigation + +Add new pages to your site navigation by editing your `docs.json` file. + + + + Find and open the `docs.json` file in your root directory using the file explorer. + + + Find the spot in the `docs.json` file where you want to add your new page. + + + Insert your page filename (without the `.mdx` extension) in the appropriate group's `pages` array. + + + +### Example: Adding a themes page + +```json title="Adding a themes page to the Profile group" highlight="18" +{ + "navigation": { + "groups": [ + { + "group": "Getting started", + "pages": [ + "index", + "quickstart", + "installation" + ] + }, + { + "group": "Profile", + "pages": [ + "settings", + "account-types", + "dashboard", + "themes" + ] + } + ] + } +} +``` + +## Editing content + +Make changes to your pages using visual mode or Markdown mode in the editor. + +In visual mode, press / to open the component menu. Add content blocks, callouts, code blocks, and other components to customize your documentation. + + + The unfurled component menu emphasized in the Mintlify web editor + The unfurled component menu emphasized in the Mintlify web editor + + +In Markdown mode, you can directly edit the `MDX` of your pages. This can be helpful when you need to: + +- Set specific component properties +- Work with complex nested components +- Copy and paste `MDX` content from other sources diff --git a/editor/getting-started.mdx b/editor/getting-started.mdx new file mode 100644 index 000000000..5984aacfa --- /dev/null +++ b/editor/getting-started.mdx @@ -0,0 +1,107 @@ +--- +title: "Getting started with the web editor" +sidebarTitle: "Getting started" +description: "Learn how to create and edit documentation with the web editor" +--- + +Mintlify web editor interface in light mode + +Mintlify web editor interface in dark mode + +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: + + + + 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. + + + Navigate to an existing file in the sidebar or create a new one using the file explorer. + + + 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. + + + Visual mode shows you how your changes will appear on your live site. Use this to verify everything looks correct. + + + 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. + + + +## 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. + + + Mode toggle icons highlighted in the web editor. + Mode toggle icons highlighted in the web editor. + + +### 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. + + + Visual editing mode in the Mintlify web editor + Visual editing mode in the Mintlify web editor + + +### 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. + + + Markdown mode in the Mintlify web editor + Markdown mode in the Mintlify Web Editor + + +## 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. diff --git a/editor/git-concepts.mdx b/editor/git-concepts.mdx new file mode 100644 index 000000000..8f3d989dc --- /dev/null +++ b/editor/git-concepts.mdx @@ -0,0 +1,60 @@ +--- +title: "Git concepts" +description: "Learn Git fundamentals for the docs-as-code workflow" +--- + +Git is a version control system that allows you to track changes to your documentation and collaborate with team members. With Git, for every file in your project, you can see what changed, when, and why. Git also makes it easy to revert to previous versions of files if you ever need to. + +The web editor performs some 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 development environments. + +## Core Git concepts + + + + Your documentation's source where all files and their history are stored. The web editor connects to your repository to access and modify content. + + + + A saved snapshot of your changes at a specific point in time. Each commit includes a message describing what changed and creates a permanent record in your project history. + + + + A branch points to a specific commit in your repository. Your live documentation is built from a deployment branch. You can have any number of other branches with changes that are not yet published to your live documentation. If you want to incorporate the changes from a branch into your live documentation, you can merge the branch into your deployment branch through a pull request. + + Use branches to work on changes without affecting your live documentation, safely experiment with new features, and get reviews before publishing. + + + + The primary branch of your project that your live documentation content is built from. Changes to this branch are automatically published to your documentation site. Often called `main`, but you can set any branch as your deployment branch. + + + + A way to propose merging your changes on a branch into your live documentation. Allows for review and discussion before changes go live. Commonly called a PR, and also called a merge request in GitLab. + + + + A diff (or difference) shows the changes between two versions of a file. When reviewing pull requests, diffs highlight what has been added, removed, or modified, making it easy to identify what changed. + + + +## How the web editor uses Git + +The web editor connects to your Git repository through the [GitHub App](/settings/github) or [GitLab integration](/settings/gitlab) and automates common Git operations. + +When you: + +- **Open a file**: The editor fetches the latest version from your repository, ensuring you're always working with up to date content. +- **Make changes**: The editor tracks your changes as a draft that can become a commit when you're ready to save your work. +- **Save changes**: The editor makes a commit with your changes, preserving your work in the project history. +- **Create a branch**: The editor creates a new branch in your repository that can be used by anyone with access to the repository so they can collaborate and review changes. +- **Publish on your deployment branch**: The editor commits and pushes directly to your deployment branch, which publishes your changes immediately. +- **Publish on other branches**: The editor creates a pull request, which allows you to get feedback from others before merging your changes into your deployment branch. + +## Git best practices + +Every team will develop their own workflows and preferences, but these are some general best practices to get you started. + +- **Write descriptive commit messages**: Be specific about what changed using active language. +- **Use descriptive branch names**: Branch names should explain the work being done and be meaningful to someone who is looking at the branches in your repository. +- **Keep branches focused**: Keep the changes on a branch focused on a specific task or project. +- **Delete branches after merging**: Delete branches when you no longer need them to keep your repository tidy. diff --git a/editor/keyboard-shortcuts.mdx b/editor/keyboard-shortcuts.mdx new file mode 100644 index 000000000..4471ff553 --- /dev/null +++ b/editor/keyboard-shortcuts.mdx @@ -0,0 +1,27 @@ +--- +title: "Keyboard shortcuts" +description: "Shortcuts for the web editor" +--- + +The web editor supports all common keyboard shortcuts such as copy, paste, undo, and select all, and the following shortcuts: + +| Command | macOS | Windows | +|:--------|:------|:--------| +| **Search files** | Cmd + P | Control + P | +| **Add link to highlighted text** | Cmd + K | Control + K | +| **Add line break** | Cmd + Enter | Control + Enter | +| **Bold** | Cmd + B | Control + B | +| **Italic** | Cmd + I | Control + I | +| **Underline** | Cmd + U | Control + U | +| **Strikethrough** | Cmd + Shift + S | Control + Shift + S | +| **Code** | Cmd + E | Control + E | +| **Normal text** | Cmd + Alt + 0 | Control + Alt + 0 | +| **Heading 1** | Cmd + Alt + 1 | Control + Alt + 1 | +| **Heading 2** | Cmd + Alt + 2 | Control + Alt + 2 | +| **Heading 3** | Cmd + Alt + 3 | Control + Alt + 3 | +| **Heading 4** | Cmd + Alt + 4 | Control + Alt + 4 | +| **Ordered list** | Cmd + Shift + 7 | Control + Shift + 7 | +| **Unordered list** | Cmd + Shift + 8 | Control + Shift + 8 | +| **Blockquote** | Cmd + Shift + B | Control + Shift + B | +| **Subscript** | Cmd + , | Control + , | +| **Superscript** | Cmd + . | Control + . | diff --git a/editor/publishing.mdx b/editor/publishing.mdx new file mode 100644 index 000000000..8580c201f --- /dev/null +++ b/editor/publishing.mdx @@ -0,0 +1,73 @@ +--- +title: "Publishing your changes" +description: "Deploy your documentation updates directly to production or through pull requests" +--- + +How your changes are published depends on which branch you are working on: + +* **Deployment branch**: Publishing updates your live site immediately. +* **Other branches**: Publishing creates a pull request so you can review changes before they are deployed to production. + + + The publish button emphasized in the Mintlify web editor + The publish button emphasized in the Mintlify web editor + + +## 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. + + + Even if you're working solo, pull requests are valuable for previewing changes and maintaining a clear history of updates. + + +### Creating a pull request + + + + Make sure all your changes are saved on your branch using **Save Changes**. + + + Select **Publish Pull Request** in the top-right corner of the editor. + + + Write a clear title and description explaining: + - What changes you made + - Why you made them + - Any specific areas that need review + + + Select **Publish Pull Request**. The editor will provide a link to view your pull request. + + + Publish pull request button emphasized in the Mintlify web editor + Publish pull request button emphasized in the Mintlify web editor + + + + +## Reviewing pull requests + +Once your pull request is created: + +1. **Review changes**: You and your team members can review your pull request in your Git provider like GitHub or GitLab. +2. **Leave feedback**: Add comments or request changes. +3. **Make additional changes**: Make additional changes in the web editor. When you save changes, the editor pushes them to your pull request. +4. **Approve**: Approve the pull request when you're satisfied with the changes. +5. **Merge**: Merge the pull request when you're ready to deploy your changes to production. diff --git a/editor/troubleshooting.mdx b/editor/troubleshooting.mdx new file mode 100644 index 000000000..6047a0a33 --- /dev/null +++ b/editor/troubleshooting.mdx @@ -0,0 +1,52 @@ +--- +title: "Troubleshooting the web editor" +sidebarTitle: "Troubleshooting" +description: "Solutions to common issues" +--- + +Find solutions to common issues you might encounter while using the web editor. + + + + **Possible causes:** + - Deployment is still in progress + - Browser caching issues + - Build or deployment errors + + **Solutions:** + 1. Check deployment status in your dashboard. + 2. Hard refresh your browser (Ctrl + F5 or Cmd + Shift + R) + 3. Clear your browser cache. + + + + **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. + + + **Possible causes:** + - Network connectivity problems + - Large documentation repositories + + **Solutions:** + 1. Check your internet connection. + 2. Refresh the page. + 3. Contact support if the issue persists. + + + **Possible causes:** + - Invalid MDX syntax in files + - Missing or corrupted files + - Large file sizes causing timeouts + + **Solutions:** + 1. Check the file syntax for MDX formatting errors + 2. Verify the file exists in your repository. + +