@intlayer/docs 6.0.1 → 6.0.2-canary.0

package/docs/es/intlayer_CMS.md

@@ -1,11 +1,11 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
-title: CMS Intlayer | Externe tu contenido en el CMS Intlayer
-description: Externe tu contenido en el CMS Intlayer para delegar la gestión de tu contenido a tu equipo.
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+title: Intlayer CMS | Externaliza tu contenido en el Intlayer CMS
+description: Externaliza tu contenido en el Intlayer CMS para delegar la gestión de tu contenido a tu equipo.
 keywords:
   - CMS
-  - Editor visual
+  - Editor Visual
   - Internacionalización
   - Documentación
   - Intlayer
@@ -21,27 +21,27 @@ youtubeVideo: https://www.youtube.com/watch?v=UDDTnirwi_4
 
 # Documentación del Sistema de Gestión de Contenidos (CMS) de Intlayer
 
-<iframe title="Visual Editor + CMS for Your Web App: Intlayer Explained" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/UDDTnirwi_4?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+<iframe title="Editor Visual + CMS para tu Aplicación Web: Explicación de Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/UDDTnirwi_4?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
-El CMS de Intlayer es una aplicación que te permite externalizar el contenido de un proyecto de Intlayer.
+El CMS de Intlayer es una aplicación que te permite externalizar el contenido de un proyecto Intlayer.
 
