mintlify · mintlify · Sep 11, 2026 · Sep 11, 2026
diff --git a/cli/mdx-extension.mdx b/cli/mdx-extension.mdx
@@ -1,12 +1,12 @@
 ---
 title: "Mintlify MDX extension"
-description: "Install the Mintlify MDX extension for autocomplete, inline diagnostics, hover documentation, and an in-editor preview while you write MDX locally."
-keywords: ["Cursor", "MDX", "autocomplete", "diagnostics", "IntelliSense", "preview", "editor"]
+description: "Install the Mintlify MDX extension for autocomplete, inline diagnostics, hover docs, a visual editor, and an in-editor preview for writing MDX locally."
+keywords: ["Cursor", "MDX", "autocomplete", "diagnostics", "IntelliSense", "preview", "editor", "visual mode"]
 ---
 
 The Mintlify MDX extension adds language support for Mintlify projects to VS Code, Cursor, Devin Desktop, and other editors that support the VS Code extension API. The extension knows every built-in component and property, so you get autocomplete as you type, and it reports unknown components, invalid properties, and unresolved snippet imports.
 
-The extension also runs a live preview inside your editor, so you can write and see rendered output without switching to a browser.
+The extension also opens `.mdx` files in a visual editor and runs a live preview inside your editor, so you can write and see rendered output without switching to a browser.
 
 ## Prerequisites
 
@@ -34,9 +34,9 @@
 
 ## Autocomplete
 
-Type `<` to view every built-in component. Autocomplete suggests components' properties and values inside tags.
+Type `<` to view every built-in component. Autocomplete suggests components' properties and values inside tags, matching close tags after `</`, and enumerated prop values like `<Badge color="…">`.
 
-The extension suggests components that you import from [reusable snippets](/create/reusable-snippets) alongside built-in ones.
+The extension suggests components that you import from [reusable snippets](/create/reusable-snippets) alongside built-in ones. `className`, `id`, and `style` are offered on every component and HTML element, and typing inside `className="…"` suggests Tailwind utility classes, including variants like `md:` and `hover:`.
 
 ## Diagnostics
 
