@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

package/docs/en-GB/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "Expo + React Native i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Expo + React Native app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -17,6 +17,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Import providers and hooks directly from react-native-intlayer; react-intlayer is no longer needed as a direct dependency"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Update Solid useIntlayer API usage to direct property access"
@@ -29,7 +32,7 @@ history:
 author: aymericzip
 ---
 
-# Getting Started Internationalising (i18n) with Intlayer and React Native
+# Translate your Expo and React Native app | Internationalisation (i18n)
 
 <Tabs defaultTab="code">
   <Tab label="Code" value="code">
@@ -37,7 +40,7 @@ author: aymericzip
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
+  title="Demo CodeSandbox - How to Internationalise your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -56,17 +59,19 @@ author: aymericzip
   </Tab>
 </Tabs>
 
-See [Application Template](https://github.com/aymericzip/intlayer-react-native-template) on GitHub.
+## Table of Contents
+
+<TOC/>
 
 ## Why Intlayer over alternatives?
 
-Compared to main solutions like `react-native-localize` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as:
+Compared to main solutions like `react-native-localize` or `i18next`, Intlayer is a solution that comes with integrated optimisations such as:
 
 <AccordionGroup>
 
 <Accordion header="Full React Native coverage">
 
-Intlayer is optimized to work perfectly with React Native and Expo by offering **component-level content scoping**, **TypeScript support**, and all the features needed for scaling internationalization (i18n) in mobile apps.
+Intlayer is optimised to work perfectly with React Native and Expo by offering **component-level content scoping**, **TypeScript support**, and all the features needed for scaling internationalisation (i18n) in mobile apps.
 
 </Accordion>
 
@@ -90,7 +95,7 @@ Use automation to translate in your CI/CD pipeline using the LLM of your choice
 
 <Accordion header="Performance">
 
-Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time.
+Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimises your content loading at build time.
 
 </Accordion>
 
@@ -136,82 +141,19 @@ bunx intlayer-cli init --interactive
 > This command will detect your environment and install the required packages. For example:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
-```
-
-### Packages
-
-- **intlayer**  
-  The core i18n toolkit for configuration, dictionary content, types generation, and CLI commands.
-
-- **react-intlayer**  
-  React integration that provides the context providers and React hooks you’ll use in React Native for obtaining and switching locales.
-
-- **react-native-intlayer**  
-  React Native integration that provides the Metro plugin for integrating Intlayer with the React Native bundler.
-
----
-
-</Step>
-
-<Step number={2} title="Install Dependencies">
-
-From your React Native project, install the following packages:
-
-```bash packageManager="npm"
-npx intlayer-cli init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer-cli init --interactive
-```
-
-> the `--interactive` flag is optional. Use `intlayer-cli init` if you're an AI agent.
-
-> This command will detect your environment and install the required packages. For example:
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add --dev react-native-intlayer
+bun add intlayer react-native-intlayer
 ```
 
 ### Packages
@@ -219,17 +161,14 @@ bun add --dev react-native-intlayer
 - **intlayer**  
   The core i18n toolkit for configuration, dictionary content, types generation, and CLI commands.
 
-- **react-intlayer**  
-  React integration that provides the context providers and React hooks you’ll use in React Native for obtaining and switching locales.
-
 - **react-native-intlayer**  
-  React Native integration that provides the Metro plugin for integrating Intlayer with the React Native bundler.
+  React Native integration that provides the context providers and React hooks you'll use to obtain and switch locales, the React Native polyfills, and the Metro plugin for integrating Intlayer with the React Native bundler. It re-exports everything from `react-intlayer`, so you only need this single package in a React Native app.
 
 ---
 
 </Step>
 
-<Step number={3} title="Create an Intlayer Config">
+<Step number={2} title="Create an Intlayer Config">
 
 In your project root (or anywhere convenient), create an **Intlayer config** file. It might look like this:
 
@@ -263,7 +202,7 @@ Within this config, you can:
 
 </Step>
 
-<Step number={4} title="Add the Metro plugin">
+<Step number={3} title="Add the Metro plugin">
 
 Metro is a bundler for React Native. It is the default bundler for React Native projects created with the `react-native init` command. To use Intlayer with Metro, you need to add the plugin to your `metro.config.js` file:
 
@@ -278,13 +217,18 @@ module.exports = (async () => {
 })();
 ```
 
+> Note: `configMetroIntlayer` is a promise function. Use `configMetroIntlayerSync` instead if you want to use it synchronously, or avoid IFFE (Immediately Invoked Function Expression).
+> Note: `configMetroIntlayerSync` does not allow building intlayer dictionaries on server start.
+
 </Step>
 
-<Step number={5} title="Add the Intlayer provider">
+<Step number={4} title="Add the Intlayer provider">
+
+To keep the user language synchronised across your application, you need to wrap your root component with the `IntlayerProvider` component from `react-native-intlayer`.
 
-To keep synchronized the user language across your application, you need to wrap your root component with the `IntlayerProvider` component from `react-intlayer-native`.
+> Always import from `react-native-intlayer`. Its `IntlayerProvider` includes polyfills for the web API used by Intlayer, and the package re-exports all the hooks and utilities from `react-intlayer`.
 
-> Make sure to use the provider from `react-native-intlayer` instead of `react-intlayer`. The export from `react-native-intlayer` includes polyfills for the web API.
+Also, you need to add the `intlayerPolyfill` function to your `index.js` file to ensure that Intlayer can work properly.
 
 ```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
@@ -309,7 +253,7 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="Declare Your Content">
+<Step number={5} title="Declare Your Content">
 
 Create **content declaration** files anywhere in your project (commonly within `src/`), using any of the extension formats that Intlayer supports:
 
@@ -324,6 +268,14 @@ Create **content declaration** files anywhere in your project (commonly within `
 - `.content.cjx`
 - etc.
 
+> **Expo Router (web): keep `.content.*` files out of the `app/` directory.** Expo Router treats every JavaScript/TypeScript file inside `app/` as a route. On web, its route discovery scans the filesystem directly and does **not** honour Metro's `resolver.blockList`, so a co-located `*.content.ts` is registered as a route. A file such as `app/(tabs)/_layout.content.ts` is even parsed as a layout (the `.content` part is read as a platform suffix), which collides with the real `_layout.tsx` and throws:
+>
+> ```
+> The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.
+> ```
+>
+> Place your declarations in a directory outside `app/` (for example `content/` or `src/content/`). Intlayer discovers `.content.*` files anywhere in the project and dictionaries are referenced by their `key`, so no import changes are needed. On native this is not required (Metro's `blockList` already hides them), but using a non-`app/` directory keeps both platforms working.
+
 Example (TypeScript with TSX nodes for React Native):
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -367,13 +319,13 @@ export default homeScreenContent;
 }
 ```
 
-> For details on content declarations, see [Intlayer’s content docs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/content_file.md).
+> For details on content declarations, see [Intlayer's content docs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/content_file.md).
 
 ---
 
 </Step>
 
-<Step number={7} title="Use Intlayer in Your Components">
+<Step number={6} title="Use Intlayer in Your Components">
 
 Use the `useIntlayer` hook in child components to obtain localised content.
 
@@ -381,7 +333,7 @@ Use the `useIntlayer` hook in child components to obtain localised content.
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -420,21 +372,23 @@ const styles = StyleSheet.create({
 export default HomeScreen;
 ```
 
-> When using `content.someKey` in string-based props (e.g., a button’s `title` or a `Text` component’s `children`), **call `content.someKey.value`** to obtain the actual string.
+> When using `content.someKey` in string-based props (e.g., a button's `title` or a `Text` component's `children`), **call `content.someKey.value`** to obtain the actual string.
+
+> If your app already exists, you can use the [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compiler.md), as well as the [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/extract.md), to transform thousands of components in a second.
 
 ---
 
 </Step>
 
-<Step number={8} title="Change the App Locale" isOptional={true}>
+<Step number={7} title="Change the App Locale" isOptional={true}>
 
-To switch locales from within your components, you can use the `useLocale` hook’s `setLocale` method:
+To switch locales from within your components, you can use the `useLocale` hook's `setLocale` method:
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -475,7 +429,7 @@ const styles = StyleSheet.create({
 });
 ```
 
-This triggers a re-render of all components that use Intlayer content, now displaying translations for the new locale.
+This triggers a re-render of all components that use Intlayer content, now showing translations for the new locale.
 
 > See [`useLocale` docs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useLocale.md) for more details.
 
@@ -543,3 +497,31 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 Enjoy building your **React Native** apps with fully powered i18n through **Intlayer**!
 
 ---
+
+### Debug
+
+React Native can be less stable than React Web, so pay extra attention to version alignment.
+
+Intlayer primarily targets the Web Intl API; on React Native you must include the appropriate polyfills.
+
+Checklist:
+
+- Use the latest versions of `intlayer` and `react-native-intlayer`.
+- Enable the Intlayer polyfill.
+- If you use `getLocaleName` or other Intl-API-based utilities, import these polyfills early (for example in `index.js` or `App.tsx`):
+
+```ts
+import "intl";
+import "@formatjs/intl-getcanonicallocales/polyfill";
+import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-listformat/polyfill";
+import "@formatjs/intl-numberformat/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import "@formatjs/intl-datetimeformat/polyfill";
+```
+
+- Verify your Metro configuration (resolver aliases, asset plugins, `tsconfig` paths) if modules fail to resolve.
+
+---

package/docs/en-GB/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) React Router v7 app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:

package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) React Router v7 app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -163,6 +163,25 @@ The core package that provides internationalisation tools for configuration mana
 
 </Steps>
 
+#### File Structure
+
+```bash
+app/
+├── root.tsx                         # Layout wrapper for locale routes
+└──routes/
+    ├── ($locale)._index.tsx         # Home page (/, /es, etc.)
+    ├── ($locale)._index.content.ts  # Home page content
+    ├── ($locale).about.tsx          # About page (/about, /es/about, etc.)
+    └── ($locale).about.content.ts   # About page content
+```
+
+The naming conventions:
+
+- `($locale)` - Optional dynamic segment for the locale parameter
+- `_layout` - Layout route that wraps child routes
+- `_index` - Index route (renders at the parent path)
+- `.` (dot) - Separates path segments (e.g., `($locale).about` → `/:locale?/about`)
+
 ## Step-by-Step Guide to Set Up Intlayer in a React Router v7 Application with File-System Routes
 
 <Tabs defaultTab="video">

package/docs/en-GB/intlayer_with_svelte_kit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "SvelteKit i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) SvelteKit app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -267,212 +267,6 @@ export default heroContent;
 
 <Step number={5} title="Utilise Intlayer in Your Components">
 
-Now you can use the `useIntlayer` function in any Svelte component. It returns a reactive store that automatically updates when the locale changes. The function will automatically respect the current locale (both during SSR and client-side navigation).
-
-> **Note:** `useIntlayer` returns a Svelte store, so you need to use the `---
-> createdAt: 2025-11-20
-> updatedAt: 2026-05-31
-> title: How to translate an SvelteKit app – i18n guide 2026
-> description: Discover how to make your SvelteKit website multilingual. Follow the documentation to internationalise (i18n) and translate it using Server-Side Rendering (SSR).
-> keywords:
-
-- Internationalisation
-- Documentation
-- Intlayer
-- SvelteKit
-- JavaScript
-- SSR
-  slugs:
-- doc
-- environment
-- sveltekit
-  applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template
-  history:
-- version: 7.1.10
-  date: 2025-11-20
-  changes: Init history
-
----
-
-# Translate your SvelteKit website using Intlayer | Internationalisation (i18n)
-
-</Step>
-
-</Steps>
-
-## Table of Contents
-
-<TOC/>
-
-## What is Intlayer?
-
-**Intlayer** is an innovative, open-source internationalisation (i18n) library designed to simplify multilingual support in modern web applications. It works seamlessly with **SvelteKit's** Server-Side Rendering (SSR) capabilities.
-
-With Intlayer, you can:
-
-- **Easily manage translations** using declarative dictionaries at the component level.
-- **Dynamically localise metadata**, routes, and content.
-- **Ensure TypeScript support** with autogenerated types.
-- **Leverage SvelteKit's SSR** for SEO-friendly internationalisation.
-
----
-
-## Step-by-Step Guide to Set Up Intlayer in a SvelteKit Application
-
-To get started, create a new SvelteKit project. Here is the final structure that we will make:
-
-```bash
-.
-├── intlayer.config.ts
-├── package.json
-├── src
-│   ├── app.d.ts
-│   ├── app.html
-│   ├── hooks.server.ts
-│   ├── lib
-│   │   ├── getLocale.ts
-│   │   ├── LocaleSwitcher.svelte
-│   │   └── LocalizedLink.svelte
-│   ├── params
-│   │   └── locale.ts
-│   └── routes
-│       ├── [[locale=locale]]
-│       │   ├── +layout.svelte
-│       │   ├── +layout.ts
-│       │   ├── +page.svelte
-│       │   ├── +page.ts
-│       │   ├── about
-│       │   │   ├── +page.svelte
-│       │   │   ├── +page.ts
-│       │   │   └── page.content.ts
-│       │   ├── Counter.content.ts
-│       │   ├── Counter.svelte
-│       │   ├── Header.content.ts
-│       │   ├── Header.svelte
-│       │   ├── home.content.ts
-│       │   └── layout.content.ts
-│       ├── +layout.svelte
-│       └── layout.css
-├── static
-│   ├── favicon.svg
-│   └── robots.txt
-├── svelte.config.js
-├── tsconfig.json
-└── vite.config.ts
-```
-
-<Steps>
-
-<Step number={1} title="Install Dependencies">
-
-Install the necessary packages using npm:
-
-```bash packageManager="npm"
-npx intlayer-cli init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer-cli init --interactive
-```
-
-> the `--interactive` flag is optional. Use `intlayer-cli init` if you're an AI agent.
-
-> This command will detect your environment and install the required packages. For example:
-
-```bash packageManager="npm"
-npm install intlayer svelte-intlayer
-npm install vite-intlayer --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer svelte-intlayer
-pnpm add vite-intlayer --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add intlayer svelte-intlayer
-yarn add vite-intlayer --save-dev
-```
-
-```bash packageManager="bun"
-bun add intlayer svelte-intlayer
-bun add vite-intlayer --save-dev
-```
-
-- **intlayer**: The core i18n package.
-- **svelte-intlayer**: Provides context providers and stores for Svelte/SvelteKit.
-- **vite-intlayer**: The Vite plugin to integrate content declarations with the build process.
-
-</Step>
-
-<Step number={2} title="Configuration of your project">
-
-Create a config file in your project root:
-
-```typescript fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-</Step>
-
-<Step number={3} title="Integrate Intlayer in Your Vite Configuration">
-
-Update your `vite.config.ts` to include the Intlayer plugin. This plugin manages the transpilation of your content files.
-
-```typescript fileName="vite.config.ts"
-import { sveltekit } from "@sveltejs/kit/vite";
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [intlayer(), sveltekit()], // order matters, Intlayer should be placed before SvelteKit
-});
-```
-
-</Step>
-
-<Step number={4} title="Declare Your Content">
-
-Create your content declaration files anywhere in your `src` folder (e.g., `src/lib/content` or alongside your components). These files define the translatable content for your application using the `t()` function for each locale.
-
-```ts fileName="src/features/hero/hero.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
-import { t, type Dictionary } from "intlayer";
-
-const heroContent = {
-  key: "hero-section",
-  content: {
-    title: t({
-      en: "Welcome to SvelteKit",
-      fr: "Bienvenue sur SvelteKit",
-      es: "Bienvenido a SvelteKit",
-    }),
-  },
-} satisfies Dictionary;
-
-export default heroContent;
-```
-
-</Step>
-
-<Step number={5} title="Utilise Intlayer in Your Components">
-
 prefix to access its reactive value (e.g., `$content.title`).
 
 ```svelte fileName="src/lib/components/Component.svelte"

package/docs/en-GB/intlayer_with_tanstack+solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "TanStack Start + Solid i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) TanStack Start + Solid app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -828,6 +828,8 @@ bun x intlayer extract
 
 Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
 
+> Since Intlayer v9, the compiler is bundled directly into the `intlayer()` plugin and activates automatically once `compiler.enabled` is set with a `compiler.output` path. Registering `intlayerCompiler()` separately as shown below is now optional — it deduplicates itself if also added. See the [v9 release notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/releases/v9.md).
+
 ```ts fileName="vite.config.ts"
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 import { defineConfig } from "vite";

package/docs/en-GB/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "TanStack Start i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) TanStack Start app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:

package/docs/en-GB/intlayer_with_vite+lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + Lit i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Vite + Lit app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:

package/docs/en-GB/intlayer_with_vite+preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + Preact i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Vite + Preact app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:
@@ -65,6 +65,10 @@ author: aymericzip
 
 See [Application Template](https://github.com/aymericzip/intlayer-vite-preact-template) on GitHub.
 
+## Table of Contents
+
+<TOC/>
+
 ## Why Intlayer over alternatives?
 
 Compared to main solutions like `preact-i18n` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as:

package/docs/en-GB/intlayer_with_vite+react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + React i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Vite + React app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:

package/docs/en-GB/intlayer_with_vite+react_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + React i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Vite + React app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:

package/docs/en-GB/intlayer_with_vite+solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + Solid i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Vite + Solid app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords:

package/docs/en-GB/intlayer_with_vite+svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Vite + Svelte i18n - Complete guide to translate your app"
 description: "No more i18next. The 2026 guide to building a multilingual (i18n) Vite + Svelte app. Translate with AI agents and optimise bundle size, SEO and performances."
 keywords: