Document live snippet rendering in visual editor

create/reusable-snippets.mdx

@@ -4,7 +4,7 @@
 keywords: ["content snippets", "reusable content", "variables"]
 ---
 
 One of the core principles of software development is DRY (Don't Repeat Yourself), which applies to documentation too. If you find yourself repeating the same content in multiple places, create a custom snippet for that content. Snippets contain content that you can import into other files to reuse. You control where the snippet appears on a page. If you ever need to update the content, you only need to edit the snippet rather than every file where the snippet is used.
 
 ## How snippets work
 
@@ -12,6 +12,8 @@
 
 When you import a snippet into another file, the snippet only appears where you import it and does not render as a standalone page. Any file in the `/snippets/` folder is always a snippet even if it is not imported into another file.
 
+Snippets and React components render with live previews in the visual editor, showing exactly how they will appear when published.
+
 ## Create snippets
 
 Create a file with the content you want to reuse. Snippets can contain all content types supported by Mintlify and they can import other snippets.
@@ -132,7 +134,7 @@
     ```
 
 <Note>
   When creating JSX snippets, use arrow function syntax (`=>`) rather than function declarations. The `function` keyword is not supported in snippets.
 </Note>
 
 2. Import the snippet.

editor/pages.mdx

@@ -16,7 +16,7 @@
 
 1. Click the **+** button in the navigation element where you want to add a page.
 1. Click **Add a page**.
 1. Enter a file name. The editor adds the `.mdx` extension automatically.
 
 ## Edit content
 
@@ -29,14 +29,16 @@
 
 ### Visual mode
 
 Edit content with real-time previews that show how the content looks when it is 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.
 - **Insert links**: Select text and press <kbd>Cmd</kbd> + <kbd>K</kbd>.
 
+The visual editor renders snippets and React components with live previews, showing exactly how they will appear when published.
+
 See [Components](/components) documentation for the complete list of available components.
 
 ### Markdown mode
@@ -44,7 +46,7 @@
 Edit the MDX source code.
 
 - **Direct MDX editing**: Write MDX and Markdown syntax for precise control over content.
 - **Syntax highlighting**: Code is highlighted for readability.
 - **Component properties**: Set component properties and configurations.
 - **Frontmatter**: Edit page metadata at the top of the file.
 
@@ -67,7 +69,7 @@
 
 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.
 
@@ -75,13 +77,13 @@
 
 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 files
 
 To move files in your navigation, drag and drop them to your desired location.
 
 To duplicate or delete files, right-click the file and select the desired action.