@intlayer/docs 9.5.5 → 9.5.7

package/docs/es/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-03-24
+updatedAt: 2026-09-21
 title: Contenido HTML
 description: Aprende a declarar y utilizar contenido HTML con componentes personalizados en Intlayer. Sigue esta documentación para incrustar contenido enriquecido tipo HTML con reemplazo dinámico de componentes en tu proyecto internacionalizado.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -235,6 +237,83 @@ Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    En Remix 3, los nodos HTML se resuelven en una cadena HTML. Inyéctala con la prop `innerHTML` de Remix JSX, o con `html.raw` en una vista `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return <div innerHTML={myHtmlContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return html.raw`<div>${myHtmlContent.value}</div>`;
+    };
+    ```
+
+    > Remix escapa los valores interpolados por defecto. `innerHTML` y `html.raw` son las dos opciones de exclusión, que es lo que necesita una cadena HTML.
+
+    Usa el método `.use()` para anular etiquetas o mapear componentes personalizados. Las anulaciones son funciones que devuelven una cadena HTML:
+
+    ```tsx
+    <div
+      innerHTML={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    En Astro, los nodos HTML se resuelven en una cadena HTML. Inyéctala con la directiva `set:html` en la plantilla, o con `innerHTML` en un `<script>` del cliente.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myHtmlContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myHtmlContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myHtmlContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myHtmlContent.value;
+    </script>
+    ```
+
+    > Astro escapa las `{expresiones}` por defecto. `set:html` es la opción de exclusión, que es lo que necesita una cadena HTML.
+
+    Usa el método `.use()` para anular etiquetas o mapear componentes personalizados. Las anulaciones son funciones que devuelven una cadena HTML:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configuración Global con `HTMLProvider`
@@ -470,6 +549,41 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix no tiene un árbol de componentes para contener un proveedor, por lo que la configuración se instala una vez, como un singleton, al inicio del servidor. Configura el renderizador devuelto por `useHTMLRenderer()`. Los nodos `html` devueltos por `useIntlayer` se renderizan tal cual; anula sus etiquetas por nodo con `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Usa `installIntlayerHTMLDynamic(async () => …)` para cargar el renderizador de forma perezosa; el cargador solo se ejecuta en la primera llamada.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro no tiene un árbol de componentes para contener un proveedor, por lo que la configuración se instala una vez, como un singleton, en el middleware (servidor) y en un `<script>` del cliente (navegador). Configura el renderizador devuelto por `useHTMLRenderer()`. Los nodos `html` devueltos por `useIntlayer` se renderizan tal cual; anula sus etiquetas por nodo con `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Se ejecuta una vez cuando el servidor se inicia; el middleware de Intlayer es
+    // registrado por la integración, antes de este archivo.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Usa `installIntlayerHTMLDynamic(async () => …)` para cargar el renderizador de forma perezosa; el cargador solo se ejecuta en la primera llamada.
+
+  </Tab>
 </Tabs>
 
 ### Renderizado Manual y Herramientas Avanzadas
@@ -642,15 +756,69 @@ Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useHTMLRenderer()`
+
+    Obtén una función de renderizado preconfigurada por `installIntlayerHTML()`. Devuelve una cadena HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### Utilidad `renderHTML()`
+
+    Utilidad independiente que ignora la configuración global.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useHTMLRenderer()`
+
+    Obtén una función de renderizado preconfigurada por `installIntlayerHTML()`. Devuelve una cadena HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### Utilidad `renderHTML()`
+
+    Utilidad independiente que ignora la configuración global.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Referencia de Opciones
 
 Estas opciones se pueden pasar a `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` y `renderHTML`.
 
-| Opción       | Tipo                  | Por Defecto | Descripción                                                                                                                                 |
-| :----------- | :-------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------ |
-| `components` | `Record<string, any>` | `{}`        | Un mapa de etiquetas HTML o nombres de componentes personalizados a componentes.                                                            |
-| `renderHTML` | `Function`            | `null`      | Una función de renderizado personalizada para reemplazar completamente el parser HTML predeterminado (Solo para proveedores de Vue/Svelte). |
+| Opción       | Tipo                  | Por Defecto | Descripción                                                                                                                                       |
+| :----------- | :-------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `components` | `Record<string, any>` | `{}`        | Un mapa de etiquetas HTML o nombres de componentes personalizados a componentes.                                                                  |
+| `renderHTML` | `Function`            | `null`      | Una función de renderizado personalizada para reemplazar completamente el parser HTML predeterminado (proveedores de Vue, Svelte, Remix y Astro). |
 
 > Nota: Para React y Preact, las etiquetas HTML estándar se proporcionan automáticamente. Solo necesitas pasar la prop `components` si deseas sobrescribirlas o agregar componentes personalizados.

