@intlayer/docs 9.4.1 → 9.4.3

package/docs/en-GB/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-08-25
+updatedAt: 2026-08-30
 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:
@@ -63,7 +63,6 @@ This guide demonstrates how to integrate **Intlayer** for seamless international
 Compared to main solutions like `react-i18next` or `use-intl`, or `paraglide`, Intlayer is a solution that comes with integrated optimizations such as:
 
 <AccordionGroup>
-
 <Accordion header="Full TanStack Start coverage">
 
 Intlayer is fully optimized for TanStack Start, providing **multilingual routing**, **cookie management**, **sitemap generation**, **dynamic content loading**, and all the features needed to scale your internationalization (i18n) efforts.
@@ -160,15 +159,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > the `--interactive` flag is optional. Use `intlayer-cli init` if you're an AI agent.
@@ -650,8 +649,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
----
-
 </Step>
 
 <Step number={11} title="Add middleware">
@@ -688,8 +685,6 @@ export default defineConfig({
 });
 ```
 
----
-
 </Step>
 
 <Step number={12} title="Internationalise your Metadata">
@@ -883,8 +878,6 @@ You keep the per-locale chunk without paying its cost on the head critical path.
 | Client navigations   | nothing to resolve    | re-entered on every match  | served from the router cache           |
 | Developer experience | simplest              | one `await`                | content threaded through `loaderData`  |
 
----
-
 </Step>
 
 <Step number={13} title="Retrieve the locale in your server actions">
@@ -922,140 +915,12 @@ export const getLocaleServer = createServerFn().handler(async () => {
 });
 ```
 
----
-
 </Step>
 
 <Step number={14} title="Manage not found pages">
 
 When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.
 