@@ -81,13 +81,76 @@
 
 The extension validates `docs.json` against the [Mintlify schema](https://mintlify.com/docs.json).
 
+## Visual mode
+
+Open any `.mdx` file in Visual mode to edit the page in a rich editor like the one in the Mintlify dashboard, with headings, lists, tables, links, callouts, cards, steps, tabs, accordions, code blocks, and images all editable in place.
+
+To switch between Visual mode and the text editor:
+
+- Press <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> (macOS) or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> (Windows).
+- Or use the editor picker at the right end of the breadcrumbs row.
+
+Use the gear icon in the title bar to pick which editor `.mdx` files open with by default.
+
+Markdown shortcuts work as you type (`#` for a heading, `-` for a list item, `**bold**`, `` `code` ``), and the toolbar and `/` menu insert components. Edits are written back as MDX through the same converter as [`mint format`](/cli/commands#mint-format). Components that Visual mode doesn't know are preserved as written.
+
+### Snippet forms
+
+In Visual mode, a component imported from a snippet is shown as a form with one input per prop instead of an opaque tag. Fields are inferred from the component's destructured props and defaults, so a default of `true` becomes a checkbox, `2` becomes a number box, `icon` or `logo` becomes an image path with a thumbnail, and `href` or `url` becomes a link.
+
+To control the inputs, document the component with a JSDoc `@param` comment right before the export. In `.jsx` and `.tsx` files use a `/** … */` block. In `.mdx` snippets, use an MDX comment (`{/* … */}`) so it doesn't render:
+
+```mdx
+{/*
+  A product tile with a price and a call to action.
+  @param {string} name - Product name, shown as the title
+  @param {image} [icon] - Path to a square icon under /images
+  @param {'Free' | 'Pro' | 'Enterprise'} [tier=Free] - Which plan it belongs to
+  @param {number} [seats=1] - Seats included
+  @param {boolean} [featured] - Highlight the card
+  @param {url} [href] - Where the button goes
+  @param {text} [summary] - One or two sentences under the title
+*/}
+export const ProductCard = ({ name, icon, tier = 'Free', seats = 1, featured = false, href, summary, children }) => ( ... );
+```
+
+The following types produce the matching form inputs:
+
+| Type              | Input                        |
+| ----------------- | ---------------------------- |
+| `string`          | Text box                     |
+| `text` (or `markdown`) | Multi-line text box     |
+| `boolean`         | Checkbox                     |
+| `number`          | Number box                   |
+| `'a' \| 'b'`      | Dropdown of those values     |
+| `image`           | Path box with a thumbnail    |
+| `url`             | Link box                     |
+| `color`           | Text box with a swatch       |
+| anything else     | Raw `{…}` expression         |
+
+Brackets (`[name]`) mark a prop optional. A documented prop without brackets shows a required marker. `[name=value]` supplies a default when the destructuring has none. The first line of the comment is the description shown in the form header and the **Insert** menu.
+
+`children` is never a field: the tag's body is left as written and summarized under the form. Switch to the text editor to edit it.
+
+Imported snippets also appear in the **+ Insert** menu and the `/` menu.
+
+## Docs sidebar
+
+The Mintlify view in the activity bar mirrors your `docs.json` navigation tree. Top-level products and tabs stay at the root, with their navigation nested in expandable rows. The sidebar uses icons from `docs.json` and page frontmatter, and page labels come from `sidebarTitle` or `title`. Selecting a page opens it in Visual mode.
+
+Use the **+** action to add groups, tabs, dropdowns, anchors, languages, products, and versions. Drag rows to reorder them, or drop a page on a group to move it to the top of that group. The tree moves immediately, then Mintlify saves the change to `docs.json`.
+
+The tree follows the active page and reloads when `docs.json` or a page changes.
+
 ## Preview in your editor
 
 Open an `.mdx` file and select the preview icon in the editor title bar, or right-click the file and select **Preview Mintlify**. A preview panel opens beside your editor and renders the page.
 
 The preview toolbar has back, forward, and reload buttons, an address box, and a **Follow editor** toggle. Type a path like `/quickstart` in the address box and press <kbd>Enter</kbd> to navigate to that page. With **Follow editor** on, the preview switches pages as you change files in your editor.
 
-The in-editor preview renders in an iframe, so browser find and dev tools can't reach it. Select the **Open in browser** button in the preview toolbar, or run **Mintlify: Open preview in browser**, to open the page in your browser instead.
+Press <kbd>Cmd</kbd>+<kbd>F</kbd> (macOS) or <kbd>Ctrl</kbd>+<kbd>F</kbd> (Windows) inside the preview to open a find bar for the rendered page. <kbd>Enter</kbd> and <kbd>Shift</kbd>+<kbd>Enter</kbd> step through matches. <kbd>Esc</kbd> closes the find bar.
+
+The in-editor preview renders in an iframe, so browser dev tools can't reach it. Select the **Open in browser** button in the preview toolbar, or run **Mintlify: Open preview in browser**, to open the page in your browser instead.
 
 In-editor previews require the [Mintlify CLI](/cli/install). The preview server runs on port `3939` by default so it doesn't collide with apps on port 3000. Change the port with the `mintlify.preview.port` setting.
 

diff --git a/es/cli/mdx-extension.mdx b/es/cli/mdx-extension.mdx
@@ -1,12 +1,12 @@
 ---
 title: "Extensión Mintlify MDX"
-description: "Instala la extensión Mintlify MDX para obtener autocompletado, diagnósticos en línea, documentación al pasar el cursor y vista previa en el editor."
-keywords: ["Cursor", "MDX", "autocompletado", "diagnósticos", "IntelliSense", "previsualización", "editor"]
+description: "Instala la extensión Mintlify MDX para autocompletado, diagnósticos, documentación al pasar el cursor, editor visual y previsualización en el editor."
+keywords: ["Cursor", "MDX", "autocompletado", "diagnósticos", "IntelliSense", "previsualización", "editor", "modo visual"]
 ---
 
 La extensión Mintlify MDX agrega compatibilidad de lenguaje para proyectos de Mintlify a VS Code, Cursor, Devin Desktop y otros editores compatibles con la API de extensiones de VS Code. La extensión conoce todos los componentes y propiedades integrados, por lo que obtienes autocompletado mientras escribes, y reporta componentes desconocidos, propiedades inválidas e importaciones de snippets sin resolver.
 
-La extensión también ejecuta una previsualización en vivo dentro de tu editor, para que puedas escribir y ver el resultado renderizado sin cambiar a un navegador.
+La extensión también abre archivos `.mdx` en un editor visual y ejecuta una previsualización en vivo dentro de tu editor, para que puedas escribir y ver el resultado renderizado sin cambiar a un navegador.
 
 <div id="prerequisites">
   ## Requisitos previos
@@ -40,9 +40,9 @@ La extensión se activa cuando abres un archivo `.mdx` o un espacio de trabajo q
   ## Autocompletado
 </div>
 
-Escribe `<` para ver todos los componentes integrados. El autocompletado sugiere las propiedades y los valores de los componentes dentro de las etiquetas.
+Escribe `<` para ver todos los componentes integrados. El autocompletado sugiere las propiedades y los valores de los componentes dentro de las etiquetas, sugerencias de etiquetas de cierre después de `</` y valores enumerados de propiedades como `<Badge color="…">`.
 
-La extensión sugiere los componentes que importas desde [snippets reutilizables](/es/create/reusable-snippets) junto con los integrados.
+La extensión sugiere los componentes que importas desde [snippets reutilizables](/es/create/reusable-snippets) junto con los integrados. `className`, `id` y `style` se ofrecen en todos los componentes y elementos HTML, y al escribir dentro de `className="…"` se sugieren clases de utilidad de Tailwind, incluidas variantes como `md:` y `hover:`.
 
 <div id="diagnostics">
   ## Diagnósticos
@@ -97,6 +97,73 @@ Usa los chevrones del margen para plegar regiones de una página:
 
 La extensión valida `docs.json` contra el [esquema de Mintlify](https://mintlify.com/docs.json).
 
+<div id="visual-mode">
+  ## Modo visual
+</div>
+
+Abre cualquier archivo `.mdx` en Modo visual para editar la página en un editor enriquecido como el del panel de Mintlify, con encabezados, listas, tablas, enlaces, avisos, tarjetas, pasos, pestañas, acordeones, bloques de código e imágenes editables en el sitio.
+
+Para alternar entre el Modo visual y el editor de texto:
+
+- Presiona <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> (macOS) o <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd> (Windows).
+- O usa el selector de editor en el extremo derecho de la fila de migas de pan.
+
+Usa el icono de engranaje en la barra de título para elegir con qué editor se abren de forma predeterminada los archivos `.mdx`.
+
+Los atajos de Markdown funcionan mientras escribes (`#` para un encabezado, `-` para un elemento de lista, `**negrita**`, `` `código` ``), y la barra de herramientas y el menú `/` insertan componentes. Las ediciones se escriben de vuelta como MDX a través del mismo conversor que [`mint format`](/es/cli/commands#mint-format). Los componentes que el Modo visual no conoce se conservan tal como están escritos.
+
+<div id="snippet-forms">
+  ### Formularios de snippets
+</div>
+
+En el Modo visual, un componente importado desde un snippet se muestra como un formulario con una entrada por prop en lugar de una etiqueta opaca. Los campos se infieren a partir de los props desestructurados del componente y sus valores predeterminados, de modo que un valor predeterminado de `true` se convierte en una casilla, `2` en un cuadro numérico, `icon` o `logo` en una ruta de imagen con miniatura, y `href` o `url` en un enlace.
+
+Para controlar las entradas, documenta el componente con un comentario JSDoc `@param` justo antes del export. En archivos `.jsx` y `.tsx`, usa un bloque `/** … */`. En snippets `.mdx`, usa un comentario MDX (`{/* … */}`) para que no se renderice:
+
+```mdx
+{/*
+  A product tile with a price and a call to action.
+  @param {string} name - Product name, shown as the title
+  @param {image} [icon] - Path to a square icon under /images
+  @param {'Free' | 'Pro' | 'Enterprise'} [tier=Free] - Which plan it belongs to
+  @param {number} [seats=1] - Seats included
+  @param {boolean} [featured] - Highlight the card
+  @param {url} [href] - Where the button goes
+  @param {text} [summary] - One or two sentences under the title
+*/}
+export const ProductCard = ({ name, icon, tier = 'Free', seats = 1, featured = false, href, summary, children }) => ( ... );
+```
+
+Los siguientes tipos producen las entradas de formulario correspondientes:
+
+| Tipo              | Entrada                                |
+| ----------------- | -------------------------------------- |
+| `string`          | Cuadro de texto                        |
+| `text` (o `markdown`) | Cuadro de texto multilínea         |
+| `boolean`         | Casilla de verificación                |
+| `number`          | Cuadro numérico                        |
+| `'a' \| 'b'`      | Menú desplegable con esos valores      |
+| `image`           | Cuadro de ruta con miniatura           |
+| `url`             | Cuadro de enlace                       |
+| `color`           | Cuadro de texto con una muestra        |
+| cualquier otro    | Expresión `{…}` sin procesar           |
+
+Los corchetes (`[name]`) marcan un prop como opcional. Un prop documentado sin corchetes muestra un marcador de requerido. `[name=value]` proporciona un valor predeterminado cuando la desestructuración no tiene ninguno. La primera línea del comentario es la descripción que se muestra en el encabezado del formulario y en el menú **Insert**.
+
+`children` nunca es un campo: el cuerpo de la etiqueta se deja tal como está escrito y se resume debajo del formulario. Cambia al editor de texto para editarlo.
+
+Los snippets importados también aparecen en los menús **+ Insert** y `/`.
+
+<div id="docs-sidebar">
+  ## Barra lateral de documentación
+</div>
+
+La vista de Mintlify en la barra de actividad refleja el árbol de navegación de tu `docs.json`. Los productos y las pestañas de nivel superior permanecen en la raíz, con su navegación anidada en filas expandibles. La barra lateral usa iconos de `docs.json` y del frontmatter de las páginas, y las etiquetas de las páginas provienen de `sidebarTitle` o `title`. Al seleccionar una página se abre en el Modo visual.
+
+Usa la acción **+** para agregar grupos, pestañas, menús desplegables, anclas, idiomas, productos y versiones. Arrastra filas para reordenarlas o suelta una página sobre un grupo para moverla al inicio de ese grupo. El árbol se mueve de inmediato y luego Mintlify guarda el cambio en `docs.json`.
+
+El árbol sigue a la página activa y se recarga cuando cambian `docs.json` o una página.
+
 <div id="preview-in-your-editor">
   ## Previsualización en tu editor
 </div>
@@ -105,7 +172,9 @@ Abre un archivo `.mdx` y selecciona el icono de previsualización en la barra de
 
 La barra de herramientas de la previsualización tiene botones de atrás, adelante y recargar, un cuadro de dirección y un interruptor **Follow editor**. Escribe una ruta como `/quickstart` en el cuadro de dirección y presiona <kbd>Enter</kbd> para navegar a esa página. Con **Follow editor** activado, la previsualización cambia de página a medida que cambias de archivo en tu editor.
 
-La previsualización en el editor se renderiza en un iframe, por lo que la búsqueda del navegador y las herramientas de desarrollo no pueden acceder a ella. Selecciona el botón **Open in browser** en la barra de herramientas de la previsualización, o ejecuta **Mintlify: Open preview in browser**, para abrir la página en tu navegador.
+Presiona <kbd>Cmd</kbd>+<kbd>F</kbd> (macOS) o <kbd>Ctrl</kbd>+<kbd>F</kbd> (Windows) dentro de la previsualización para abrir una barra de búsqueda de la página renderizada. <kbd>Enter</kbd> y <kbd>Shift</kbd>+<kbd>Enter</kbd> permiten recorrer las coincidencias. <kbd>Esc</kbd> cierra la barra de búsqueda.
+
+La previsualización en el editor se renderiza en un iframe, por lo que las herramientas de desarrollo del navegador no pueden acceder a ella. Selecciona el botón **Open in browser** en la barra de herramientas de la previsualización, o ejecuta **Mintlify: Open preview in browser**, para abrir la página en tu navegador.
 
 Las previsualizaciones en el editor requieren la [CLI de Mintlify](/es/cli/install). El servidor de previsualización se ejecuta en el puerto `3939` de forma predeterminada para no entrar en conflicto con aplicaciones en el puerto 3000. Cambia el puerto con la configuración `mintlify.preview.port`.