package/docs/es/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Aprenda cómo declarar y usar contenido Markdown en su sitio web multilingüe con Intlayer. Siga los pasos de esta documentación en línea para integrar Markdown sin problemas en su proyecto.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ La renderización de Markdown admite **MDX** — use cualquier componente JSX/fr
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    En Remix 3, los nodos Markdown se renderizan en el servidor en una cadena HTML. Inyéctala con la prop `innerHTML` de Remix JSX, o con `html.raw` en una vista `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix escapa los valores interpolados por defecto. `innerHTML` y `html.raw` son las dos opciones de exclusión, que es lo que necesita una cadena Markdown renderizada.
+
+    También puedes proporcionar anulaciones locales para etiquetas específicas utilizando el método `.use()`. Las anulaciones son funciones que devuelven una cadena HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` es la cadena HTML renderizada, mientras que `String()` / `.toString()` devuelven la fuente Markdown sin procesar:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Y puedes acceder a los metadatos de tu markdown así:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    En Astro, los nodos Markdown se renderizan en una cadena HTML. Inyéctala con la directiva `set:html` en la plantilla, o con `innerHTML` en un `<script>` del cliente.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro escapa las `{expresiones}` por defecto. `set:html` es la opción de exclusión, que es lo que necesita una cadena Markdown renderizada.
+
+    También puedes proporcionar anulaciones locales para etiquetas específicas utilizando el método `.use()`. Las anulaciones son funciones que devuelven una cadena HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` es la cadena HTML renderizada, mientras que `String()` / `.toString()` devuelven la fuente Markdown sin procesar:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Y puedes acceder a los metadatos de tu markdown así:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Utilidades Auxiliares (Solo Cadenas Markdown)
@@ -698,6 +805,60 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtén una función de renderizado preconfigurada por `installIntlayerMarkdown()`. Devuelve una cadena HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Utilidad `renderMarkdown()`
+
+    Utilidad independiente que ignora la configuración global.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtén una función de renderizado preconfigurada por `installIntlayerMarkdown()`. Devuelve una cadena HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Utilidad `renderMarkdown()`
+
+    Utilidad independiente que ignora la configuración global.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configuración Global con `MarkdownProvider`
@@ -998,6 +1159,73 @@ También puedes usar tu propio renderizador de markdown:
     > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix no tiene un árbol de componentes para contener un proveedor, por lo que la configuración se instala una vez, como un singleton, al inicio del servidor. Configura el renderizador devuelto por `useMarkdownRenderer()`. Los nodos `md` devueltos por `useIntlayer` se renderizan con el compilador predeterminado; anula sus etiquetas por nodo con `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    También puedes usar tu propio renderizador de markdown:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Usa `installIntlayerMarkdownDynamic(async () => …)` para cargar el renderizador de forma perezosa; el cargador solo se ejecuta en la primera llamada.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro no tiene un árbol de componentes para contener un proveedor, por lo que la configuración se instala una vez, como un singleton, en el middleware (servidor) y en un `<script>` del cliente (navegador). Configura el renderizador devuelto por `useMarkdownRenderer()`. Los nodos `md` devueltos por `useIntlayer` se renderizan con el compilador predeterminado; anula sus etiquetas por nodo con `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Se ejecuta una vez cuando el servidor se inicia; el middleware de Intlayer es
+    // registrado por la integración, antes de este archivo.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    También puedes usar tu propio renderizador de markdown:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Usa `installIntlayerMarkdownDynamic(async () => …)` para cargar el renderizador de forma perezosa; el cargador solo se ejecuta en la primera llamada.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1326,6 +1554,40 @@ Puede usar la función `parseMarkdown` del paquete Intlayer de su framework en e
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 renderiza en el servidor y transmite HTML, por lo que ningún AST necesita pasar al cliente. Analiza una vez y renderiza el AST donde se construya la página:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Analizar el markdown en un AST serializable (por ejemplo, una vez, al cargar el módulo)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Renderizar el AST: el renderizador acepta una cadena cruda o el AST analizado
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Las páginas de Astro se renderizan en el servidor, por lo que ningún AST necesita pasar al cliente. Analiza el Markdown en el frontmatter y renderízalo con `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Analizar el markdown en un AST serializable
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Renderizar el AST: el renderizador acepta una cadena cruda o el AST analizado -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Este patrón garantiza que la lógica de análisis de Markdown se ejecute completamente en el servidor, lo que reduce significativamente el tiempo de ejecución en el cliente y mejora la velocidad de hidratación inicial.

package/docs/es/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Analog multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Configuración de tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, `angular-intlayer` proporciona `provideIntlayer()`, registrado en `src/app/app.config.ts` para que cada componente y página basada en archivos pueda leer su contenido a través de la señal `useIntlayer`. Analog se basa en Vite, por lo que el plugin `intlayer()` de `vite-intlayer` se agrega junto a `analog()` en `vite.config.ts` para observar y reconstruir tus declaraciones de contenido y ejecutar el proxy de locale. Las declaraciones de contenido se ubican junto a los componentes y páginas en `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### Configuración
+
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/es/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Angular 19 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Configuración de tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, `angular-intlayer` proporciona `provideIntlayer()`, registrado en `src/app/app.config.ts` para que cada componente pueda leer su contenido a través de la señal `useIntlayer`. La CLI de Angular se cambia al builder personalizado de Webpack, y `webpack.config.ts` combina el plugin de Intlayer en la compilación para observar y reconstruir tus declaraciones de contenido. Las declaraciones de contenido se ubican junto a los componentes en `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### Configuración
+
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/es/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Angular 22 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Configuración de tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, `angular-intlayer` proporciona `provideIntlayer()`, registrado en `src/app/app.config.ts` para que cada componente pueda leer su contenido a través de la señal `useIntlayer`. La CLI de Angular se cambia al builder personalizado de esbuild, y `esbuild.plugins.ts` registra el plugin de Intlayer en la compilación para observar y reconstruir tus declaraciones de contenido. Las declaraciones de contenido se ubican junto a los componentes en `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuración
+
 Crea un archivo de configuración para establecer los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}