Per-component i18n AI-powered translation. Visual Editor. Multilingual CMS. React + Vite • Most i18n libraries are either too complex, too rigid, or not built for modern frameworks. Intlayer is a modern i18n solution for web and mobile apps. It’s framework-agnostic, AI-powered, and includes a free CMS & visual editor. With per-locale content files, TypeScript autocompletion, tree-shakable dictiona
Add this skill
npx mdskills install aymericzip/intlayerComprehensive i18n framework documentation with strong visual examples and multi-framework support
1<p align="center">2 <a href="https://intlayer.org" rel="">3 <img src="https://raw.githubusercontent.com/aymericzip/intlayer/main/docs/assets/cover.png" width="60%" alt="Intlayer Logo" />4 </a>5</p>67<h1 align="center">8 <strong>Per-component i18n</strong>9</h1>10<h2 align="center">11 <strong>AI-powered translation. Visual Editor. Multilingual CMS.</strong>12</h2>1314<br />1516<p align="center">17 <a href="https://intlayer.org/doc/concept/content" rel="">Docs</a> •18 <a href="https://intlayer.org/doc/environment/nextjs" rel="">Next.js</a> •19 <a href="https://intlayer.org/doc/environment/vite-and-react" rel="">React + Vite</a> •20 <a href="https://intlayer.org/doc/concept/cms" rel="">CMS</a> •21 <a href="https://discord.gg/7uxamYVeCk" rel="noopener noreferrer nofollow">Discord</a>22</p>23<p align="center" style="margin-top:15px;">24 <a href="https://www.npmjs.com/package/intlayer" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/v/intlayer?style=for-the-badge&labelColor=FFFFFF&color=000000&logoColor=FFFFFF" alt="npm version" height="24"/></a>25 <a href="https://github.com/aymericzip/intlayer/stargazers" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logo=github&logoColor=FFD700" alt="GitHub Stars" height="24"/></a>26 <a href="https://www.npmjs.org/package/intlayer" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/npm/dm/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="monthly downloads" height="24"/></a>27 <a href="https://github.com/aymericzip/intlayer/blob/main/LICENSE" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/license/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="license"/></a>28 <a href="https://github.com/aymericzip/intlayer/commits/main" target="_blank" rel="noopener noreferrer nofollow"><img src="https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge&labelColor=000000&color=FFFFFF&logoColor=000000&cacheSeconds=86400" alt="last commit"/>29 </a>30</p>31323334<a href="https://intlayer.org/doc/concept/content" rel="">35 <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />36</a>3738## What is Intlayer?3940Most i18n libraries are either too complex, too rigid, or not built for modern frameworks.4142Intlayer is a **modern i18n solution** for web and mobile apps.43It’s framework-agnostic, **AI-powered**, and includes a free **CMS & visual editor**.4445With **per-locale content files**, **TypeScript autocompletion**, **tree-shakable dictionaries**, and **CI/CD integration**, Intlayer makes internationalization **faster, cleaner, and smarter**.4647## Keys benefits of Intlayer:4849| Feature | Description |50| --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |51| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true" alt="Feature" width="700"> | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more. |52| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true" alt="Feature" width="700"> | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content) |53| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true" alt="Feature" width="700"> | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file) |54| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Feature" width="700"> | **Compiler**<br><br>The Intlayer Compiler extract automatically the content from the components and generate the dictionary files.<br><br> - [Compiler](https://intlayer.org/doc/compiler) |55| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true" alt="Feature" width="700"> | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript) |56| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true" alt="Feature" width="700"> | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs) |57| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true" alt="Feature" width="700"> | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app) |58| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true" alt="Feature" width="700"> | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code) |59| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true" alt="Feature" width="700"> | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components, enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer) |60| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true" alt="Feature" width="700"> | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs) |61| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true" alt="Feature" width="700"> | **Markdown Support**<br><br>Import and interpret, locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file) |62| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true" alt="Feature" width="700"> | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms) |63| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true" alt="Feature" width="700"> | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization) |64| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true" alt="Feature" width="700"> | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs) |65| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true" alt="Feature" width="700"> | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider / API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill) |66| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Feature" width="700"> | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md) |67| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Feature" width="700"> | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension) |68| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Feature" width="700"> | **Interoperability**<br><br>Allow interoperability with react-i18next, next-i18next, next-intl, react-intl, vue-i18n. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer and vue-i18n](https://intlayer.org/blog/intlayer-with-vue-i18n) |6970---7172## 📦 Installation7374Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization.7576<a href="https://intlayer.org/doc/concept/content" rel="">77 <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />78</a>7980```bash81npm install intlayer react-intlayer82```8384⚡ Quick Start (Next.js)8586```ts87// intlayer.config.ts88import { Locales, type IntlayerConfig } from "intlayer";8990const config: IntlayerConfig = {91 internationalization: {92 locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],93 defaultLocale: Locales.ENGLISH,94 },95};9697export default config;98```99100```ts101// app/home.content.ts102import { t, type Dictionary } from "intlayer";103104const content = {105 key: "home",106 content: {107 title: t({108 en: "Home",109 fr: "Accueil",110 es: "Inicio",111 }),112 },113} satisfies Dictionary;114115export default content;116```117118```tsx119// app/page.tsx120import { useIntlayer } from "react-intlayer";121122const HomePage = () => {123 const { title } = useIntlayer("home");124125 return <h1>{title}</h1>;126};127```128129<a href="https://intlayer.org/doc/environment/nextjs"> Get the full guide → </a>130131## 🎥 Live tutorial on YouTube132133[](https://youtu.be/e_PPG7PTqGU?si=GyU_KpVhr61razRw)134135<a href="https://intlayer.org/doc/concept/content" rel="">136 <img src="https://img.shields.io/badge/Get_Started-FFFFFF?style=for-the-badge&logo=rocket&logoColor=black" />137</a>138139## Table of Contents140141Explore our comprehensive documentation to get started with Intlayer and learn how to integrate it into your projects.142143<details open>144<summary style="font-size:16px; font-weight:bold;">📘 Get Started</summary>145<ul>146 <li><a href="https://intlayer.org/doc/why" rel=''>Why Intlayer?</a></li>147 <li><a href="https://intlayer.org/doc" rel=''>Introduction</a></li>148</ul>149</details>150151<details>152<summary style="font-size:16px; font-weight:bold;">⚙️ Concept</summary>153<ul>154 <li><a href="https://intlayer.org/doc/concept/how-works-intlayer" rel=''>How Intlayer Works</a></li>155 <li><a href="https://intlayer.org/doc/concept/configuration" rel=''>Configuration</a></li>156 <li><a href="https://intlayer.org/doc/concept/cli" rel=''>Intlayer CLI</a></li>157 <li><a href="https://intlayer.org/doc/concept/editor" rel=''>Intlayer Editor</a></li>158 <li><a href="https://intlayer.org/doc/concept/cms" rel=''>Intlayer CMS</a></li>159 <li><a href="https://intlayer.org/doc/concept/content" rel=''>Dictionary</a>160 <ul>161 <li><a href="https://intlayer.org/doc/concept/content/per-locale-file" rel=''>Per-Locale Content Declaration File</a></li>162 <li><a href="https://intlayer.org/doc/concept/content/translation" rel=''>Translation</a></li>163 <li><a href="https://intlayer.org/doc/concept/content/enumeration" rel=''>Enumeration</a></li>164 <li><a href="https://intlayer.org/doc/concept/content/condition" rel=''>Condition</a></li>165 <li><a href="https://intlayer.org/doc/concept/content/nesting" rel=''>Nesting</a></li>166 <li><a href="https://intlayer.org/doc/concept/content/markdown" rel=''>Markdown</a></li>167 <li><a href="https://intlayer.org/doc/concept/content/function-fetching" rel=''>Function Fetching</a></li>168 <li><a href="https://intlayer.org/doc/concept/content/insertion" rel=''>Insertion</a></li>169 <li><a href="https://intlayer.org/doc/concept/content/file" rel=''>File</a></li>170 </ul>171 </li>172</ul>173</details>174175<details open>176<summary style="font-size:16px; font-weight:bold;">🌐 Environment</summary>177<ul>178 <li><a href="https://intlayer.org/doc/environment/nextjs" rel=''>Intlayer with Next.js 16</a>179 <ul>180 <li><a href="https://intlayer.org/doc/environment/nextjs/15" rel=''>Next.js 15</a></li>181 <li><a href="https://intlayer.org/doc/environment/nextjs/14" rel=''>Next.js 14 (App Router)</a></li>182 <li><a href="https://intlayer.org/doc/environment/nextjs/next-with-Page-Router" rel=''>Next.js Page Router</a></li>183 </ul>184 </li>185 <li><a href="https://intlayer.org/doc/environment/create-react-app" rel=''>React CRA</a></li>186 <li><a href="https://intlayer.org/doc/environment/vite-and-react" rel=''>Vite + React</a>187 <ul>188 <li><a href="https://intlayer.org/doc/environment/vite-and-react/react-router-v7" rel=''>React-router-v7</a></li>189 <li><a href="https://intlayer.org/doc/environment/vite-and-react/tanstack-start" rel=''>Tanstack start</a></li>190 </ul>191 </li>192 <li><a href="https://intlayer.org/doc/environment/react-native-and-expo" rel=''>React Native</a></li>193 <li><a href="https://intlayer.org/doc/environment/lynx-and-react" rel=''>Lynx + React</a></li>194 <li><a href="https://intlayer.org/doc/environment/vite-and-svelte" rel=''>Vite + Svelte</a></li>195 <li><a href="https://intlayer.org/doc/environment/sveltekit" rel=''>SvelteKit</a></li>196 <li><a href="https://intlayer.org/doc/environment/vite-and-preact" rel=''>Vite + Preact</a></li>197 <li><a href="https://intlayer.org/doc/environment/vite-and-vue" rel=''>Vite + Vue</a></li>198 <li><a href="https://intlayer.org/doc/environment/vite-and-nuxt" rel=''>Vite + Nuxt</a></li>199 <li><a href="https://intlayer.org/doc/environment/vite-and-solid" rel=''>Vite + Solid</a></li>200 <li><a href="https://intlayer.org/doc/environment/angular" rel=''>Angular</a></li>201 <li>202 <a href="https://intlayer.org/doc/environment/express" rel=''>Backend</a>203 <ul>204 <li><a href="https://intlayer.org/doc/environment/express" rel=''>Express</a></li>205 <li><a href="https://intlayer.org/doc/environment/nest" rel=''>NestJS</a></li>206 <li><a href="https://intlayer.org/doc/environment/fastify" rel=''>Fastify</a></li>207 </ul>208 </li>209</ul>210</details>211212<details>213<summary style="font-size:16px; font-weight:bold;">📰 Blog</summary>214<ul>215 <li><a href="https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/what_is_internationalization.md" rel=''>What is i18n</a></li>216 <li><a href="https://intlayer.org/blog/SEO-and-i18n" rel=''>i18n and SEO</a></li>217 <li><a href="https://intlayer.org/blog/intlayer-with-next-i18next" rel=''>Intlayer and i18next</a></li>218 <li><a href="https://intlayer.org/blog/intlayer-with-react-i18next" rel=''>Intlayer and react-intl</a></li>219 <li><a href="https://intlayer.org/blog/intlayer-with-next-intl" rel=''>Intlayer and next-intl</a></li>220</ul>221</details>222223## 🌐 Readme in other languages224225<p align="center">226 <a href="https://github.com/aymericzip/intlayer/blob/main/readme.md">English</a> •227 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/readme.md">简体中文</a> •228 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/readme.md">Русский</a> •229 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/readme.md">日本語</a> •230 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/readme.md">Français</a> •231 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/readme.md">한국어</a> •232 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/readme.md">Español</a> •233 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/readme.md">Deutsch</a> •234 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/readme.md">العربية</a> •235 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/readme.md">Italiano</a> •236 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/readme.md">English (UK)</a> •237 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/readme.md">Português</a> •238 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/readme.md">हिन्दी</a> •239 <a href="https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/readme.md">Türkçe</a>240</p>241242## 🤝 Community243244Intlayer is built with and for the community and we’d love your input!245246- Have a suggestion? [Open an issue](https://github.com/aymericzip/intlayer/issues)247- Found a bug or improvement? [Submit a PR](https://github.com/aymericzip/intlayer/pulls)248- Need help or want to connect? [Join our Discord](https://discord.gg/7uxamYVeCk)249250You can also follow us on :251252 <div>253 <br/>254 <p align="center">255 <a href="https://discord.gg/528mBV4N" target="blank" rel='noopener noreferrer nofollow'><img align="center"256 src="https://img.shields.io/badge/discord-5865F2.svg?style=for-the-badge&logo=discord&logoColor=white"257 alt="Intlayer Discord" height="30"/></a>258 <a href="https://www.linkedin.com/company/intlayerorg" target="blank" rel='noopener noreferrer nofollow'><img align="center"259 src="https://img.shields.io/badge/linkedin-%231DA1F2.svg?style=for-the-badge&logo=linkedin&logoColor=white"260 alt="Intlayer LinkedIn" height="30"/></a>261 <a href="https://www.instagram.com/intlayer/" target="blank" rel='noopener noreferrer nofollow'><img align="center"262 src="https://img.shields.io/badge/instagram-%23E4405F.svg?style=for-the-badge&logo=Instagram&logoColor=white"263 alt="Intlayer Instagram" height="30"/></a>264 <a href="https://x.com/Intlayer183096" target="blank" rel='noopener noreferrer nofollow'><img align="center"265 src="https://img.shields.io/badge/x-1DA1F2.svg?style=for-the-badge&logo=x&logoColor=white"266 alt="Intlayer X" height="30"/></a>267 <a href="https://www.youtube.com/@intlayer" target="blank" rel='noopener noreferrer nofollow'><img align="center"268 src="https://img.shields.io/badge/youtube-FF0000.svg?style=for-the-badge&logo=youtube&logoColor=white"269 alt="Intlayer YouTube" height="30"/></a>270 <a href="https://www.tiktok.com/@intlayer" target="blank" rel='noopener noreferrer nofollow'><img align="center"271 src="https://img.shields.io/badge/tiktok-000000.svg?style=for-the-badge&logo=tiktok&logoColor=white"272 alt="Intlayer TikTok" height="30"/></a>273 <br>274 </p>275</div>276277### Contribution278279For more detailed guidelines on contributing to this project, please refer to the [`CONTRIBUTING.md`](https://github.com/aymericzip/intlayer/blob/main/CONTRIBUTING.md) file. It contains essential information on our development process, commit message conventions, and release procedures. Your contributions are valuable to us, and we appreciate your efforts in making this project better!280281Contribute on [GitHub](https://github.com/aymericzip/intlayer), [GitLab](https://gitlab.com/ay.pineau/intlayer), or [Bitbucket](https://bitbucket.org/intlayer/intlayer/).282283### Thank You for the Support284285If you like Intlayer, give us a ⭐ on GitHub. It helps others discover the project! [See why GitHub Stars matter](https://github.com/aymericzip/intlayer/blob/main/CONTRIBUTING.md#why-github-stars-matter-).286287[](https://star-history.com/#aymericzip/intlayer&Date)288
Full transparency — inspect the skill content before installing.