---
createdAt: 2025-04-18
updatedAt: 2026-09-27
priority: 9
title: "Vite + Solid i18n - Complete guide to translate your app"
description: "Set up Intlayer in a Vite and Solid app: reactive translated content, a locale switcher, localized routes and typed dictionaries."
keywords:
- Internationalization
- Documentation
- Intlayer
- Vite
- Solid
- JavaScript
slugs:
- doc
- environment
- vite-and-solid
applicationTemplate: https://github.com/aymericzip/intlayer-vite-solid-template
applicationShowcase: https://intlayer-vite-solid.vercel.app
history:
- version: 8.9.0
date: 2026-05-04
changes: "Update Solid useIntlayer API usage to direct property access"
- version: 7.5.9
date: 2025-12-30
changes: "Add init command"
- version: 5.5.10
date: 2025-06-29
changes: "Initial history"
author: aymericzip
---
# Translate your Vite and Solid website using Intlayer
## Table of Contents
## Why Intlayer over alternatives?
Compared to main solutions like `@solid-primitives/i18n` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as:
Intlayer is optimized to work perfectly with Solid by offering **component-level content scoping**, **reactive translations**, and all the features needed for scaling internationalization (i18n).
Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
- [LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)
- [MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)
- [agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)
Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) to help **translate in the background**.
- [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time.
More than just an i18n solution, Intlayer provides an **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
- [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)
- [full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
## Step-by-Step Guide to Set Up Intlayer in a Vite and Solid Application
## Table of Contents
Install the necessary packages using npm:
```bash packageManager="npm"
npx intlayer init --interactive
```
```bash packageManager="pnpm"
pnpm dlx intlayer init --interactive
```
```bash packageManager="yarn"
yarn dlx intlayer init --interactive
```
```bash packageManager="bun"
bunx intlayer 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 solid-intlayer
npm install vite-intlayer --save-dev
```
```bash packageManager="pnpm"
pnpm add intlayer solid-intlayer
pnpm add vite-intlayer --save-dev
```
```bash packageManager="yarn"
yarn add intlayer solid-intlayer
yarn add vite-intlayer --save-dev
```
```bash packageManager="bun"
bun add intlayer solid-intlayer
bun add vite-intlayer --dev
```
- **intlayer**
The core package that provides internationalization tools for configuration management, translation, [content declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), transpilation, and [CLI commands](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md).
- **solid-intlayer**
The package that integrates Intlayer with Solid application. It provides context providers and hooks for Solid internationalization.
- **vite-intlayer**
Includes the Vite plugin for integrating Intlayer with the [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.
### Architecture
In this architecture, `solid-intlayer` provides the `IntlayerProvider` mounted in `index.tsx` to wrap the Solid tree. Content declarations live in `src/` alongside components.
```bash
.
├── src
│ ├── app.content.ts
│ ├── App.css
│ ├── App.tsx # Main Solid component
│ ├── index.css
│ ├── index.tsx # Entry point with IntlayerProvider
│ └── vite-env.d.ts
├── index.html
├── intlayer.config.ts
├── package.json
├── tsconfig.json
└── vite.config.ts
```
### Configuration
Create a config file to configure the languages of your application:
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
import { Locales, type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [
Locales.ENGLISH,
Locales.FRENCH,
Locales.SPANISH,
// Your other locales
],
defaultLocale: Locales.ENGLISH,
},
};
export default config;
```
> Through this configuration file, you can set up localized URLs, middleware redirection, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
- [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
Add the intlayer plugin into your configuration.
```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import { intlayer } from "vite-intlayer";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [solid(), intlayer()],
});
```
> The `intlayer()` Vite plugin is used to integrate Intlayer with Vite. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Vite application. Additionally, it provides aliases to optimize performance.
Create and manage your content declarations to store translations:
```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
import { t, type Dictionary } from "intlayer";
const appContent = {
key: "app",
content: {
viteLogo: t({
en: "Vite logo",
fr: "Logo Vite",
es: "Logo Vite",
}),
solidLogo: t({
en: "Solid logo",
fr: "Logo Solid",
es: "Logo Solid",
}),
title: "Vite + Solid",
count: t({
en: "count is {{count}}",
fr: "le compte est {{count}}",
es: "el recuento es {{count}}",
}),
edit: t({
en: "Edit src/App.tsx and save to test HMR",
fr: "Éditez src/App.tsx et enregistrez pour tester HMR",
es: "Edita src/App.tsx y guarda para probar HMR",
}),
readTheDocs: t({
en: "Click on the Vite and Solid logos to learn more",
fr: "Cliquez sur les logos Vite et Solid pour en savoir plus",
es: "Haga clic en los logotipos de Vite and Solid para obtener más información",
}),
},
} satisfies Dictionary;
export default appContent;
```
```json fileName="src/app.content.json" contentDeclarationFormat="json"
{
"$schema": "https://intlayer.org/schema.json",
"key": "app",
"content": {
"viteLogo": {
"nodeType": "translation",
"translation": {
"en": "Vite logo",
"fr": "Logo Vite",
"es": "Logo Vite"
}
},
"solidLogo": {
"nodeType": "translation",
"translation": {
"en": "Solid logo",
"fr": "Logo Solid",
"es": "Logo Solid"
}
},
"title": {
"nodeType": "translation",
"translation": {
"en": "Vite + Solid",
"fr": "Vite + Solid",
"es": "Vite + Solid"
}
},
"count": {
"nodeType": "translation",
"translation": {
"en": "count is {{count}}",
"fr": "le compte est {{count}}",
"es": "el recuento es {{count}}"
}
},
"edit": {
"nodeType": "translation",
"translation": {
"en": "Edit src/App.tsx and save to test HMR",
"fr": "Éditez src/App.tsx et enregistrez pour tester HMR",
"es": "Edita src/App.tsx y guarda para probar HMR"
}
},
"readTheDocs": {
"nodeType": "translation",
"translation": {
"en": "Click on the Vite and Solid logos to learn more",
"fr": "Cliquez sur les logos Vite and Solid pour en savoir plus",
"es": "Haga clic en los logotipos de Vite and Solid para obtener más información"
}
}
}
}
```
> Your content declarations can be defined anywhere in your application as soon they are included into the `contentDir` directory (by default, `./src`). And match the content declaration file extension (by default, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
>
> For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
- [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
Access your content dictionaries throughout your application:
```tsx {1,11} fileName="src/App.tsx" codeFormat="typescript"
import { createSignal, type Component } from "solid-js";
import solidLogo from "./assets/solid.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { IntlayerProvider, useIntlayer } from "solid-intlayer";
const AppContent: Component = () => {
const [count, setCount] = createSignal(0);
const content = useIntlayer("app");
return (
<>
{content.title}
{content.edit}
{content.readTheDocs}
);
};
const App: Component = () => (
);
export default App;
```
> In Solid, `useIntlayer` returns reactive content (e.g., `content`). You can access its properties directly.
> 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:
>
> ```tsx
>
>
>
> ```
To change the language of your content, you can use the `setLocale` function provided by the `useLocale` hook. This function allows you to set the locale of the application and update the content accordingly.
```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
import { type Component, For } from "solid-js";
import { Locales } from "intlayer";
import { useLocale } from "solid-intlayer";
const LocaleSwitcher: Component = () => {
const { locale, setLocale, availableLocales } = useLocale();
return (
);
};
```
The purpose of this step is to make unique routes for each language. This is useful for SEO and SEO-friendly URLs.
Example:
```plaintext
- https://example.com/about
- https://example.com/es/about
- https://example.com/fr/about
```
To add localized routing to your application, you can use `@solidjs/router`.
First, install the necessary dependencies:
```bash packageManager="npm"
npm install @solidjs/router
```
Then, wrap your application with the `Router` and define your routes using `localeMap`:
```tsx fileName="src/index.tsx" codeFormat="typescript"
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
const root = document.getElementById("root");
render(
() => (
),
root!
);
```
```tsx fileName="src/App.tsx" codeFormat="typescript"
import { type Component } from "solid-js";
import { Route } from "@solidjs/router";
import { localeMap } from "intlayer";
import { IntlayerProvider } from "solid-intlayer";
import Home from "./pages/Home";
import About from "./pages/About";
const App: Component = () => (
{localeMap(({ locale, urlPrefix }) => (
(
{props.children}
)}
>
))}
);
export default App;
```
To change the URL when the locale changes, you can use the `onLocaleChange` prop provided by the `useLocale` hook. You can use the `useNavigate` and `useLocation` hooks from `@solidjs/router` to update the URL path.
```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
import { type Component, For } from "solid-js";
import { useLocation, useNavigate } from "@solidjs/router";
import { getLocalizedUrl } from "intlayer";
import { useLocale } from "solid-intlayer";
const LocaleSwitcher: Component = () => {
const location = useLocation();
const navigate = useNavigate();
const { locale, setLocale, availableLocales } = useLocale({
onLocaleChange: (loc) => {
const pathWithLocale = getLocalizedUrl(location.pathname, loc);
navigate(pathWithLocale);
},
});
return (
);
};
```
Update the `` tag's `lang` and `dir` attributes to match the current locale for accessibility and SEO.
```tsx fileName="src/App.tsx" codeFormat="typescript"
import { createEffect, type Component } from "solid-js";
import { useLocale } from "solid-intlayer";
import { getHTMLTextDir } from "intlayer";
const AppContent: Component = () => {
const { locale } = useLocale();
createEffect(() => {
document.documentElement.lang = locale();
document.documentElement.dir = getHTMLTextDir(locale());
});
return (
// ... Your application content
);
};
```
Create a custom `Link` component that automatically prefixes internal URLs with the current language.
```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
import { type ParentComponent } from "solid-js";
import { A, type AnchorProps } from "@solidjs/router";
import { getLocalizedUrl } from "intlayer";
import { useLocale } from "solid-intlayer";
export const Link: ParentComponent = (props) => {
const { locale } = useLocale();
const isExternal = () => props.href.startsWith("http");
const localizedHref = () =>
isExternal() ? props.href : getLocalizedUrl(props.href, locale());
return ;
};
```
In parallel, you can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
> Note that to use the `intlayerProxy` in production, you need to switch the `vite-intlayer` package from `devDependencies` to `dependencies`.
> Since Intlayer v9, `intlayerProxy()` is bundled directly into the `intlayer()` plugin and enabled by default through the `routing.enableProxy` option (`true` by default). Registering it separately as shown below is now optional. It is kept for backward compatibility and for setups that need to control plugin order. Set `routing.enableProxy: false` to opt out. See the [v9 release notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/releases/v9.md).
- [v9 release notes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/releases/v9.md)
```typescript {3,7} fileName="vite.config.ts"
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import { intlayer } from "vite-intlayer";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
solid(),
intlayer({
proxy: {
ignore: (req) => req.url?.startsWith("/api"),
},
}),
],
});
```
If you have an existing codebase, transforming thousands of files can be time-consuming.
To ease this process, Intlayer propose a [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md) to transform your components and extract the content.
- [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md)
- [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md)
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
*/
dictionaryKeyPrefix: "",
},
};
export default config;
```
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
```
> 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
],
});
```
Build your application to transform your components and extract the content
```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
```
### (Optional) Sitemap and robots.txt (build-time)
Intlayer includes formatters such as `generateSitemap` and `getMultilingualUrls` that produce crawler-ready multilingual `sitemap.xml` and `robots.txt` output you can write into your project’s `public/` folder. In practice you run a small Node script **before** Vite (for example `predev` / `prebuild` npm hooks) so those files exist when you build or serve the app.
#### Sitemap
Intlayer’s sitemap generator respects your locale setup and includes the usual metadata for crawlers.
> The generated sitemap supports the `xhtml:link` namespace (hreflang XML extensions). Unlike basic generators that only emit flat URLs, Intlayer wires bidirectional links between every localized variant of each page (for example `/about`, `/fr/about`, or `/about?lang=fr`, depending on your routing mode), which helps search engines relate localized URLs.
#### Robots.txt
Use `getMultilingualUrls` so `Disallow` entries cover every localized spelling of sensitive paths.
#### 1. Add `generate-seo.mjs` at the project root
```javascript fileName="generate-seo.mjs"
import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
/\/$/,
""
);
const pathList = [
{ path: "/", changefreq: "daily", priority: 1.0 },
{ path: "/about", changefreq: "monthly", priority: 0.7 },
];
const sitemapXml = generateSitemap(pathList, {
siteUrl: "https://example.com",
});
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
const getAllMultilingualUrls = (urls) =>
urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
const robotsTxt = [
"User-agent: *",
"Allow: /",
...disallowedPaths.map((path) => `Disallow: ${path}`),
"",
`Sitemap: https://example.com/sitemap.xml`,
].join("\n");
fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
console.log("SEO files generated successfully.");
```
`intlayer` must be installed so the script can import it. Set `SITE_URL` in the environment for production (for example in CI).
> Prefer `generate-seo.mjs` for Node ESM. If you use `generate-seo.js` instead, ensure `"type": "module"` is set in `package.json`, or run Node with ESM enabled.
#### 2. Run the script before Vite
```json fileName="package.json"
{
"scripts": {
"dev": "vite",
"prebuild": "node generate-seo.mjs",
"build": "vite build",
"preview": "vite preview"
}
}
```
Adjust if you use pnpm or yarn. You can also invoke the same script from CI or another step if that fits your workflow.
### Configure TypeScript
Ensure your TypeScript configuration includes the autogenerated types.
```json5 fileName="tsconfig.json"
{
"compilerOptions": {
// ...
},
"include": ["src", ".intlayer/**/*.ts"],
}
```
### Git Configuration
It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
To do this, you can add the following instructions to your `.gitignore` file:
```bash
# Ignore the files generated by Intlayer
.intlayer
```
### VS Code Extension
To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.
- [Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
This extension provides:
- **Autocompletion** for translation keys.
- **Real-time error detection** for missing translations.
- **Inline previews** of translated content.
- **Quick actions** to easily create and update translations.
For more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/vs_code_extension.md).
- [Intlayer VS Code Extension documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/vs_code_extension.md)
### Go Further
To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
- [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)
- [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
## Frequently Asked Questions
Vite has no opinion on i18n, so the choice comes from the Solid ecosystem:
- **`@solid-primitives/i18n`**: the community primitive, a flat dictionary you assemble and load yourself.
- **`i18next`** with a Solid wrapper: mature catalogs, but no reactivity story of its own.
- **`Intlayer`**: the most advanced solution. Content declared anywhere in your codebase ([next to each component or centralized](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/per-component_vs_centralized_i18n.md)) and compiled by the Vite plugin at build time, fully typed, with AI translation, a visual editor and a CMS.
The Vite specific gain is that translations are resolved and tree shaken at compile time instead of being fetched as JSON at runtime, so a page ships only the entries it renders. See [why Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/interest_of_intlayer.md) and the [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/index.md).
- [why Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/interest_of_intlayer.md)
- [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/index.md)
Much less than a namespace based setup, because a page never downloads a catalog it does not render. 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/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/bundle_optimization.md) and the [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/solid.md).
- [dynamic dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md)
- [bundle optimization](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/bundle_optimization.md)
- [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/benchmark/solid.md)
Largely. Follow the [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_i18next_to_intlayer.md) to move the content over. You can also migrate gradually: the [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md) keeps your existing JSON catalogs as the source of truth and generates Intlayer dictionaries from them, so both layers stay in sync while you move components across one at a time.
- [i18next migration guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_i18next_to_intlayer.md)
- [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md)
Yes. The [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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/plugins/sync-po.md) does the same for gettext catalogs, and [per locale files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/per_locale_file.md) let you split content by language instead of grouping locales in one file.
- [sync JSON plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md)
- [sync PO plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-po.md)
- [per locale files](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/per_locale_file.md)
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 catalog one at a time. Step 11 of this guide walks through it.
For a fully automated pipeline, the [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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.
- [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md)
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/cli/extract.md) avoids both by keeping you in the loop.
- [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md)
Five pieces, all optional:
- **[VS Code extension](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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/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/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/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/eslint.md)**: `no-raw-text` flags hardcoded strings, with further rules for static dictionary keys and unused content.
Call `useIntlayer` in your component and access the values directly. The content is backed by a Solid signal, so changing the locale updates only the parts of the DOM that read it, with no component re-render. Step 5 shows the usage.
Yes. The `intlayer()` Vite plugin watches your `.content.ts` files and rebuilds the affected dictionaries on save, so edits appear without restarting the dev server, and the generated types are regenerated at the same time so autocompletion stays in sync.
Steps 7 and 8 cover the localized routes and rewriting the URL when the locale changes, and step 10 adds a localized link component. `routing.mode` decides the URL scheme: `"prefix-no-default"` (the default, `/about` and `/fr/about`), `"prefix-all"`, `"no-prefix"` (resolved from a cookie, a header or a domain) or `"search-params"` (`/about?locale=fr`). See the [configuration reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
- [configuration reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
Step 9 covers it. `getHTMLTextDir` returns `ltr`, `rtl` or `auto` for a locale, so you bind `lang` and `dir` on the root element from the active locale and let your CSS logical properties handle the rest.
Set `lang` and `dir` on the `html` element from the active locale, and emit `hreflang` alternates for every declared locale with `getMultilingualUrls`, including `x-default`. For pages that must be crawled reliably, prefer a pre-rendered or server rendered setup.
Run `npx intlayer fill`. It fills missing translations with the LLM of your choice, using your own provider and API key, and `--git-diff` limits the run to the content changed on the branch. See the [fill command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/fill.md) and [CI/CD integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/CI_CD.md).
- [fill command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/fill.md)
- [CI/CD integration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/CI_CD.md)
Yes: [plural forms](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/plurial.md), [gender based content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/gender.md), conditions, [insertions](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md) and [formatters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/formatters.md) for numbers, dates and currencies.
- [plural forms](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/plurial.md)
- [gender based content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/gender.md)
- [insertions](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/insertion.md)
- [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md)
- [formatters](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/formatters.md)
Through the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md), which runs on your own infrastructure and lets anyone edit text in place on the running app, or the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), which externalizes content so it can change without a deployment.
- [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)
- [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
The [Intlayer visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) has **zero cost** on your application if it is not set up. The extra logic is only loaded if explicitly enabled and needed.
- [Intlayer visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)
If enabled, the cost is extremely light (+5 KB, dynamically loaded only when activated) because the main logic is handled by the server editor on [app.intlayer.org](https://app.intlayer.org) or via the `intlayer-editor` package. If you only need a simple translation setup without visual editing, Intlayer adds no overhead to your app.
Yes, under the Apache 2.0 license, 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/self_hosting.md).
- [self hosted](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/self_hosting.md)
> })
> })
> ```