@intlayer/docs 9.5.5 → 9.5.7

package/docs/en-GB/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-01-22
+updatedAt: 2026-09-21
 title: HTML Content
 description: Learn how to declare and use HTML content with custom components in Intlayer. Follow this documentation to embed rich HTML-like content with dynamic component replacement in your internationalised project.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -236,6 +238,83 @@ When you access content via `useIntlayer`, HTML nodes are already prepared for r
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    In Remix 3, HTML nodes resolve to an HTML string. Inject it with the `innerHTML` prop of Remix JSX, or with `html.raw` in an `html-template` view.
+
+    ```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 escapes interpolated values by default. `innerHTML` and `html.raw` are the two opt-outs, which is what an HTML string needs.
+
+    Use the `.use()` method to override tags or map custom components. Overrides are functions returning an HTML string:
+
+    ```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">
+    In Astro, HTML nodes resolve to an HTML string. Inject it with the `set:html` directive in the template, or with `innerHTML` in a client `<script>`.
+
+    ```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 escapes `{expressions}` by default. `set:html` is the opt-out, which is what an HTML string needs.
+
+    Use the `.use()` method to override tags or map custom components. Overrides are functions returning an HTML string:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Global Configuration with `HTMLProvider`
@@ -471,6 +550,41 @@ You can configure HTML rendering globally for your entire application. This is i
     > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix has no component tree to hold a provider, so the configuration is installed once, as a singleton, at server start. It configures the renderer returned by `useHTMLRenderer()`. The `html` nodes returned by `useIntlayer` are rendered as-is; override their tags per node with `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Use `installIntlayerHTMLDynamic(async () => …)` to load the renderer itself lazily; the loader runs on the first call only.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro has no component tree to hold a provider, so the configuration is installed once, as a singleton, in the middleware (server) and in a client `<script>` (browser). It configures the renderer returned by `useHTMLRenderer()`. The `html` nodes returned by `useIntlayer` are rendered as-is; override their tags per node with `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Runs once when the server starts; the Intlayer middleware itself is
+    // registered by the integration, ahead of this file.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Use `installIntlayerHTMLDynamic(async () => …)` to load the renderer itself lazily; the loader runs on the first call only.
+
+  </Tab>
 </Tabs>
 
 ### Manual Rendering & Advanced Tools
@@ -643,15 +757,69 @@ If you need to render raw HTML strings or have more control over the component m
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useHTMLRenderer()` Hook
+
+    Get a renderer function pre-configured by `installIntlayerHTML()`. It returns an HTML string.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### `renderHTML()` Utility
+
+    Standalone utility that ignores the global configuration.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useHTMLRenderer()` Hook
+
+    Get a renderer function pre-configured by `installIntlayerHTML()`. It returns an HTML string.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### `renderHTML()` Utility
+
+    Standalone utility that ignores the global configuration.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Options Reference
 
 These options can be passed to `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer`, and `renderHTML`.
 
-| Option       | Type                  | Default | Description                                                                                                |
-| :----------- | :-------------------- | :------ | :--------------------------------------------------------------------------------------------------------- |
-| `components` | `Record<string, any>` | `{}`    | A map of HTML tags or custom component names to components.                                                |
-| `renderHTML` | `Function`            | `null`  | A custom rendering function to completely replace the default HTML parser (Only for Vue/Svelte providers). |
+| Option       | Type                  | Default | Description                                                                                                         |
+| :----------- | :-------------------- | :------ | :------------------------------------------------------------------------------------------------------------------ |
+| `components` | `Record<string, any>` | `{}`    | A map of HTML tags or custom component names to components.                                                         |
+| `renderHTML` | `Function`            | `null`  | A custom rendering function to completely replace the default HTML parser (Vue, Svelte, Remix and Astro providers). |
 
 > Note: For React and Preact, standard HTML tags are automatically provided. You only need to pass the `components` prop if you want to override them or add custom components.

package/docs/en-GB/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Learn how to declare and use Markdown content in your multilingual website with Intlayer. Follow the steps in this online documentation to integrate Markdown seamlessly into your project.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -490,6 +492,111 @@ Markdown rendering supports **MDX** — use any JSX/framework component by name
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    In Remix 3, Markdown nodes are rendered on the server into an HTML string. Inject it with the `innerHTML` prop of Remix JSX, or with `html.raw` in an `html-template` view.
+
+    ```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 escapes interpolated values by default. `innerHTML` and `html.raw` are the two opt-outs, which is what a rendered Markdown string needs.
+
+    You can also provide local overrides for specific tags using the `.use()` method. Overrides are functions returning an HTML string:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` is the rendered HTML string, while `String()` / `.toString()` give back the raw Markdown source:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    In Astro, Markdown nodes are rendered into an HTML string. Inject it with the `set:html` directive in the template, or with `innerHTML` in a client `<script>`.
+
+    ```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 escapes `{expressions}` by default. `set:html` is the opt-out, which is what a rendered Markdown string needs.
+
+    You can also provide local overrides for specific tags using the `.use()` method. Overrides are functions returning an HTML string:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` is the rendered HTML string, while `String()` / `.toString()` give back the raw Markdown source:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    And you can access your markdown metadata like :
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Helper Utilities (Markdown Strings Only)
@@ -701,6 +808,60 @@ These utilities render **only raw Markdown strings** and are independent of `use
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useMarkdownRenderer()` Hook
+
+    Get a renderer function pre-configured by `installIntlayerMarkdown()`. It returns an HTML string.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### `renderMarkdown()` Utility
+
+    Standalone utility that ignores the global configuration.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useMarkdownRenderer()` Hook
+
+    Get a renderer function pre-configured by `installIntlayerMarkdown()`. It returns an HTML string.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### `renderMarkdown()` Utility
+
+    Standalone utility that ignores the global configuration.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Global Configuration with `MarkdownProvider`
@@ -1001,6 +1162,73 @@ You can also use your own markdown renderer:
     > Importing your Markdown renderer dynamically is a great way to reduce the bundle size of your application.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix has no component tree to hold a provider, so the configuration is installed once, as a singleton, at server start. It configures the renderer returned by `useMarkdownRenderer()`. The `md` nodes returned by `useIntlayer` are rendered with the default compiler; override their tags per node with `.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>`,
