@intlayer/docs 9.5.1 → 9.5.2

package/docs/en/cli/index.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2026-03-31
+updatedAt: 2026-09-12
 title: CLI - All Intlayer CLI commands for your multilingual website
 description: Discover how to use the Intlayer CLI to manage your multilingual website. Follow the steps in this online documentation to set up your project in a few minutes.
 keywords:
@@ -17,6 +17,9 @@ slugs:
   - concept
   - cli
 history:
+  - version: 9.5.2
+    date: 2026-09-12
+    changes: "Replace the `ci` command by the `--ci` flag"
   - version: 9.0.0
     date: 2026-06-11
     changes: "Add scan command"
@@ -160,10 +163,6 @@ To see how to configure available locales, or other parameters, refer to the [co
 - **[Editor Commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/editor.md)** - Use the Intlayer editor commands
 - **[Live Sync Commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md)** - Use Live Sync to reflect CMS content changes at runtime
 
-### CI/CD & Automation
-
-- **[CI Command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/ci.md)** - Run Intlayer commands with auto-injected credentials for CI/CD pipelines
-
 ### Auditing & Diagnostics
 
 - **[Scan Website](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/scan.md)** - Measure page size and audit i18n/SEO health of any public URL

package/docs/en/cli/live.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-09-12
 title: Live Sync Commands
 description: Learn how to use Live Sync to reflect CMS content changes at runtime.
 keywords:
@@ -37,6 +37,10 @@ Live Sync lets your app reflect CMS content changes at runtime. No rebuild or re
 
   > Example: `npx intlayer dictionary push --env-file .env.production.local`
 
+- **`--ci`**: Run the command in every Intlayer project of the monorepo (or only the current one when run from a project directory). Per-project credentials can be injected via `INTLAYER_PROJECT_CREDENTIALS`, a JSON map of project path to `{ "clientId", "clientSecret" }`.
+
+  > Example: `npx intlayer live --ci`
+
 **Log options:**
 
 - **`--verbose`**: Enable verbose logging for debugging. (default to true using CLI)

package/docs/en/cli/login.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-12-16
-updatedAt: 2025-12-16
+updatedAt: 2026-09-12
 title: CLI - Login
 description: Learn how to use the Intlayer CLI login command to authenticate with the Intlayer CMS and obtain access credentials.
 keywords:
@@ -142,7 +142,7 @@ Intlayer enforces this rather than only documenting it:
 
 Commenting `clientId` out is enough to disable every credentialed behaviour — remote dictionary fetching, CMS access, analytics — even when the environment variables are still defined.
 
-For CI pipelines, prefer the [`ci` command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/ci.md), which injects the credentials for the duration of a single run instead of persisting them.
+For CI pipelines, prefer the `--ci` flag, which injects the credentials for the duration of a single run instead of persisting them.
 
 ## Manual Configuration
 

package/docs/en/cli/pull.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-09-12
 title: Pull Dictionaries
 description: Learn how to pull dictionaries from the Intlayer editor and CMS.
 keywords:
@@ -66,6 +66,10 @@ If [intlayer editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
 
   > Example: `npx intlayer build --no-cache`
 
+- **`--ci`**: Run the command in every Intlayer project of the monorepo (or only the current one when run from a project directory). Per-project credentials can be injected via `INTLAYER_PROJECT_CREDENTIALS`, a JSON map of project path to `{ "clientId", "clientSecret" }`.
+
+  > Example: `npx intlayer pull --ci`
+
 **Environment variables options:**
 
 - **`--env`**: Specify the environment (e.g., `development`, `production`).

package/docs/en/cli/push.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-09-12
 title: Push Dictionaries
 description: Learn how to push your dictionaries to the Intlayer editor and CMS.
 keywords:
@@ -66,6 +66,10 @@ If [intlayer editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/
 
   > Example: `npx intlayer build --no-cache`
 
+- **`--ci`**: Run the command in every Intlayer project of the monorepo (or only the current one when run from a project directory). Per-project credentials can be injected via `INTLAYER_PROJECT_CREDENTIALS`, a JSON map of project path to `{ "clientId", "clientSecret" }`.
+
+  > Example: `npx intlayer push --ci`
+
 **Environment variables options:**
 
 - **`--env`**: Specify the environment (e.g., `development`, `production`). Useful in the case you use environment variables in your intlayer configuration file.

package/docs/en/cli/scan.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-11
-updatedAt: 2026-06-11
+updatedAt: 2026-09-12
 title: Scan Website
 description: Learn how to use the Intlayer CLI scan command to measure page size and audit the i18n/SEO health of any website.
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - cli
   - scan
 history:
+  - version: 9.5.2
+    date: 2026-09-12
+    changes: "Add `--ci` flag"
   - version: 9.0.0
     date: 2026-06-11
     changes: "Add scan command"
@@ -112,6 +115,7 @@ Output the full scan result as a JSON object instead of a formatted report. Usef
 - **`-e, --env`** — Target environment (e.g. `development`, `production`).
 - **`--env-file`** — Path to a custom `.env` file.
 - **`--no-cache`** — Disable configuration cache.
+- **`--ci`** — Run the command in every Intlayer project of the monorepo (or only the current one when run from a project directory). Per-project credentials can be injected via `INTLAYER_PROJECT_CREDENTIALS`, a JSON map of project path to `{ "clientId", "clientSecret" }`.
 - **`--verbose`** — Enable verbose logging (default in CLI mode).
 - **`--prefix`** — Custom log prefix.
 

package/docs/en/cli/standalone.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2026-03-31
+updatedAt: 2026-09-12
 title: Standalone Bundle
 description: Learn how to create a standalone bundle of the application content.
 keywords:
@@ -16,6 +16,9 @@ slugs:
   - cli
   - standalone
 history:
+  - version: 9.5.2
+    date: 2026-09-12
+    changes: "Add `--ci` flag"
   - version: 8.6.4
     date: 2026-03-31
     changes: "Init standalone command documentation"
@@ -61,6 +64,7 @@ bun x intlayer standalone --packages [packages...] [options]
 - `-e, --env [env]` - Environment.
 - `--base-dir [baseDir]` - Base directory.
 - `--no-cache` - Disable cache.
+- `--ci` - Run the command in every Intlayer project of the monorepo (or only the current one when run from a project directory). Per-project credentials can be injected via `INTLAYER_PROJECT_CREDENTIALS`, a JSON map of project path to `{ "clientId", "clientSecret" }`.
 - `--verbose` - Verbose output.
 
 ## Examples:

package/docs/en/cli/test.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-09-12
 title: Test Missing Translations
 description: Learn how to test and identify missing translations in your dictionaries.
 keywords:
@@ -71,6 +71,10 @@ Total missing required locales: 0
 
   > Example: `npx intlayer build --no-cache`
 
+- **`--ci`**: Run the command in every Intlayer project of the monorepo (or only the current one when run from a project directory). Per-project credentials can be injected via `INTLAYER_PROJECT_CREDENTIALS`, a JSON map of project path to `{ "clientId", "clientSecret" }`.
+
+  > Example: `npx intlayer test --ci`
+
 **Preparation options:**
 
 - **`--build`**: Build the dictionaries before pushing to ensure the content is up to date. True will force the build, false will skip the build, undefined will allow using the cache of the build.

package/docs/en/cli/watch.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-09-12
 title: Watch Dictionaries
 description: Learn how to watch for changes in your content declaration files and automatically build dictionaries.
 keywords:
@@ -48,3 +48,7 @@ This command is the equivalent of `npx intlayer build --watch --skip-prepare`.
 - **`--with`**: Start command in parallel with the watch.
 
   > Example: `npx intlayer watch --with "next dev --turbopack"`
+
+- **`--ci`**: Run the command in every Intlayer project of the monorepo (or only the current one when run from a project directory). Per-project credentials can be injected via `INTLAYER_PROJECT_CREDENTIALS`, a JSON map of project path to `{ "clientId", "clientSecret" }`.
+
+  > Example: `npx intlayer watch --ci`

package/docs/en/compat/i18n-js.md

@@ -28,7 +28,7 @@ Transitioning from the `i18n-js` library to Intlayer is a highly optimized migra
 Execute the following setup command in your repository:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 With `intlayer.config.ts` prepared, you can add Intlayer's alias to your bundler configuration so that any imports of `i18n-js` target the compat package `@intlayer/i18n-js`.

package/docs/en/compat/i18next.md

@@ -33,7 +33,7 @@ Intlayer perfectly replicates the core runtime characteristics of `i18next`. By
 To begin, initialize Intlayer in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 If you are using Vite, include the Intlayer plugin to route imports to `@intlayer/i18next`:

package/docs/en/compat/lingui.md

@@ -28,7 +28,7 @@ If your project currently relies on Lingui's macro-based compilation, transition
 To begin, initialize Intlayer in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This creates your `intlayer.config.ts`. Ensure you retain `@lingui/babel-plugin-lingui-macro` / `@lingui/swc-plugin` in your build step to run _before_ the Intlayer compiler. Then, use the bundler plugin alias to route `@lingui/core` and `@lingui/react` to `@intlayer/lingui`.

package/docs/en/compat/next-i18next.md

@@ -31,7 +31,7 @@ Intlayer handles all Next.js Pages Router and App Router implementations transpa
 To begin, run:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This creates the required Intlayer setup file. To swap to Intlayer behind the scenes, update your `next.config.ts`:

package/docs/en/compat/next-intl.md

@@ -31,7 +31,7 @@ Migrating from `next-intl` to Intlayer allows you to maintain your application r
 Execute the following command in your repository:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This will create an `intlayer.config.ts`. In your `next.config.ts`, use the plugin wrapper to seamlessly inject the `next-intl` aliases towards `@intlayer/next-intl`.

package/docs/en/compat/next-translate.md

@@ -29,7 +29,7 @@ Migrating from `next-translate` to Intlayer is a near drop-in replacement that r
 Initialize Intlayer in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 The CLI will scaffold your configuration. You can then apply the Intlayer plugin in your `next.config.ts`, which injects build-time subpath aliases mapping `next-translate/useTranslation` to `@intlayer/next-translate`.

package/docs/en/compat/ngx-translate.md

@@ -29,7 +29,7 @@ Migrating your Angular application from `ngx-translate` to Intlayer is easy with
 Begin by running:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This sets up the `intlayer.config.ts`. Replace your `TranslateModule.forRoot()` setups and import aliases appropriately to point to `@intlayer/ngx-translate`.

package/docs/en/compat/nuxtjs-i18n.md

@@ -30,7 +30,7 @@ Migrating your Nuxt application from `@nuxtjs/i18n` to Intlayer is a seamless pr
 To initialize the project, run:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This will set up `intlayer.config.ts`. Then, add the Intlayer Nuxt module (e.g. `@intlayer/nuxt-i18n`) in your `nuxt.config.ts` modules array. This automatically applies the compat configuration for your application.

package/docs/en/compat/polyglot.md

@@ -29,7 +29,7 @@ If you are using Airbnb's Polyglot.js, migrating to Intlayer is extremely straig
 Simply run the initialization command in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This generates `intlayer.config.ts`. You can then utilize the bundler plugin alias to transparently redirect Polyglot imports to `@intlayer/polyglot`.

package/docs/en/compat/react-i18next.md

@@ -31,7 +31,7 @@ Using Intlayer's compat adapter allows you to migrate from `react-i18next` witho
 To initialize the project, run:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 During initialization, Intlayer will install `@intlayer/react-i18next` and create `intlayer.config.ts`. In your bundler (like Vite), apply the Intlayer plugin:

package/docs/en/compat/react-intl.md

@@ -29,7 +29,7 @@ If your React application uses `react-intl` (FormatJS), transitioning to Intlaye
 Start by running the initialization command in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 Then, set up the Intlayer Vite or Next.js plugin in your configuration. This plugin injects build-time aliases to redirect `react-intl` imports to `@intlayer/react-intl`.

package/docs/en/compat/svelte-i18n.md

@@ -29,7 +29,7 @@ Moving your Svelte application from `svelte-i18n` to Intlayer takes just a momen
 Simply run the initialization command in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This generates `intlayer.config.ts`. Ensure your SvelteKit / Vite plugins are wrapped with Intlayer's alias plugin to seamlessly map `svelte-i18n` to `@intlayer/svelte-i18n`.

package/docs/en/compat/transloco.md

@@ -29,7 +29,7 @@ If your Angular application currently uses `@jsverse/transloco`, you can migrate
 Simply run the initialization command in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 This will generate the necessary `intlayer.config.ts` configuration. You will then replace your Transloco imports with `@intlayer/transloco` modules or rely on the build aliases.

package/docs/en/compat/vue-i18n.md

@@ -29,7 +29,7 @@ If your Vue application currently uses `vue-i18n`, you can migrate to Intlayer w
 To get started, simply run the initialization command in your project:
 
 ```bash
-npx intlayer init
+npx intlayer init --interactive
 ```
 
 During the initialization, Intlayer will set up your configuration file (`intlayer.config.ts`) and prepare your project for migration. You will just need to add the Intlayer plugin to your Vite configuration to automatically alias the `vue-i18n` imports.

package/docs/en/intlayer_with_remix_3.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-09
-updatedAt: 2026-09-09
+updatedAt: 2026-09-11
 title: "Remix 3 i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Remix 3 app. Translate with AI agents and optimize bundle size, SEO and performances."
 keywords:
@@ -27,30 +27,24 @@ author: aymericzip
 
 # Translate your Remix 3 website using Intlayer | Internationalization (i18n)
 
-This guide demonstrates how to integrate **Intlayer** for seamless internationalization in **Remix 3** applications with locale-aware routing, type-safe content declarations, safe HTML templates, and cross-runtime support across Node.js, Bun, Deno, and Cloudflare Workers.
-
----
+This guide demonstrates how to integrate **Intlayer** for seamless internationalization in **Remix 3** applications with locale-aware routing, type-safe content declarations, server-rendered JSX components, and cross-runtime support across Node.js, Bun, Deno, and Cloudflare Workers.
 
 ## What is Remix 3?
 
 **Remix 3** represents a fundamental architectural shift towards a **composable, runtime-agnostic web framework built entirely on web standards**. Rather than being coupled to specific bundlers or proprietary server APIs, Remix 3 is distributed as single-purpose, composable packages:
 
 - **`remix/fetch-router`** (or `remix/router`): Lightweight, standard-compliant routing built on the Fetch API (`Request` and `Response`).
-- **`remix/html-template`**: Safe HTML template literals with automatic XSS protection and fragment composition.
-- **`remix/response/html`**: Response helper utilities for serving HTML with standard HTTP semantics.
+- **`remix/ui`**: A JSX component model (`jsxImportSource: "remix/ui"`). A component is a setup function that returns a render function, so it looks like React but keeps state in plain JavaScript closures.
+- **`remix/middleware/render`**: Installs `context.render(<Page />)` on every request, streaming the JSX tree to an HTML `Response`.
 - **`remix/node-fetch-server`**: Server adapters for Node.js, while natively supporting Bun, Deno, and edge runtimes.
 - **`remix/cookie`**: Cryptographically secure cookie parsing and serialization.
 
 Combined with **Intlayer**, you get a complete internationalization system that delivers compile-time safety, automated AI translations, zero-overhead server rendering, and seamless locale routing.
 
----
-
 ## Table of Contents
 
 <TOC/>
 
----
-
 ## Why Intlayer over alternatives?
 
 Compared to traditional solutions like `i18next` or bespoke translation loaders, Intlayer offers an integrated developer experience optimized for modern web architecture:
@@ -68,7 +62,7 @@ Say goodbye to loose JSON keys and runtime missing-key crashes. Intlayer enforce
 </Accordion>
 <Accordion header="Zero Bundle Overhead on the Server">
 
-When using Remix 3's server-rendered HTML templates (`remix/html-template`), only the resolved text for the requested locale is rendered into the output stream. No client hydration bundles or bulky translation catalogs are needed unless explicitly required.
+Remix 3 renders JSX components on the server and streams the HTML to the client. Only the resolved text for the requested locale ends up in the output stream. No client hydration bundles or bulky translation catalogs are needed unless a component is explicitly marked as a `clientEntry`.
 
 </Accordion>
 <Accordion header="AI Agent & Automation Ready">
@@ -83,8 +77,6 @@ Beyond code-first workflows, Intlayer provides a self-hosted [Visual Editor](htt
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Step-by-Step Guide
 
 <Tabs defaultTab="code">
@@ -136,7 +128,7 @@ bun add intlayer remix@next
 ```
 
 - **`intlayer`**: Core internationalization engine providing configuration management, dictionary declaration (`t()`, `Dictionary`), CLI tools, and runtime interpreter.
-- **`remix`**: The unified Remix 3 framework package exporting `remix/router`, `remix/routes`, `remix/html-template`, and `remix/node-fetch-server`.
+- **`remix`**: The unified Remix 3 framework package exporting `remix/router`, `remix/routes`, `remix/ui`, `remix/middleware/render`, and `remix/node-fetch-server`.
 
 </Step>
 <Step number={2} title="Configure Intlayer">
@@ -328,80 +320,108 @@ routes.localizedHome.href({ locale: "fr" }); // "/fr"
 ```
 
 </Step>
-<Step number={7} title="Render Localized HTML Templates">
+<Step number={7} title="Render Localized Pages with JSX">
+
+Remix 3 renders UI with JSX components from `remix/ui`. A component is a **setup function** that receives a `Handle` and returns a **render function**. Setup runs once per instance, render runs on every update, and props are read through `handle.props`.
+
+Start with a shared `Document` shell that sets the `<html lang="..." dir="...">` attributes from the resolved locale:
+
+```tsx fileName="src/views/document.tsx" codeFormat={["typescript", "esm"]}
+import { getHTMLTextDir, type Locale } from "intlayer";
+import type { Handle, RemixNode } from "remix/ui";
 
-Remix 3 uses `remix/html-template` for safe, auto-escaped HTML generation. Create a view function that extracts the localized dictionary using `getIntlayer`, sets the `<html lang="..." dir="...">` attributes, and displays a language switcher:
+type DocumentProps = {
+  locale: Locale;
+  title: string;
+  children?: RemixNode;
+};
+
+export const Document = (handle: Handle<DocumentProps>) => () => {
+  const { locale, title, children } = handle.props;
 
-```typescript fileName="src/views/home.ts" codeFormat={["typescript", "esm"]}
-import { html, type SafeHtml } from "remix/html-template";
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title}</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+};
+```
+
+Then create the home page. It extracts the localized dictionary with `getIntlayer` and renders a language switcher:
+
+```tsx fileName="src/views/home.tsx" codeFormat={["typescript", "esm"]}
 import {
   getIntlayer,
-  getHTMLTextDir,
   getLocaleName,
   getLocalizedPath,
   type Locale,
   locales,
 } from "intlayer";
+import type { Handle } from "remix/ui";
 import { routes } from "../routes";
+import { Document } from "./document";
+
+type HomePageProps = {
+  locale: Locale;
+};
 
-export const renderHomePage = (locale: Locale): SafeHtml => {
+export const HomePage = (handle: Handle<HomePageProps>) => () => {
+  const { locale } = handle.props;
   const home = getIntlayer("home", locale);
 
-  return html`
-    <!doctype html>
-    <html lang="${locale}" dir="${getHTMLTextDir(locale)}">
-      <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>${home.title}</title>
-      </head>
-      <body>
-        <header>
-          <nav aria-label="Languages">
-            <span>${home.switchLanguage}</span>
-            ${locales.map((loc) => {
-              const href = getLocalizedPath(routes.home.href(), loc);
-              const isActive = loc === locale;
-              return html`
-                <a
-                  href="${href}"
-                  class="${isActive ? "active" : ""}"
-                  aria-current="${isActive ? "true" : "false"}"
-                >
-                  ${getLocaleName(loc, locale)}
-                </a>
-              `;
-            })}
-          </nav>
-        </header>
-        <main>
-          <h1>${home.title}</h1>
-          <p>${home.description}</p>
-        </main>
-      </body>
-    </html>
-  `;
+  return (
+    <Document locale={locale} title={home.title}>
+      <header>
+        <nav aria-label="Languages">
+          <span>{home.switchLanguage}</span>
+          {locales.map((targetLocale) => {
+            const isActive = targetLocale === locale;
+
+            return (
+              <a
+                key={targetLocale}
+                href={getLocalizedPath(routes.home.href(), targetLocale)}
+                class={isActive ? "active" : undefined}
+                aria-current={isActive ? "page" : undefined}
+              >
+                {getLocaleName(targetLocale, locale)}
+              </a>
+            );
+          })}
+        </nav>
+      </header>
+      <main>
+        <h1>{home.title}</h1>
+        <p>{home.description}</p>
+      </main>
+    </Document>
+  );
 };
 ```
 
+> Remix JSX is not React: there are no hooks, `class` is written as-is (`className` is also accepted), and re-renders are triggered explicitly with `handle.update()`. Interpolated values are escaped automatically.
+
 </Step>
-<Step number={8} title="Wire Up the Server Application">
+<Step number={8} title="Wire Up the Router and Server">
 
-Connect your router, middleware, and route actions together in `src/server.ts`:
+Add the `render()` middleware from `remix/middleware/render` next to the Intlayer middleware. It installs `context.render(node, init)` on every request, which streams the JSX tree into an HTML `Response` (prepending `<!DOCTYPE html>` and setting the `Content-Type` header):
 
-```typescript fileName="src/server.ts" codeFormat={["typescript", "esm"]}
-import * as http from "node:http";
-import { createRouter } from "remix/router";
-import { createRequestListener } from "remix/node-fetch-server";
-import { createHtmlResponse } from "remix/response/html";
+```tsx fileName="src/router.tsx" codeFormat={["typescript", "esm"]}
 import { isDeclaredLocale } from "intlayer";
+import { render } from "remix/middleware/render";
+import { createRouter } from "remix/router";
 import { intlayer, localeKey } from "./middleware/intlayer";
 import { routes } from "./routes";
-import { renderHomePage } from "./views/home";
+import { HomePage } from "./views/home";
 
-// 1. Initialize router with Intlayer middleware
+// 1. Initialize router with Intlayer + render middleware
 export const router = createRouter({
-  middleware: [intlayer()],
+  middleware: [intlayer(), render()],
 });
 
 // 2. Map route handlers
@@ -410,7 +430,7 @@ router.map(routes, {
     // Default locale route
     home(context) {
       const locale = context.get(localeKey);
-      return createHtmlResponse(renderHomePage(locale));
+      return context.render(<HomePage locale={locale} />);
     },
 
     // Localized route
@@ -419,13 +439,24 @@ router.map(routes, {
         return new Response("Not Found", { status: 404 });
       }
       const locale = context.get(localeKey);
-      return createHtmlResponse(renderHomePage(locale));
+      return context.render(<HomePage locale={locale} />);
     },
   },
 });
+```
+
+> `context.render` accepts an optional `ResponseInit` as second argument, e.g. `context.render(<NotFoundPage locale={locale} />, { status: 404 })`.
+
+Finally, expose the router through a standard `fetch` handler. The same router runs on Node.js, Bun, Deno, and Cloudflare Workers:
+
+```typescript fileName="src/server.ts" codeFormat={["typescript", "esm"]}
+import * as http from "node:http";
+import { createRequestListener } from "remix/node-fetch-server";
+import { router } from "./router";
 
-// 3. Start server
 const PORT = Number(process.env.PORT || 3000);
+
+// Node.js
 const server = http.createServer(
   createRequestListener((request) => router.fetch(request))
 );
@@ -434,6 +465,7 @@ server.listen(PORT, () => {
   console.log(`Server running at http://localhost:${PORT}`);
 });
 
+// Bun / Deno / Cloudflare Workers
 export default {
   port: PORT,
   fetch(request: Request) {
@@ -482,11 +514,9 @@ bun x intlayer fill
 </Step>
 </Steps>
 
----
-
 ## TypeScript Configuration
 
-Ensure that your `tsconfig.json` includes the generated `.intlayer` types:
+Point JSX at the `remix/ui` runtime and ensure that your `tsconfig.json` includes the generated `.intlayer` types:
 
 ```json fileName="tsconfig.json"
 {
@@ -494,6 +524,8 @@ Ensure that your `tsconfig.json` includes the generated `.intlayer` types:
     "moduleResolution": "Bundler",
     "module": "ESNext",
     "target": "ESNext",
+    "jsx": "react-jsx",
+    "jsxImportSource": "remix/ui",
     "skipLibCheck": true,
     "strict": true
   },
@@ -501,7 +533,7 @@ Ensure that your `tsconfig.json` includes the generated `.intlayer` types:
 }
 ```
 
----
+> `jsxImportSource: "remix/ui"` is what makes `<HomePage />` resolve to Remix's `createElement` instead of React's.
 
 ## Conclusion