> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Primeros pasos con el editor web

> Aprende a crear y editar documentación con el editor web

<img className="block dark:hidden my-0 pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/editor-light.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=f5b9307f62ca5d00a4cb58ced31f4ba6" alt="Interfaz del editor web de Mintlify en modo claro" width="1184" height="320" data-path="images/editor/editor-light.png" />

<img className="hidden dark:block my-0 pointer-events-none" src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/editor-dark.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=ed4f1674ab628904a760aae6779425bd" alt="Interfaz del editor web de Mintlify en modo oscuro" width="1184" height="320" data-path="images/editor/editor-dark.png" />

El editor web es una interfaz visual para crear, editar y revisar documentación directamente en tu navegador.

* **Edición visual**: Realiza cambios en tu documentación con un editor WYSIWYG (what you see is what you get) que muestra cómo se verá tu contenido al publicarse.
* **Sincronización con Git**: Todos los cambios se sincronizan automáticamente con tu repositorio de Git para mantener el control de versiones.
* **Colaboración en equipo**: Varias personas pueden trabajar en la documentación simultáneamente.
* **Integración de componentes**: Agrega avisos, bloques de código y otros componentes con comandos de barra inclinada.
* **Sin configuración**: Comienza a escribir de inmediato desde tu dashboard.

<div id="web-editor-workflow">
  ## Flujo de trabajo del editor web
</div>

Así es como normalmente trabajarás en el editor web:

<Steps>
  <Step title="Elige tu branch">
    Crea un branch o realiza cambios directamente en tu rama de implementación. Recomendamos crear un branch para que puedas previsualizar tus cambios antes de que se publiquen.
  </Step>

  <Step title="Abre tu archivo">
    Ve a un archivo existente en la barra lateral o crea uno nuevo usando el explorador de archivos.
  </Step>

  <Step title="Edita tu contenido">
    Realiza cambios en el editor web. Prueba alternar entre el modo visual y el Modo Markdown usando el interruptor en la esquina superior derecha para ver qué modo prefieres.
  </Step>

  <Step title="Previsualiza tus cambios">
    El modo visual te muestra cómo se verán tus cambios en tu sitio en producción. Úsalo para verificar que todo se vea correcto.
  </Step>

  <Step title="Publica tus cambios">
    Si estás trabajando en tu rama de implementación, publica tus cambios directamente desde el editor web. En otros branches, crea una solicitud de extracción para revisión antes de publicar.
  </Step>
</Steps>

<div id="editor-modes">
  ## Modos del editor
</div>

El editor web tiene dos modos para adaptarse a distintas preferencias y necesidades de edición. Usa el conmutador en la esquina superior derecha de la barra de herramientas del editor para cambiar entre modos de edición.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/mode-toggle-light.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=eaf266da91f2e616c73564c49bbee776" alt="Iconos del conmutador de modo resaltados en el editor web." className="block dark:hidden" width="3024" height="1216" data-path="images/editor/mode-toggle-light.png" />

  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/mode-toggle-dark.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=1177b32348eb6209abc5a89000d00bc3" alt="Iconos del conmutador de modo resaltados en el editor web." className="hidden dark:block" width="3016" height="1212" data-path="images/editor/mode-toggle-dark.png" />
</Frame>

<div id="visual-mode">
  ### Modo visual
</div>

El modo visual ofrece una experiencia WYSIWYG (lo que ves es lo que obtienes) en la que los cambios que haces en el editor son los mismos que se publicarán en tu sitio de documentación. Este modo es ideal cuando quieres ver en tiempo real cómo se verán tus cambios.

Pulsa “/” para abrir el menú de componentes y añadir contenido con estilo, avisos, fragmentos de código u otros componentes.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/1pfjDJXEL6HIHDKE/images/editor/visual-mode-light.png?fit=max&auto=format&n=1pfjDJXEL6HIHDKE&q=85&s=af73ef24f74aa0634b32c77f6b3c5f3c" alt="Modo de edición visual en el editor web de Mintlify" className="block dark:hidden" width="3024" height="1232" data-path="images/editor/visual-mode-light.png" />

  <img src="https://mintcdn.com/omer-914cc1c6/1pfjDJXEL6HIHDKE/images/editor/visual-mode-dark.png?fit=max&auto=format&n=1pfjDJXEL6HIHDKE&q=85&s=d810bd3db962d058f86871e4e16e9b0e" alt="Modo de edición visual en el editor web de Mintlify" className="hidden dark:block" width="3018" height="1226" data-path="images/editor/visual-mode-dark.png" />
</Frame>

<div id="markdown-mode">
  ### Modo Markdown
</div>

Markdown mode proporciona acceso directo al código `MDX` subyacente de tu documentación. Este modo es ideal cuando necesitas un control preciso sobre las propiedades de los componentes o cuando prefieres escribir con la sintaxis de Markdown.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/markdown-mode-light.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=10cb0a57a11e812861cea36cc2c0088e" alt="Markdown mode en el editor web de Mintlify" className="block dark:hidden" width="3024" height="1248" data-path="images/editor/markdown-mode-light.png" />

  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/editor/markdown-mode-dark.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=fb0d0dd0f4d18b85376e5ff10c068a41" alt="Markdown mode en el editor web de Mintlify" className="hidden dark:block" width="3016" height="1246" data-path="images/editor/markdown-mode-dark.png" />
</Frame>

<div id="next-steps">
  ## Próximos pasos
</div>

* Aprende los conceptos fundamentales de [Git](/es/editor/git-concepts).
* Aprende las prácticas recomendadas para colaborar con [branches](/es/editor/branches).
* Explora la [gestión de contenido](/es/editor/content-management) con el editor web.
* Comprende las [opciones de publicación](/es/editor/publishing) para distintos escenarios.