@intlayer/docs 9.0.0-canary.9 → 9.0.1

package/docs/es/intlayer_with_vite+svelte.md

@@ -133,19 +133,19 @@ Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-vi
 Instala los paquetes necesarios usando npm:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.

package/docs/es/intlayer_with_vite+vanilla.md

@@ -119,19 +119,19 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
 Instala los paquetes necesarios usando npm:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.

package/docs/es/intlayer_with_vite+vue.md

@@ -91,7 +91,7 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
 
 <Tabs defaultTab="video">
   <Tab label="Vídeo" value="video">
-  
+
 <iframe title="The best i18n solution for Vite y Vue? Discover 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/IE3XWkZ6a5U?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>
@@ -128,19 +128,19 @@ Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-vi
 Instala los paquetes necesarios usando npm:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.

package/docs/es/live-sync.md

@@ -0,0 +1,176 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: Sincronización en vivo | Refleja los cambios de contenido del CMS en tiempo real
+description: Permite que tu aplicación refleje los cambios de contenido del CMS de Intlayer en tiempo de ejecución, sin necesidad de reconstruir ni volver a implementar.
+keywords:
+  - Sincronización en vivo
+  - Live Sync
+  - CMS
+  - Editor Visual
+  - Internacionalización
+  - Documentación
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Trasladado desde la documentación del CMS de Intlayer a su propia página"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "Añadida documentación de sincronización en vivo"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "Reemplazado el campo `hotReload` por `liveSync`"
+author: aymericzip
+---
+
+# Sincronización en vivo
+
+La sincronización en vivo permite que tu aplicación refleje los cambios de contenido del CMS en runtime. 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.
+
+## Tabla de contenidos
+
+<TOC/>
+
+---
+
+## Activar la sincronización en vivo
+
+> Live Sync requiere una conexión continua al servidor y está disponible en el plan enterprise.
+
+Habilita Live Sync actualizando tu configuración de Intlayer:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... otras configuraciones
+  editor: {
+    /**
+     * 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 requiere una conexión continua al servidor,
+     * solo está disponible para clientes del plan `enterprise`.
+     *
+     * Por defecto: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * 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: "fetch",
+  },
+};
+
+export default config;
+```
+
+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 --with 'next start'",
+  },
+}
+```
+
+Ejemplo usando Vite:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... otros scripts
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with '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 --with 'next dev'",
+    // "dev": "npx intlayer live --with '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", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true,
+  },
+};
+
+export default 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
+
+- 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 runtime (por ejemplo, usa `generateStaticParams`, `generateMetadata`, `getServerSideProps` o `getStaticProps` adecuadamente para evitar restricciones de solo estático).
+- En el CMS, cada diccionario tiene una bandera `live`. Solo los diccionarios con `live=true` se obtienen a través de la API de live sync; los demás se importan dinámicamente y permanecen sin cambios en tiempo de ejecución.
+- La bandera `live` se evalúa para cada diccionario en el momento de la compilación. Si el contenido remoto no estaba marcado como `live=true` durante la compilación, debes recompilar para habilitar Live Sync para ese diccionario.
+- El servidor de live sync debe poder escribir en `.intlayer`. En contenedores, asegura el acceso de escritura a `/.intlayer`.
+
+## Enlaces útiles
+
+- [CMS de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md)
+- [Editor Visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md)
+- [Referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md)
+- [Guía de Auto-alojamiento](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md)

package/docs/es/migration_from_i18next_to_intlayer.md

@@ -99,19 +99,19 @@ Los siguientes pasos son el mínimo requerido para que tu aplicación `i18next`
 Instala los paquetes principales de Intlayer y el adaptador de compatibilidad:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.

package/docs/es/migration_from_next-i18next_to_intlayer.md

@@ -102,19 +102,19 @@ Los siguientes pasos son el mínimo requerido para que tu aplicación Next.js Pa
 Instala los paquetes principales de Intlayer y los adaptadores de compatibilidad:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.

package/docs/es/migration_from_next-intl_to_intlayer.md

@@ -98,19 +98,19 @@ Los siguientes pasos son el mínimo requerido para que tu aplicación `next-intl
 Instala los paquetes principales de Intlayer y el adaptador de compatibilidad `@intlayer/next-intl`:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
@@ -184,9 +184,7 @@ import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";
 
 const withIntlayer = createNextIntlPlugin();
 
-const nextConfig: NextConfig = {
-  /* tus opciones de configuración existentes */
-};
+const nextConfig: NextConfig = {/* tus opciones de configuración existentes */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/es/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -101,19 +101,19 @@ Los siguientes pasos son el mínimo requerido para que tu aplicación Nuxt exist
 Instala los paquetes principales de Intlayer y el adaptador de compatibilidad:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.

package/docs/es/migration_from_react-i18next_to_intlayer.md

@@ -101,19 +101,19 @@ Los siguientes pasos son el mínimo requerido para que tu aplicación `react-i18
 Instala los paquetes principales de Intlayer y los adaptadores de compatibilidad:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
@@ -209,9 +209,7 @@ import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
 
 const withIntlayer = createNextI18nPlugin();
 
-const nextConfig: NextConfig = {
-  /* tus opciones */
-};
+const nextConfig: NextConfig = {/* tus opciones */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/es/migration_from_vue-i18n_to_intlayer.md

@@ -100,19 +100,19 @@ Los siguientes pasos son el mínimo requerido para que tu aplicación `vue-i18n`
 Instala los paquetes principales de Intlayer y el adaptador de compatibilidad:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.