-#### Localised Home Page
-
-> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
->
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
-> To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useIntlayer.md).
-
-</Step>
-
-```tsx fileName="src/components/locale-switcher.tsx"
-import { useLocation } from "@tanstack/react-router";
-import {
-  getHTMLTextDir,
-  getLocaleName,
-  getPathWithoutLocale,
-  getPrefix,
-  Locales,
-} from "intlayer";
-import type { FC } from "react";
-import { useLocale } from "react-intlayer";
-
-import { LocalisedLink, type To } from "./localized-link";
-
-export const LocaleSwitcher: FC = () => {
-  const { pathname } = useLocation();
-
-  const { availableLocales, locale, setLocale } = useLocale();
-
-  const pathWithoutLocale = getPathWithoutLocale(pathname);
-
-  return (
-    <ol>
-      {availableLocales.map((localeEl) => (
-        <li key={localeEl}>
-          <LocalisedLink
-            aria-current={localeEl === locale ? "page" : undefined}
-            onClick={() => setLocale(localeEl)}
-            params={{ locale: getPrefix(localeEl).localePrefix }}
-            to={pathWithoutLocale as To}
-          >
-            <span>
-              {/* Locale - e.g. FR */}
-              {localeEl}
-            </span>
-            <span>
-              {/* Language in its own Locale - e.g. Français */}
-              {getLocaleName(localeEl, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
-              {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}
-              {getLocaleName(localeEl)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Language in English - e.g. French */}
-              {getLocaleName(localeEl, Locales.ENGLISH)}
-            </span>
-          </LocalisedLink>
-        </li>
-      ))}
-    </ol>
-  );
-};
-```
-
-> To Learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useLocale.md).
-
-</Step>
-
-<Step number={11} title="HTML Attributes Management">
-
-return (
-<html dir={getHTMLTextDir(locale)} lang={locale}>
-{/* ... _/}
-</html>
-);
-} {/_ ... */}
-</html>
-);
-}
-
-export const Route = createFileRoute("/{-$locale}/")({
-component: RouteComponent,
-head: async ({ params }) => {
-const { locale = defaultLocale } = params;
-const path = "/"; // The path for this route
-
-    const metaContent = await getIntlayerAsync("app", locale);
-
-````
-
-> If a `head` reads several dictionaries, resolve them with `Promise.all`: awaiting each `getIntlayerAsync` on its own line chains the requests instead of running them in parallel.
-
-The trade-off: the dynamic import is resolved while `head` runs, on the critical path of the document render. On a cold route this delays the head by a few milliseconds and can slightly degrade **LCP**.
-
-</Tab>
-
-<Tab label="Cached dynamic resolution" value="cached">
-
-Resolve the dictionary in the route `loader` and read it back from `loaderData` in `head`. Loaders of the matched routes run in parallel, and `staleTime: Infinity` tells TanStack Router the result never goes stale, so the per-locale chunk is resolved once and served from the router cache afterwards, leaving `head` synchronous.
-
-```tsx fileName="src/routes/{-$locale}/index.tsx"
-      return getCookie(name, cookieString);
-    },
-    // Get the header from the request (default: 'x-intlayer-locale')
-    // Fallback using Accept-Language negotiation
-    getHeader: (name) => getRequestHeader(name),
-  });
-
-  // Retrieve some content using getIntlayer()
-  const content = getIntlayer("app", locale);
-
-````
-
----
-
-</Step>
-
-<Step number={15} title="Manage not found pages">
-
-When a user visits a non-existing page, you can display a custom not found page and the locale prefix may impact the way the not found page is triggered.
-
 #### Understanding TanStack Router's 404 Handling with Locale Prefixes
 
 In TanStack Router, handling 404 pages with localised routes requires a multi-layered approach:
@@ -1065,20 +930,70 @@ In TanStack Router, handling 404 pages with localised routes requires a multi-la
 3. **Catch-all route**: Captures any unmatched paths within the locale segment
 
 ```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+// This creates a dedicated /[locale]/404 route
+// It's used both as a direct route and imported as a component in other files
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
 
+// Exported separately so it can be reused in notFoundComponent and catch-all routes
+export function NotFoundComponent() {
+  return (
+    <div>
+      <h1>404</h1>
+    </div>
+  );
+}
 ```
 
 ```tsx fileName="src/routes/{-$locale}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { NotFoundComponent } from "./404";
+
+export const Route = createFileRoute("/{-$locale}")({
+  // beforeLoad runs before the route renders (on both server and client)
+  // It's the ideal place to validate the locale prefix
+  beforeLoad: ({ params }) => {
+    const localeParam = params.locale;
+
+    // validatePrefix checks if the locale is valid according to your intlayer config
+    const { isValid, localePrefix } = validatePrefix(localeParam);
 
+    if (!isValid) {
+      // Invalid locale prefix - redirect to the 404 page with a valid locale prefix
+      throw redirect({
+        to: "/{-$locale}/404",
+        params: { locale: localePrefix },
+      });
+    }
+  },
+  component: Outlet,
+  // notFoundComponent is called when a child route doesn't exist
+  // e.g., /en/non-existent-page triggers this within the /en layout
+  notFoundComponent: NotFoundComponent,
+});
 ```
 
 ```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
+import { NotFoundComponent } from "./404";
 
+// The $ (splat/catch-all) route matches any path that doesn't match other routes
+// e.g., /en/some/deeply/nested/invalid/path
+// This ensures ALL unmatched paths within a locale show the 404 page
+// Without this, unmatched deep paths might show a blank page or error
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
 ```
 
 </Step>
 
-<Step number={15} title="Extract the content of your components" isOptional={true}>
+<Step number={15} title="Extract the content of your components" isOptional={true}> isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -1089,11 +1004,28 @@ To set it up, you can add a `compiler` section in your `intlayer.config.ts` file
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
+const config: IntlayerConfig = {
+  // ... Rest of your config
+  compiler: {
+    /**
+     * Indicates if the compiler should be enabled.
+     */
+    enabled: true,
+
     /**
      * Defines the output files path
      */
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
+    /**
+     * Indicates if the components should be saved after being transformed.
+     *
+     * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.
+     *
+     * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
+     */
+    saveComponents: false,
+
     /**
      * Dictionary key prefix
      */
@@ -1105,39 +1037,77 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Extract command'>
+ <Tab value="Extract command">
 
 Run the extractor to transform your components and extract the content
 
 ```bash packageManager="npm"
-
+npx intlayer extract
 ```
 
 ```bash packageManager="pnpm"
-
+pnpm intlayer extract
 ```
 
 ```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value="Babel compiler">
+
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
+Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Adds the compiler plugin
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # Or npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
 
+```bash packageManager="yarn"
+yarn build # Or yarn dev
 ```
 
 ```bash packageManager="bun"
+bun run build # Or bun run dev
+```
 
-</Tab>
+ </Tab>
 </Tabs>
 
----
+</Step>
 
-I'm ready to help audit the translation. However, I notice that:
+<Step number={16} title="Generate Sitemap">
 
-1. **BLOCK 2 of 3** (the English reference) appears to be empty
-2. **BLOCK 2 of 3** (the current en-GB content to review) also appears to be empty
+Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
 
-Could you please provide:
-- The English (en) source content that I should use as reference
-- The British English (en-GB) content that needs to be audited
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
 
-Once you share the actual content blocks, I'll perform the audit and return the corrected, fully updated file in British English (en-GB).---
+To use it, you first need to configure your `vite.config.ts` to enable pre-rendering for your localized routes and disable the default TanStack Start sitemap generation.
+
+```typescript fileName="vite.config.ts"
+import { localeFlatMap } from "intlayer";
+// ... other imports
 
 export const pathList = ["", "/about", "/404"];
 
@@ -1171,24 +1141,13 @@ export default defineConfig({
 
 Then, create a `src/routes/sitemap[.]xml.ts` route that uses the `generateSitemap` function:
 
-````typescript fileName="src/routes/sitemap[.]xml.ts"
-
----
-
-I have received:
-- **BLOCK 1 of 2** (English reference): `</Step>`
-- **BLOCK 1 of 2** (Current en-GB to review): empty
-
-<Step number={17} title="Configure TypeScript">
-
-I'm ready to audit and update the translation to British English (en-GB). However, I notice that the blocks appear to be empty in your message.
-
-Please provide:
-
-1. **BLOCK 3 of 3** - The English (en) source content that serves as the reference
-2. **Current content in British English (en-GB)** - The translation that needs to be audited and updated
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
 
-I'm waiting for the content blocks to proceed with the audit.---
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
 
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
@@ -1209,6 +1168,17 @@ export const Route = createFileRoute("/sitemap.xml")({
     },
   },
 });
+```
+
+</Step>
+
+<Step number={17} title="Configure TypeScript">
+
+Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
+
+Ensure your TypeScript configuration includes the autogenerated types:
+
+```json5 fileName="tsconfig.json"
 {
   // ... your existing configurations
   include: [
@@ -1216,6 +1186,11 @@ export const Route = createFileRoute("/sitemap.xml")({
     ".intlayer/**/*.ts", // Include the auto-generated types
   ],
 }
+```
+
+</Step>
+
+</Steps>
 
 ### Git Configuration
 
@@ -1226,7 +1201,7 @@ To do this, you can add the following instructions to your `.gitignore` file:
 ```plaintext fileName=".gitignore"
 # Ignore the files generated by Intlayer
 .intlayer
-````
+```
 
 ---
 
@@ -1261,3 +1236,116 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 - [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useLocale.md)
 - [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/content_file.md)
 - [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md)
+
+## Frequently Asked Questions
+
+<FAQ>
+
+<Question title="What are the different solutions available to internationalize a TanStack Start app?">
+
+TanStack Start ships no i18n layer of its own, so the choice is a library:
+
+- **`i18next` / `react-i18next`** and **`react-intl`**: framework agnostic message catalogues, wired manually into the router.
+- **`Lingui`**: ICU messages with a compile step.
+- **`Paraglide`**: compiled messages, focused on the message layer only.
+- **`Intlayer`**: the most advanced solution. Content declared anywhere in your codebase ([next to each component or centralized](https://intlayer.org/blog/per-component-vs-centralized-i18n)) and compiled at build time, with typed keys, locale aware routing, sitemap generation, AI translation, a visual editor and a CMS.
+
+The difference that matters on TanStack Start is routing and server rendering. Intlayer integrates with the file based router, the `head` function and the pre-render pass, instead of leaving you to assemble a provider, a locale detector and a sitemap by hand. See [why Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/interest_of_intlayer.md) and the [TanStack Start i18n benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/benchmark/tanstack.md).
+
+</Question>
+
+<Question title="How much does i18n add to my TanStack Start bundle size?">
+
+Much less than a namespace based setup, because a page never downloads a catalogue it does not render. Server rendered markup resolves its content on the server, and the build time compiler replaces `useIntlayer` calls with the exact dictionary entries a component uses, so unused keys and unused languages are dropped, and [dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dynamic_dictionaries/index.md) split the rest per locale. Measured against the usual alternatives, Intlayer reduces bundle and page size by up to 50%. See [bundle optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/bundle_optimization.md) and the [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/benchmark/tanstack.md).
+
+</Question>
+
+<Question title="Can I migrate from `react-i18next` or `react-intl` without rewriting my components?">
+
+Yes, and there are two paths. You can migrate the content progressively with the [react-i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_react-i18next_to_intlayer.md) or the [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_i18next_to_intlayer.md). Or you can keep your current API entirely: the [compat adapters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compat/index.md) expose the exact same API as `react-i18next`, `react-intl` and `i18next`, but served by Intlayer dictionaries, so imports change and component code does not.
+
+</Question>
+
+<Question title="Can I keep my existing JSON translation files?">
+
+Yes. The [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/plugins/sync-json.md) keeps your `/messages/{locale}/{namespace}.json` files as the source of truth and generates Intlayer dictionaries from them, in both directions. A [sync PO plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/plugins/sync-po.md) does the same for gettext catalogues, and [per locale files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/per_locale_file.md) let you split content by language instead of grouping locales in one file.
+
+</Question>
+
+<Question title="Do I have to move my content key by key?">
+
+No. Run `npx intlayer extract` and Intlayer reads your components, pulls the user facing strings out and writes a `.content` file next to each one, so you review a diff instead of copying strings into a catalogue one at a time. Step 15 of this guide walks through it.
+
+For a fully automated pipeline, the [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compiler.md) does the same at build time: it scans your JSX, TSX, Vue and Svelte source on every change, generates the dictionaries and keeps them in sync through hot module replacement, so there are no keys to maintain by hand at all.
+
+Two limits are worth knowing before you turn the compiler on. It works by static analysis, so strings that only exist at runtime, such as API error codes or CMS fields, stay out of reach. And it has to tell user facing text apart from application logic like `className="active"` or a status code, which needs a few annotations in a large codebase. The [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/extract.md) avoids both by keeping you in the loop.
+
+</Question>
+
+<Question title="What editor and AI agent tooling is available?">
+
+Five pieces, all optional:
+
+- **[VS Code extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/vs_code_extension.md)**: jump from a `useIntlayer` key to the content file that declares it, extract content from a component, and run build, fill, test, push and pull from the command palette or a dedicated Intlayer tab.
+- **[LSP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/lsp.md)**: the same awareness in any editor that speaks LSP, with go to definition, find all references, hover previews of a translated value, autocompletion of keys and fields, and a warning when a key is not declared anywhere. It also resolves `i18next`, `react-i18next`, `next-intl` and `use-intl` calls, which helps while you migrate.
+- **[MCP server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/mcp_server.md)**: exposes the Intlayer documentation and CLI to Cursor, VS Code, Claude Desktop, Claude Code and ChatGPT, so an assistant answers from current docs instead of guessing, and can run commands such as `intlayer fill` itself.
+- **[Agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/agent_skills.md)**: focused skills such as `intlayer-config`, `intlayer-cli` and `intlayer-content`, plus one per framework, that teach an agent your routing setup and the content node types.
+- **[ESLint plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/eslint.md)**: `no-raw-text` flags hardcoded strings, with further rules for static dictionary keys and unused content.
+
+</Question>
+
+<Question title="Does Intlayer support server side rendering and pre-rendering in TanStack Start?">
+
+Yes. Content resolves during SSR, and the guide covers the pre-render configuration that emits one static document per localized route. Step 16 shows how to enable `prerender` in `vite.config.ts` and generate a localized sitemap from the same route table.
+
+</Question>
+
+<Question title="How do I add hreflang tags and a localized sitemap?">
+
+Use the built-in `generateSitemap` function in a `src/routes/sitemap[.]xml.ts` route. Unlike a plain URL list, it emits the `xhtml:link` namespace, so every language version of a page links bidirectionally to the others and search engines index the right one for each audience. Localized `head` metadata is covered in step 12.
+
+</Question>
+
+<Question title="Do I have to put the locale in the URL?">
+
+No. `routing.mode` controls the URL scheme: `"prefix-no-default"` (the default, `/about` and `/fr/about`), `"prefix-all"` (`/en/about`), `"no-prefix"` (resolved from cookie, header or domain) or `"search-params"` (`/about?locale=fr`). Locales can also be mapped to separate domains with `routing.domains`. See the [configuration reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md).
+
+</Question>
+
+<Question title="How do I build a locale switcher that keeps the current route?">
+
+Use `useLocale` together with the localized link component described in step 9. `useLocale` exposes the active locale, the available locales and a setter that persists the choice, while `getLocalizedUrl` rewrites the current path into the target language so the user stays on the same page instead of landing on the home page.
+
+</Question>
+
+<Question title="How do I handle 404 pages on localized routes?">
+
+Step 14 covers it. `validatePrefix` tells you whether the locale segment of the URL is a declared locale, so `/xx/about` returns a real 404 instead of being treated as a path. Without it, an unknown prefix silently resolves and search engines index a duplicate page.
+
+</Question>
+
+<Question title="How do I translate a TanStack Start app automatically with AI?">
+
+Run `npx intlayer fill`. The CLI finds missing translations and fills them with the LLM of your choice, using your own provider and API key. Add `--git-diff` to translate only the content changed on the current branch, which keeps CI runs cheap. See the [fill command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/fill.md) and [CI/CD integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/CI_CD.md).
+
+</Question>
+
+<Question title="Does Intlayer support plurals, gender and rich text?">
+
+Yes. Content declarations support [plural forms](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/plurial.md), [gender based content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/gender.md), conditions, [insertions](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/insertion.md) and [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/markdown.md) for long form text, with [formatters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/formatters.md) for numbers, dates and currencies.
+
+</Question>
+
+<Question title="How can translators edit the content without touching the code?">
+
+Through the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md), which runs on your own infrastructure and lets anyone edit text in place on the running site, or the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md), which externalizes content so it can change without a deployment.
+
+</Question>
+
+<Question title="Is Intlayer free and open source?">
+
+Yes, under the Apache 2.0 licence, commercial use included. The hosted CMS is an optional paid service that can also be [self hosted](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/self_hosting.md).
+
+</Question>
+
+</FAQ>