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
Per-component i18n
AI-powered translation. Visual Editor. Multilingual CMS.
Docs • Next.js • React + Vite • CMS • Discord
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 dictionaries, and CI/CD integration, Intlayer makes internationalization faster, cleaner, and smarter.
| Feature | Description |
|---|---|
 | Cross-Frameworks Support |
Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more. |
| 
| JavaScript-Powered Content Management
Harness the flexibility of JavaScript to define and manage your content efficiently.
| Per-Locale Content Declaration FileSpeed up your development by declaring your content once, before auto generation.
| CompilerThe Intlayer Compiler extract automatically the content from the components and generate the dictionary files.
| Type-Safe EnvironmentLeverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.
Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease.
No need to call your t function for each piece of content. Retrieve all your content directly using a single hook.
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.
Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components, enhance maintainability and clarity.
Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.
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.
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.
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.
Doesn't block Static Rendering.
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.
Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment.
Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more.
Allow interoperability with react-i18next, next-i18next, next-intl, react-intl, vue-i18n.
Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization.
npm install intlayer react-intlayer
⚡ Quick Start (Next.js)
// 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;
// app/home.content.ts
import { t, type Dictionary } from "intlayer";
const content = {
key: "home",
content: {
title: t({
en: "Home",
fr: "Accueil",
es: "Inicio",
}),
},
} satisfies Dictionary;
export default content;
// app/page.tsx
import { useIntlayer } from "react-intlayer";
const HomePage = () => {
const { title } = useIntlayer("home");
return {title};
};
Explore our comprehensive documentation to get started with Intlayer and learn how to integrate it into your projects.
📘 Get Started
⚙️ Concept
How Intlayer Works Configuration Intlayer CLI Intlayer Editor Intlayer CMS Dictionary
[Per-Locale Content Declaration File](https://intlayer.org/doc/concept/content/per-locale-file)
[Translation](https://intlayer.org/doc/concept/content/translation)
[Enumeration](https://intlayer.org/doc/concept/content/enumeration)
[Condition](https://intlayer.org/doc/concept/content/condition)
[Nesting](https://intlayer.org/doc/concept/content/nesting)
[Markdown](https://intlayer.org/doc/concept/content/markdown)
[Function Fetching](https://intlayer.org/doc/concept/content/function-fetching)
[Insertion](https://intlayer.org/doc/concept/content/insertion)
[File](https://intlayer.org/doc/concept/content/file)
🌐 Environment
[Next.js 15](https://intlayer.org/doc/environment/nextjs/15)
[Next.js 14 (App Router)](https://intlayer.org/doc/environment/nextjs/14)
[Next.js Page Router](https://intlayer.org/doc/environment/nextjs/next-with-Page-Router)
[React-router-v7](https://intlayer.org/doc/environment/vite-and-react/react-router-v7)
[Tanstack start](https://intlayer.org/doc/environment/vite-and-react/tanstack-start)
React Native Lynx + React Vite + Svelte SvelteKit Vite + Preact Vite + Vue Vite + Nuxt Vite + Solid Angular
[Backend](https://intlayer.org/doc/environment/express)
[Express](https://intlayer.org/doc/environment/express)
[NestJS](https://intlayer.org/doc/environment/nest)
[Fastify](https://intlayer.org/doc/environment/fastify)
📰 Blog
What is i18n i18n and SEO Intlayer and i18next Intlayer and react-intl Intlayer and next-intl
English • 简体中文 • Русский • 日本語 • Français • 한국어 • Español • Deutsch • العربية • Italiano • English (UK) • Português • हिन्दी • Türkçe
Intlayer is built with and for the community and we’d love your input!
You can also follow us on :
For more detailed guidelines on contributing to this project, please refer to the 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!
Contribute on GitHub, GitLab, or Bitbucket.
If you like Intlayer, give us a ⭐ on GitHub. It helps others discover the project! See why GitHub Stars matter.
Install via CLI
npx mdskills install aymericzip/intlayertitle} is a free, open-source AI agent skill. 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
Install title} with a single command:
npx mdskills install aymericzip/intlayerThis downloads the skill files into your project and your AI agent picks them up automatically.
title} works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Codex, Gemini Cli, Amp, Roo Code, Goose, Opencode, Trae, Qodo, Command Code. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.