-Para ello, Intlayer introduce el concepto de 'diccionarios remotos'.
+Para ello, Intlayer introduce el concepto de 'diccionarios distantes'.
 
 ![Interfaz del CMS de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
 
-## Entendiendo los diccionarios remotos
+## Entendiendo los diccionarios distantes
 
-Intlayer diferencia entre diccionarios 'locales' y 'remotos'.
+Intlayer diferencia entre diccionarios 'locales' y 'distantes'.
 
-- Un diccionario 'local' es un diccionario que se declara en tu proyecto de Intlayer. Como el archivo de declaración de un botón o tu barra de navegación. Externalizar este contenido no tiene sentido en este caso porque este contenido no está destinado a cambiar con frecuencia.
+- Un diccionario 'local' es un diccionario que se declara en tu proyecto Intlayer. Como el archivo de declaración de un botón, o tu barra de navegación. Externalizar tu contenido no tiene sentido en este caso porque se supone que este contenido no debe cambiar con frecuencia.
 
-- Un diccionario 'remoto' es un diccionario que se gestiona a través del CMS de Intlayer. Puede ser útil para permitir que tu equipo gestione el contenido directamente en tu sitio web, y también tiene como objetivo utilizar funciones de pruebas A/B y optimización automática de SEO.
+- Un diccionario 'distante' es un diccionario que se gestiona a través del CMS de Intlayer. Puede ser útil para permitir que tu equipo gestione el contenido directamente en tu sitio web, y también tiene como objetivo utilizar funciones de pruebas A/B y optimización automática para SEO.
 
 ## Editor visual vs CMS
 
-El [Editor Visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) es una herramienta que te permite gestionar tu contenido en un editor visual para diccionarios locales. Una vez realizado un cambio, el contenido será reemplazado en la base de código. Esto significa que la aplicación se reconstruirá y la página se recargará para mostrar el nuevo contenido.
+El editor [Intlayer Visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) es una herramienta que te permite gestionar tu contenido en un editor visual para diccionarios locales. Una vez que se realiza un cambio, el contenido será reemplazado en la base de código. Eso significa que la aplicación se reconstruirá y la página se recargará para mostrar el nuevo contenido.
 
-En contraste, el CMS de Intlayer es una herramienta que te permite gestionar tu contenido en un editor visual para diccionarios remotos. Una vez realizado un cambio, el contenido **no** impactará tu base de código. Y el sitio web mostrará automáticamente el contenido cambiado.
+En contraste, el CMS de Intlayer es una herramienta que te permite gestionar tu contenido en un editor visual para diccionarios distantes. Una vez que se realiza un cambio, el contenido **no** afectará tu base de código. Y el sitio web mostrará automáticamente el contenido modificado.
 
 ## Integración
 
@@ -67,20 +67,20 @@ En tu archivo de configuración de Intlayer, puedes personalizar los ajustes del
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  // ... otros ajustes de configuración
+  // ... otras configuraciones
   editor: {
     /**
      * Requerido
      *
      * La URL de la aplicación.
-     * Esta es la URL objetivo del editor visual.
+     * Esta es la URL a la que apunta el editor visual.
      */
     applicationURL: process.env.INTLAYER_APPLICATION_URL,
 
     /**
      * Requerido
      *
-     * Se requieren el ID del cliente y el secreto del cliente para habilitar el editor.
+     * El ID de cliente y el secreto de cliente son necesarios para habilitar el editor.
      * Permiten identificar al usuario que está editando el contenido.
      * Se pueden obtener creando un nuevo cliente en el Panel de Intlayer - Proyectos (https://intlayer.org/dashboard/projects).
      * clientId: process.env.INTLAYER_CLIENT_ID,
@@ -92,20 +92,20 @@ const config: IntlayerConfig = {
     /**
      * Opcional
      *
-     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes establecer la URL del CMS.
+     * En caso de que esté alojando el Intlayer CMS por su cuenta, puede configurar la URL del CMS.
      *
-     * La URL del CMS de Intlayer.
-     * Por defecto, está configurada como https://intlayer.org
+     * La URL del Intlayer CMS.
+     * Por defecto, está configurada a https://intlayer.org
      */
     cmsURL: process.env.INTLAYER_CMS_URL,
 
     /**
      * Opcional
      *
-     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes establecer la URL del backend.
+     * En caso de que esté alojando el Intlayer CMS por su cuenta, puede configurar la URL del backend.
      *
-     * La URL del CMS de Intlayer.
-     * Por defecto, está configurada como https://back.intlayer.org
+     * La URL del Intlayer CMS.
+     * Por defecto, está configurada a https://back.intlayer.org
      */
     backendURL: process.env.INTLAYER_BACKEND_URL,
   },
@@ -117,20 +117,20 @@ export default config;
 ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
 /** @type {import('intlayer').IntlayerConfig} */
 const config = {
-  // ... otros ajustes de configuración
+  // ... otras configuraciones
   editor: {
     /**
      * Requerido
      *
      * La URL de la aplicación.
-     * Esta es la URL objetivo del editor visual.
+     * Esta es la URL a la que apunta el editor visual.
      */
     applicationURL: process.env.INTLAYER_APPLICATION_URL,
 
     /**
      * Requerido
      *
-     * Se requieren el ID del cliente y el secreto del cliente para habilitar el editor.
+     * El ID de cliente y el secreto de cliente son necesarios para habilitar el editor.
      * Permiten identificar al usuario que está editando el contenido.
      * Se pueden obtener creando un nuevo cliente en el Panel de Intlayer - Proyectos (https://intlayer.org/dashboard/projects).
      * clientId: process.env.INTLAYER_CLIENT_ID,
@@ -142,20 +142,20 @@ const config = {
     /**
      * Opcional
      *
-     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes establecer la URL del CMS.
+     * En caso de que esté alojando el Intlayer CMS por su cuenta, puede configurar la URL del CMS.
      *
      * La URL del CMS de Intlayer.
-     * Por defecto, está configurada como https://intlayer.org
+     * Por defecto, está configurada a https://intlayer.org
      */
     cmsURL: process.env.INTLAYER_CMS_URL,
 
     /**
      * Opcional
      *
-     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes establecer la URL del backend.
+     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes configurar la URL del backend.
      *
      * La URL del CMS de Intlayer.
-     * Por defecto, está configurada como https://back.intlayer.org
+     * Por defecto, está configurada a https://back.intlayer.org
      */
     backendURL: process.env.INTLAYER_BACKEND_URL,
   },
@@ -167,20 +167,20 @@ export default config;
 ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
 /** @type {import('intlayer').IntlayerConfig} */
 const config = {
-  // ... otros ajustes de configuración
+  // ... otras configuraciones
   editor: {
     /**
      * Requerido
      *
      * La URL de la aplicación.
-     * Esta es la URL objetivo del editor visual.
+     * Esta es la URL a la que apunta el editor visual.
      */
     applicationURL: process.env.INTLAYER_APPLICATION_URL,
 
     /**
      * Requerido
      *
-     * Se requieren el ID del cliente y el secreto del cliente para habilitar el editor.
+     * El ID de cliente y el secreto de cliente son necesarios para habilitar el editor.
      * Permiten identificar al usuario que está editando el contenido.
      * Se pueden obtener creando un nuevo cliente en el Panel de Intlayer - Proyectos (https://intlayer.org/dashboard/projects).
      * clientId: process.env.INTLAYER_CLIENT_ID,
@@ -192,19 +192,20 @@ const config = {
     /**
      * Opcional
      *
-     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes establecer la URL del CMS.
+     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes configurar la URL del CMS.
      *
      * La URL del CMS de Intlayer.
-     * Por defecto, está configurada como https://intlayer.org
+     * Por defecto, está configurada a https://intlayer.org
+     */
     cmsURL: process.env.INTLAYER_CMS_URL,
 
     /**
      * Opcional
      *
-     * En caso de que estés alojando el CMS de Intlayer por tu cuenta, puedes establecer la URL del backend.
+     * En caso de que estés alojando el Intlayer CMS por tu cuenta, puedes configurar la URL del backend.
      *
-     * La URL del CMS de Intlayer.
-     * Por defecto, está configurada como https://back.intlayer.org
+     * La URL del Intlayer CMS.
+     * Por defecto, está configurada en https://back.intlayer.org
      */
     backendURL: process.env.INTLAYER_BACKEND_URL,
   },
@@ -217,11 +218,11 @@ module.exports = config;
 
 > Para ver todos los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
-## Usando el CMS
+## Uso del CMS
 
-### Sube tu configuración
+### Enviar tu configuración
 
-Para configurar el CMS de Intlayer, puedes usar los comandos del [CLI de Intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/es/intlayer_cli.md).
+Para configurar el Intlayer CMS, puedes usar los comandos del [intlayer CLI](https://github.com/aymericzip/intlayer/tree/main/docs/es/intlayer_cli.md).
 
 ```bash
 npx intlayer config push
@@ -233,11 +234,11 @@ npx intlayer config push
 npx intlayer config push --env production
 ```
 
-Este comando sube tu configuración al CMS de Intlayer.
+Este comando sube tu configuración al Intlayer CMS.
 
-### Sube un diccionario
+### Subir un diccionario
 
-Para transformar tus diccionarios locales en un diccionario remoto, puedes usar los comandos del [CLI de Intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/es/intlayer_cli.md).
+Para transformar tus diccionarios de localización en un diccionario remoto, puedes usar los comandos del [intlayer CLI](https://github.com/aymericzip/intlayer/tree/main/docs/es/intlayer_cli.md).
 
 ```bash
 npx intlayer dictionary push -d my-first-dictionary-key
@@ -249,37 +250,52 @@ npx intlayer dictionary push -d my-first-dictionary-key
 npx intlayer dictionary push -d my-first-dictionary-key --env production
 ```
 
-Este comando sube tus diccionarios de contenido iniciales, haciéndolos disponibles para su obtención y edición asincrónica a través de la plataforma de Intlayer.
+Este comando sube tus diccionarios de contenido inicial, haciéndolos disponibles para su obtención y edición asíncrona a través de la plataforma Intlayer.
+
+### Editar el diccionario
 
-### Edita el diccionario
+Luego podrás ver y gestionar tu diccionario en el [Intlayer CMS](https://intlayer.org/dashboard/content).
 
-Luego podrás ver y gestionar tu diccionario en el [CMS de Intlayer](https://intlayer.org/dashboard/content).
+## Sincronización en vivo
 
-## Recarga en caliente
+La sincronización en vivo permite que tu aplicación refleje los cambios de contenido del CMS en tiempo de ejecución. No se requiere reconstrucción ni redepliegue. Cuando está habilitada, las actualizaciones se transmiten a un servidor de sincronización en vivo que actualiza los diccionarios que tu aplicación lee.
 
-El CMS de Intlayer es capaz de recargar en caliente los diccionarios cuando se detecta un cambio.
+> Live Sync requiere una conexión continua al servidor y está disponible en el plan enterprise.
 
-Sin la recarga en caliente, será necesario un nuevo build de la aplicación para mostrar el nuevo contenido.
-Al activar la configuración [`liveSync`](https://intlayer.org/doc/concept/configuration#editor-configuration), la aplicación reemplazará automáticamente el contenido actualizado cuando sea detectado.
+Habilita Live Sync actualizando tu configuración de Intlayer:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  // ... otros ajustes de configuración
+  // ... otras configuraciones
   editor: {
-    // ... otros ajustes de configuración
-
     /**
-     * Indica si la aplicación debe recargar en caliente las configuraciones locales cuando se detecta un cambio.
-     * Por ejemplo, cuando se agrega o actualiza un nuevo diccionario, la aplicación actualizará el contenido para mostrar en la página.
+     * Habilita la recarga en caliente de las configuraciones de localización cuando se detectan cambios.
+     * Por ejemplo, cuando se añade o actualiza un diccionario, la aplicación actualiza
+     * el contenido mostrado en la página.
      *
-     * Debido a que la recarga en caliente necesita una conexión continua con el servidor, solo está disponible para clientes del plan `enterprise`.
+     * Debido a que la recarga en caliente requiere una conexión continua al servidor,
+     * solo está disponible para clientes del plan `enterprise`.
      *
      * Por defecto: false
      */
     liveSync: true,
   },
+  build: {
+    /**
+     * Controla cómo se importan los diccionarios:
+     *
+     * - "live": Los diccionarios se obtienen dinámicamente usando la API de Live Sync.
+     *   Reemplaza useIntlayer por useDictionaryDynamic.
+     *
+     * Nota: El modo live usa la API de Live Sync para obtener los diccionarios. Si la llamada a la API
+     * falla, los diccionarios se importan dinámicamente.
+     * Nota: Solo los diccionarios con contenido remoto y la bandera "live" usan el modo live.
+     * Los demás usan el modo dinámico para mejorar el rendimiento.
+     */
+    importMode: "live",
+  },
 };
 
 export default config;
@@ -288,20 +304,34 @@ export default config;
 ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
 /** @type {import('intlayer').IntlayerConfig} */
 const config = {
-  // ... otros ajustes de configuración
+  // ... otras configuraciones
   editor: {
-    // ... otros ajustes de configuración
-
     /**
-     * Indica si la aplicación debe recargar en caliente las configuraciones locales cuando se detecta un cambio.
-     * Por ejemplo, cuando se agrega o actualiza un nuevo diccionario, la aplicación actualizará el contenido para mostrar en la página.
+     * Habilita la recarga en caliente de las configuraciones de localización cuando se detectan cambios.
+     * Por ejemplo, cuando se añade o actualiza un diccionario, la aplicación actualiza
+     * el contenido mostrado en la página.
      *
-     * Debido a que la recarga en caliente necesita una conexión continua con el servidor, solo está disponible para clientes del plan `enterprise`.
+     * Debido a que la recarga en caliente requiere una conexión continua con el servidor,
+     * solo está disponible para clientes del plan `enterprise`.
      *
      * Por defecto: false
      */
     liveSync: true,
   },
+  build: {
+    /**
+     * Controla cómo se importan los diccionarios:
+     *
+     * - "live": Los diccionarios se obtienen dinámicamente usando la API de Live Sync.
+     *   Reemplaza useIntlayer por useDictionaryDynamic.
+     *
+     * Nota: El modo live usa la API de Live Sync para obtener los diccionarios. Si la llamada a la API
+     * falla, los diccionarios se importan dinámicamente.
+     * Nota: Solo los diccionarios con contenido remoto y la bandera "live" usan el modo en vivo.
+     * Otros usan el modo dinámico para mejorar el rendimiento.
+     */
+    importMode: "live",
+  },
 };
 
 export default config;
@@ -310,45 +340,188 @@ export default config;
 ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
 /** @type {import('intlayer').IntlayerConfig} */
 const config = {
-  // ... otros ajustes de configuración
+  // ... otras configuraciones
   editor: {
-    // ... otros ajustes de configuración
-
     /**
-     * Indica si la aplicación debe recargar en caliente las configuraciones locales cuando se detecta un cambio.
-     * Por ejemplo, cuando se agrega o actualiza un nuevo diccionario, la aplicación actualizará el contenido para mostrar en la página.
+     * Habilita la recarga en caliente de las configuraciones de localización cuando se detectan cambios.
+     * Por ejemplo, cuando se añade o actualiza un diccionario, la aplicación actualiza
+     * el contenido mostrado en la página.
      *
-     * Debido a que la recarga en caliente necesita una conexión continua con el servidor, solo está disponible para clientes del plan `enterprise`.
+     * Debido a que la recarga en caliente requiere una conexión continua con el servidor,
+     * solo está disponible para clientes del plan `enterprise`.
      *
      * Por defecto: false
      */
     liveSync: true,
+
+    /**
+     * El puerto del servidor Live Sync.
+     *
+     * Predeterminado: 4000
+     */
+    liveSyncPort: 4000,
+
+    /**
+     * La URL del servidor Live Sync.
+     *
+     * Predeterminado: http://localhost:{liveSyncPort}
+     */
+    liveSyncURL: "https://live.example.com",
+  },
+  build: {
+    /**
+     * Controla cómo se importan los diccionarios:
+     *
+     * - "live": Los diccionarios se obtienen dinámicamente usando la API de Live Sync.
+     *   Reemplaza useIntlayer por useDictionaryDynamic.
+     *
+     * Nota: El modo en vivo usa la API de Live Sync para obtener los diccionarios. Si la llamada a la API
+     * falla, los diccionarios se importan dinámicamente.
+     * Nota: Solo los diccionarios con contenido remoto y la bandera "live" usan el modo en vivo.
+     * Otros usan el modo dinámico para mejorar el rendimiento.
+     */
+    importMode: "live",
   },
 };
 
 module.exports = config;
 ```
 
-La recarga en caliente reemplaza el contenido tanto en el lado del servidor como en el cliente.
+Inicie el servidor Live Sync para envolver su aplicación:
+
+Ejemplo usando Next.js:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... otros scripts
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --process 'next start'",
+  },
+}
+```
+
+Ejemplo usando Vite:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... otros scripts
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --process 'vite start'",
+  },
+}
+```
+
+El servidor Live Sync envuelve su aplicación y aplica automáticamente el contenido actualizado a medida que llega.
+
+Para recibir notificaciones de cambios desde el CMS, el servidor Live Sync mantiene una conexión SSE con el backend. Cuando el contenido cambia en el CMS, el backend envía la actualización al servidor Live Sync, que escribe los nuevos diccionarios. Su aplicación reflejará la actualización en la siguiente navegación o recarga del navegador, sin necesidad de reconstrucción.
+
+Diagrama de flujo (CMS/Backend -> Servidor Live Sync -> Servidor de Aplicación -> Frontend):
+
+![Esquema de lógica de Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+Cómo funciona:
+
+![Esquema de flujo Live Sync CMS/Backend/Servidor Live Sync/Servidor de Aplicación/Frontend](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+### Flujo de trabajo de desarrollo (local)
+
+docs/ko/intlayer_CMS.md
+
+- En desarrollo, todos los diccionarios remotos se obtienen cuando la aplicación se inicia, para que puedas probar actualizaciones rápidamente.
+- Para probar Live Sync localmente con Next.js, envuelve tu servidor de desarrollo:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... otros scripts
+    "dev": "npx intlayer live --process 'next dev'",
+    // "dev": "npx intlayer live --process 'vite dev'", // Para Vite
+  },
+}
+```
+
+Habilita la optimización para que Intlayer aplique las transformaciones de importación en vivo durante el desarrollo:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  build: {
+    optimize: true,
+    importMode: "live",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  build: {
+    optimize: true,
+    importMode: "live",
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  build: {
+    optimize: true,
+    importMode: "live",
+  },
+};
+
+module.exports = config;
+```
+
+Esta configuración envuelve tu servidor de desarrollo con el servidor Live Sync, obtiene los diccionarios remotos al iniciar y transmite actualizaciones desde el CMS vía SSE. Actualiza la página para ver los cambios.
+
+Notas y restricciones:
 
-- En el lado del servidor, debes asegurarte de que el proceso de la aplicación tenga acceso de escritura al directorio `.intlayer/dictionaries`.
-- En el lado del cliente, la recarga en caliente permite que la aplicación recargue el contenido en el navegador sin necesidad de recargar la página. Sin embargo, esta función solo está disponible para componentes de cliente.
-  > Debido a que la recarga en caliente necesita una conexión continua con el servidor utilizando un `EventListener`, solo está disponible para clientes del plan `enterprise`.
+- Añade el origen de live sync a la política de seguridad de tu sitio (CSP). Asegúrate de que la URL de live sync esté permitida en `connect-src` (y en `frame-ancestors` si es relevante).
+- Live Sync no funciona con salida estática. Para Next.js, la página debe ser dinámica para recibir actualizaciones en tiempo de ejecución (por ejemplo, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` adecuadamente para evitar restricciones de solo estático).
 
-## Depuración
+Esta configuración envuelve tu servidor de desarrollo con el servidor Live Sync, obtiene diccionarios remotos al iniciar y transmite actualizaciones desde el CMS vía SSE. Actualiza la página para ver los cambios.
 
-Si encuentras algún problema con el CMS, verifica lo siguiente:
+Notas y restricciones:
 
-- La aplicación está en ejecución.
+- Añade el origen de live sync a la política de seguridad de tu sitio (CSP). Asegúrate de que la URL de live sync esté permitida en `connect-src` (y en `frame-ancestors` si es relevante).
+- Live Sync no funciona con salida estática. Para Next.js, la página debe ser dinámica para recibir actualizaciones en tiempo de ejecución (por ejemplo, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` adecuadamente para evitar restricciones de solo estático).
+- La URL de la aplicación debe coincidir con la que configuraste en la configuración del editor (`applicationURL`).
+- La URL del CMS
 
-- La configuración del [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) está correctamente establecida en tu archivo de configuración de Intlayer.
-  - Campos requeridos:
-    - La URL de la aplicación debe coincidir con la que configuraste en la configuración del editor (`applicationURL`).
-    - La URL del CMS.
+- Asegúrate de que la configuración del proyecto se haya enviado al CMS de Intlayer.
 
-- Asegúrate de que la configuración del proyecto fue subida al CMS de Intlayer.
-- El editor visual utiliza un iframe para mostrar tu sitio web. Asegúrate de que la Política de Seguridad de Contenidos (CSP) de tu sitio web permita la URL del CMS como `frame-ancestors` ('https://intlayer.org' por defecto). Revisa la consola del editor para detectar cualquier error.
+- El editor visual utiliza un iframe para mostrar tu sitio web. Asegúrate de que la Política de Seguridad de Contenidos (CSP) de tu sitio web permita la URL del CMS como `frame-ancestors` ('https://intlayer.org' por defecto). Revisa la consola del editor para cualquier error.
 
-## Historial del documento
+## Historial de Documentación
 
-- 5.5.10 - 2025-06-29: Historial inicial
+| Versión | Fecha      | Cambios                                         |
+| ------- | ---------- | ----------------------------------------------- |
+| 6.0.1   | 2025-09-22 | Añadida documentación de sincronización en vivo |
+| 6.0.0   | 2025-09-04 | Reemplazado el campo `hotReload` por `liveSync` |
+| 5.5.10  | 2025-06-29 | Historial inicial                               |