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

# Vista previa en vivo

> Previsualice su sitio en tiempo real mientras edita, con actualizaciones continuas que renderizan al instante los cambios de contenido y configuración.

Previsualice su sitio mientras edita. Las vistas previas en vivo renderizan las páginas exactamente como se ven cuando se publican. Se actualizan a medida que realiza cambios en el contenido, la navegación y la configuración.

<div id="open-live-preview">
  ## Abrir la vista previa en vivo
</div>

Haga clic en el botón <Icon icon="play" /> de vista previa en vivo en la barra superior. La vista previa se abre en una nueva pestaña del navegador o dentro del editor. La ubicación depende de la preferencia **Open live preview in new tab** en la [configuración del editor](/es/editor/settings).

Cuando la vista previa se abre dentro del editor, haga clic en **Site settings** en la barra de herramientas de la vista previa. Así puede editar la configuración de su sitio sin salir de la vista previa.

<Frame>
  <img src="https://mintcdn.com/tomee-mintlify-live-preview-site-settings/7qkypuvCQNO31vQw/images/editor/live-preview-light.png?fit=max&auto=format&n=7qkypuvCQNO31vQw&q=85&s=bfbcb45e131cfb3a3c7f53f645d3f368" alt="El botón de vista previa en vivo en la barra de herramientas." className="block dark:hidden" width="464" height="192" data-path="images/editor/live-preview-light.png" />

  <img src="https://mintcdn.com/tomee-mintlify-live-preview-site-settings/7qkypuvCQNO31vQw/images/editor/live-preview-dark.png?fit=max&auto=format&n=7qkypuvCQNO31vQw&q=85&s=de65e3115515e237f3e68f63833daea6" alt="El botón de vista previa en vivo en la barra de herramientas." className="hidden dark:block" width="467" height="192" data-path="images/editor/live-preview-dark.png" />
</Frame>

<div id="edit-site-settings-in-live-preview">
  ## Editar la configuración del sitio en la vista previa en vivo
</div>

Use el inspector de **Site settings** para ajustar la configuración del sitio mientras comprueba el resultado renderizado. Contiene las mismas secciones que el panel de [Configuraciones del sitio](/es/editor/configurations).

1. Abra la vista previa en vivo dentro del editor.
2. Haga clic en **Site settings** en la barra de herramientas de la vista previa.
3. Seleccione una sección de configuración y edite sus opciones.
4. Cierre el inspector con **Close site settings** para volver a la vista previa.

La vista previa se actualiza mientras edita. Si su preferencia abre la vista previa en una nueva pestaña, desactive **Open live preview in new tab** en la [configuración del editor](/es/editor/settings) para usar el inspector.

<div id="ask-the-agent-in-live-preview">
  ## Preguntar al agente en la vista previa en vivo
</div>

Haga clic en **Ask agent** en la barra de herramientas de la vista previa para abrir el [agente del editor](/es/editor/agent) junto a la vista previa en vivo. Al abrir el agente, se cierra el panel de Site settings. Al abrir Site settings, se cierra el agente. Los usuarios con el rol de viewer no ven el botón **Ask agent**.

<div id="live-preview-versus-preview-deployments">
  ## Vista previa en vivo frente a despliegues de vista previa
</div>

|                    | Vista previa en vivo                | Despliegue de vista previa                    |
| ------------------ | ----------------------------------- | --------------------------------------------- |
| **Velocidad**      | Al instante                         | Requiere una compilación                      |
| **Acceso**         | URL local                           | URL para compartir                            |
| **Cuándo usarla**  | Para revisar cambios mientras edita | Para compartir con su equipo para su revisión |
| **Disponibilidad** | Mientras el editor esté abierto     | Mientras exista la branch                     |

Use la vista previa en vivo para obtener retroalimentación inmediata mientras edita. Cuando necesite compartir cambios con su equipo, use un [despliegue de vista previa](/es/editor/branching-and-publishing#preview-your-changes). También puede usarlo para probar los cambios en un dispositivo diferente.