+      },
+    });
+    ```
+
+    You can also use your own markdown renderer:
+
+    ```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;
+      },
+    });
+    ```
+
+    > Use `installIntlayerMarkdownDynamic(async () => …)` to load the renderer itself lazily; the loader runs on the first call only.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro has no component tree to hold a provider, so the configuration is installed once, as a singleton, in the middleware (server) and in a client `<script>` (browser). It configures the renderer returned by `useMarkdownRenderer()`. The `md` nodes returned by `useIntlayer` are rendered with the default compiler; override their tags per node with `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Runs once when the server starts; the Intlayer middleware itself is
+    // registered by the integration, ahead of this file.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    You can also use your own markdown renderer:
+
+    ```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;
+      },
+    });
+    ```
+
+    > Use `installIntlayerMarkdownDynamic(async () => …)` to load the renderer itself lazily; the loader runs on the first call only.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1329,6 +1557,40 @@ You can use the `parseMarkdown` function from your framework's Intlayer package
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 renders on the server and streams HTML, so no AST needs to cross to the client. Parse once, and render the AST wherever the page is built:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Parse the markdown into a serializable AST (e.g. once, at module load)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Render the AST: the renderer accepts a raw string or the parsed AST
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro pages are rendered on the server, so no AST needs to cross to the client. Parse the Markdown in the frontmatter and render it with `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Parse the markdown into a serializable AST
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Render the AST: the renderer accepts a raw string or the parsed AST -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 This pattern ensures that the Markdown parsing logic is executed entirely on the server, significantly reducing the client-side execution time and improving the initial hydration speed.

package/docs/en-GB/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Analog app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Configuration of your project">
 
+### Architecture
+
+In this architecture, `angular-intlayer` provides `provideIntlayer()`, registered in `src/app/app.config.ts` so that every component and file-based page can read its content through the `useIntlayer` signal. Analog builds on Vite, so the `intlayer()` plugin of `vite-intlayer` is added next to `analog()` in `vite.config.ts` to watch and rebuild your content declarations and to run the locale proxy. Content declarations are placed alongside components and pages in `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
+```
+
+### Configuration
+
 Create a config file to configure the languages of your application:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/en-GB/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 - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Angular 19 app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -167,6 +167,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Configuration of your project">
 
+### Architecture
+
+In this architecture, `angular-intlayer` provides `provideIntlayer()`, registered in `src/app/app.config.ts` so that every component can read its content through the `useIntlayer` signal. The Angular CLI is switched to the custom Webpack builder, and `webpack.config.ts` merges the Intlayer plugin into the build to watch and rebuild your content declarations. Content declarations are placed alongside components in `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
+```
+
+### Configuration
+
 Create a config file to configure the languages of your application:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/en-GB/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 - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Angular 22 app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Configuration of your project">
 
+### Architecture
+
+In this architecture, `angular-intlayer` provides `provideIntlayer()`, registered in `src/app/app.config.ts` so that every component can read its content through the `useIntlayer` signal. The Angular CLI is switched to the custom esbuild builder, and `esbuild.plugins.ts` registers the Intlayer plugin in the build to watch and rebuild your content declarations. Content declarations are placed alongside components in `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
+```
+
+### Configuration
+
 Create a configuration file to configure your application's languages:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}