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
Enter a filename ending in `.mdx` (for example:`api-reference.mdx` or `getting-started.mdx`).
35
+
<Steptitle="Enter a filename">
36
+
Filenames must end in `.mdx`. For example,`api-reference.mdx` or `getting-started.mdx`.
41
37
</Step>
42
38
<Steptitle="Create and open">
43
-
Press <kbd>Enter</kbd> to create the file. It will open automatically in the editor, ready for content.
39
+
Press <kbd>Enter</kbd> to create the file. It will open automatically in the editor, ready for content to be added.
44
40
</Step>
45
41
</Steps>
46
42
47
-
Your new page needs frontmatter (metadata) at the top to display properly. Add this structure:
48
-
49
-
```yaml
50
-
---
51
-
title: "Your page title"
52
-
description: "Brief description for SEO and navigation"
53
-
---
54
-
```
55
-
56
-
## Editing content
57
-
58
-
### Using visual mode
59
-
60
-
Visual mode shows you exactly how your content will appear on your documentation site. It's perfect for:
61
-
62
-
- Writing and formatting text
63
-
- Adding images and media
64
-
- Creating lists and tables
65
-
- Inserting components without knowing the syntax
66
-
67
-
**Adding components**: Press <kbd>/</kbd> to open the component menu. Choose from callouts, code blocks, accordions, and other Mintlify components.
68
-
69
-
<Frame>
70
-
<img
71
-
src="/images/editor/component-menu-light.png"
72
-
alt="The unfurled component menu emphasized in the Mintlify web editor"
73
-
className="block dark:hidden"
74
-
/>
75
-
<img
76
-
src="/images/editor/component-menu-dark.png"
77
-
alt="The unfurled component menu emphasized in the Mintlify web editor"
78
-
className="hidden dark:block"
79
-
/>
80
-
</Frame>
81
-
82
-
### Using Markdown mode
83
-
84
-
Markdown mode gives you direct access to the MDX source code. Use this when you need to:
85
-
86
-
- Set specific component properties
87
-
- Work with complex nested components
88
-
- Copy and paste MDX content from other sources
89
-
- Fine-tune formatting and spacing
90
-
91
43
## Organizing your navigation
92
44
93
-
Add new pages to your site navigation by editing the`docs.json` file:
45
+
Add new pages to your site navigation by editing your`docs.json` file.
94
46
95
47
<Steps>
96
48
<Steptitle="Open docs.json">
97
49
Find and open the `docs.json` file in your root directory using the file explorer.
98
50
</Step>
99
51
<Steptitle="Locate the navigation section">
100
-
Find the `navigation` property in the JSON structure.
52
+
Find the spot in the `docs.json` file where you want to add your new page.
101
53
</Step>
102
54
<Steptitle="Add your page">
103
55
Insert your page filename (without the `.mdx` extension) in the appropriate group's `pages` array.
@@ -132,21 +84,27 @@ Add new pages to your site navigation by editing the `docs.json` file:
132
84
}
133
85
```
134
86
135
-
See the [Navigation](/navigation) documentation for advanced navigation options.
87
+
## Editing content
88
+
89
+
Make changes to your pages using visual mode or Markdown mode in the editor.
136
90
137
-
## Content best practices
91
+
In visual mode, press <kbd>/</kbd> to open the component menu. Add content blocks, callouts, code blocks, and other components to customize your documentation.
138
92
139
-
### Writing effective titles and descriptions
140
-
-**Title**: Be specific and descriptive
141
-
-**Description**: Write 1-2 sentences explaining what users will learn or accomplish
93
+
<Frame>
94
+
<img
95
+
src="/images/editor/component-menu-light.png"
96
+
alt="The unfurled component menu emphasized in the Mintlify web editor"
97
+
className="block dark:hidden"
98
+
/>
99
+
<img
100
+
src="/images/editor/component-menu-dark.png"
101
+
alt="The unfurled component menu emphasized in the Mintlify web editor"
102
+
className="hidden dark:block"
103
+
/>
104
+
</Frame>
142
105
143
-
### Structuring your content
144
-
- Start with the most important information
145
-
- Use headings to break up long sections
146
-
- Include examples and code snippets where helpful
147
-
- End with next steps or related links
106
+
In Markdown mode, you can directly edit the `MDX` of your pages. This can be helpful when you need to:
148
107
149
-
### File organization
150
-
- Group related pages in folders (like `/api/` or `/guides/`)
0 commit comments