You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For users who prefer a visual interface in their web browser. Click to jump to this section.
75
-
</Card>
39
+
### Option 1: Web editor (recommended)
76
40
77
-
## Code-based workflow
78
-
79
-
The code-based workflow integrates with your existing development environment and Git repositories. This workflow is best for technical teams who want to manage documentation alongside code.
80
-
81
-
### Install the CLI
82
-
83
-
To work locally with your documentation, install the Command Line Interface (CLI), called [mint](https://www.npmjs.com/package/mint), by running this command in your terminal:
84
-
85
-
<CodeGroup>
86
-
```bash npm
87
-
npm i -g mint
88
-
```
89
-
90
-
```bash pnpm
91
-
pnpm add -g mint
92
-
```
93
-
</CodeGroup>
94
-
95
-
<Info>
96
-
You need Node.js installed on your machine. If you encounter installation issues, check the troubleshooting guide.
97
-
</Info>
98
-
99
-
### Edit the documentation
100
-
101
-
After setting up your environment, you can start editing your documentation files. For example, update the title of the introduction page:
102
-
103
-
1. Open your repository created during onboarding.
104
-
2. Open `index.mdx` and locate the top of the file:
105
-
106
-
```mdx index.mdx
107
-
---
108
-
title: "Introduction"
109
-
description: "This is the introduction to the documentation"
110
-
---
111
-
```
112
-
113
-
3. Update the `title` field to `"Hello World"`.
114
-
115
-
```mdx index.mdx {2}
116
-
---
117
-
title: "Hello World"
118
-
description: "This is the introduction to the documentation"
119
-
---
120
-
```
121
-
122
-
### Preview the changes
123
-
124
-
To preview the changes locally, run the following command:
125
-
126
-
```bash
127
-
mint dev
128
-
```
129
-
130
-
Your preview will be available at `localhost:3000`.
When you are ready to publish your changes, push them to your repository.
140
-
141
-
Mintlify automatically detects the changes, builds your documentation, and deploys the updates to your site. Monitor the deployment status in your GitHub repository commit history or the [dashboard](https://dashboard.mintlify.com).
142
-
143
-
After the deployment completes, your latest update will be available at `<your-project-name>.mintlify.app`.
144
-
145
-
<Cardtitle="Jump to adding a custom domain"icon="arrow-down"href="#adding-a-custom-domain"horizontal>
146
-
Optionally, skip the web editor workflow and jump to adding a custom domain.
147
-
</Card>
148
-
149
-
## Web editor workflow
150
-
151
-
The web editor workflow provides a what-you-see-is-what-you-get (WYSIWYG) interface for creating and editing documentation. This workflow is best for people who want to work in their web browser without additional local development tools.
152
-
153
-
### Access the web editor
154
-
155
-
1. Log in to your [dashboard](https://dashboard.mintlify.com).
156
-
2. Select **Editor** on the left sidebar.
157
-
158
-
<Info>
159
-
If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor.
160
-
</Info>
161
-
162
-
<Frame>
163
-
<imgalt="The Mintlify web editor in the visual editor mode"src="/images/quickstart/web-editor-light.png"className="block dark:hidden" />
164
-
<imgalt="The Mintlify web editor in the visual editor mode"src="/images/quickstart/web-editor-dark.png"className="hidden dark:block" />
165
-
</Frame>
166
-
167
-
### Edit the documentation
168
-
169
-
In the web editor, you can navigate through your documentation files in the sidebar. Let's update the introduction page:
170
-
171
-
Find and select `index.mdx` in the file explorer.
172
-
173
-
Then, in the editor, update the title field to "Hello World".
41
+
1. Open the **Editor** in your dashboard
42
+
2. Select `index.mdx` from the file explorer
43
+
3. Change the title to "Hello World"
44
+
4. Click **Publish**
174
45
175
46
<Frame>
176
-
<imgalt="Editing in Web Editor"src="/images/quickstart/web-editor-editing-light.png"className="block dark:hidden" />
177
-
<imgalt="Editing in Web Editor"src="/images/quickstart/web-editor-editing-dark.png"className="hidden dark:block" />
The editor provides a rich set of formatting tools and components. Type <kbd>/</kbd> in the editor to open the command menu and access these tools.
182
-
</Tip>
183
-
184
-
### Publish your changes
185
-
186
-
When you're satisfied with your edits, select the **Publish** button in the top-right corner. Your changes are immediately deployed to your documentation site.
51
+
### Option 2: Local development
187
52
188
-
<Tip>
189
-
Use branches to preview and review changes through pull requests before deploying to your live site.
190
-
</Tip>
53
+
1. Install the CLI:
54
+
```bash
55
+
npm i -g mint
56
+
```
191
57
192
-
For more details about using the web editor, including using branches and pull requests to collaborate and preview changes, see our [web editor documentation](/editor/getting-started).
58
+
2. Edit `index.mdx` in your repository:
59
+
```mdx
60
+
---
61
+
title: "Hello World"
62
+
description: "This is the introduction to the documentation"
63
+
---
64
+
```
193
65
194
-
## Adding a custom domain
66
+
3. Preview locally:
67
+
```bash
68
+
mint dev
69
+
```
195
70
196
-
While your `<your-project-name>.mintlify.app` subdomain works well for testing and development, most teams prefer using a custom domain for production documentation.
71
+
4. Push changes to deploy automatically
197
72
198
-
To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard.
Enhance your documentation with interactive components like accordions, tabs, and code samples.
91
+
<Cardtitle="Set up API docs"icon="code"href="/api-playground/overview"horizontal>
92
+
Create interactive API references
232
93
</Card>
233
-
<Cardtitle="Set up API references"icon="code"href="/api-playground/overview"horizontal>
234
-
Create interactive API references with OpenAPI and AsyncAPI specifications.
235
-
</Card>
236
-
237
-
## Troubleshooting
238
-
239
-
If you encounter issues during the setup process, check these common troubleshooting solutions:
240
-
241
-
<AccordionGroup>
242
-
<Accordiontitle="Local preview not working">
243
-
Make sure you have Node.js v19+ installed and that you run the `mint dev` command from the directory containing your `docs.json` file.
244
-
</Accordion>
245
-
<Accordiontitle="Changes not reflecting on live site">
246
-
Deployment can take upwards to a few minutes. Check your GitHub Actions (for code-based workflow) or deployment logs in the Mintlify dashboard to ensure there are no build errors.
247
-
</Accordion>
248
-
<Accordiontitle="Custom domain not connecting">
249
-
Verify that your DNS records are set up correctly and allow sufficient time for DNS propagation (up to 48 hours). You can use tools like [DNSChecker](https://dnschecker.org) to verify your CNAME record.
![mintlify[bot]](https://avatars.githubusercontent.com/in/222410?v=4&size=40){kind=avatar}
0 commit comments