intlayer
Per-component Internationalisation solution for JS application. Type-Safe. Translate with AI. Edit Visually.
Intlayer adds per component internationalisation to JS apps
A framework agnostic i18n solution with type-safe dictionaries, AI powered translation, a visual editor, and a free multilingual CMS.
What Intlayer provides
Intlayer is a modern internationalisation solution for web and mobile apps. The README describes it as framework-agnostic, AI-powered, and shipped with a free CMS and visual editor. Its core idea is per-component i18n: instead of keeping all translations in one distant file, you declare content next to the component that uses it, so one component maps to one dictionary in the same folder. The README argues that most i18n libraries are either too complex, too rigid, or not built for modern frameworks, and positions Intlayer as faster, cleaner, and smarter through per-locale content files, TypeScript autocompletion, tree-shakable dictionaries, and CI/CD integration. It supports a long list of environments including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, Astro, Svelte, Solid, Angular, and React Native. Content is defined in JavaScript so authors can use its full expressiveness, and a compiler extracts content from components and generates the dictionary files automatically. The project also interoperates with react-i18next, next-i18next, next-intl, react-intl, and vue-i18n through compatibility adapters, so teams can adopt it without rewriting existing translation calls. The homepage at intlayer.org hosts the documentation, the editor, and the CMS details referenced throughout the README for readers who want the full guides. The documentation tree covers Next.js, Vite, Astro, React Native, and a backend path with Express, so a single content model is meant to serve both web and native applications without a second translation store.
Developer experience and type safety
A major selling point in the README is the type-safe environment. Because content is defined with TypeScript, the definitions and the code that consumes them are checked at compile time, and IDE autocompletion works on translation keys. The quick start shows an intlayer.config.ts declaring locales such as English, French, and Spanish, and a home.content.ts file that uses a t function to declare each locale's string inside a Dictionary. A component then calls useIntlayer('home') from react-intlayer and reads the title, with no need to thread a t function through every server component. The README highlights consistent server component support for Next.js, simplified content retrieval through a single hook, and an organized codebase where translations sit close to their components. A VSCode extension helps manage content and translations, and an MCP server is provided for IDE automation so content tasks can run inside the editor. Markdown support lets locale files and remote Markdown be imported and interpreted for multilingual content such as privacy policies and documentation, with the metadata made accessible in code. The combination of a compiler, a single retrieval hook, and editor tooling is what the project argues makes day to day translation work less error prone than manual string lookups across a large shared file. An MCP server is provided for IDE automation, and a VSCode extension helps build dictionaries and translate content, so the i18n workflow stays close to the code editor.
Translation, CMS and delivery
Beyond dictionaries, Intlayer offers AI-powered translation that can transform a site into 231 languages with one click using your own AI provider or API credential, plus a CLI and CI/CD integration for automated fills. A free visual editor and CMS let content writers work without a separate localization platform, keeping content in Git or externalizing it partially or totally with the CMS. The build side focuses on size: tree-shakable content loads per component and excludes unused strings from the bundle, with lazy loading to improve app startup, and the approach does not block static rendering, which matters for Next.js. The README links to a performance and benchmark page that describes advanced tree-shaking and dynamic loading. Intlayer is published on npm as intlayer and react-intlayer, and the repository metadata records 798 stars, 121 forks, and a last update on 2026-08-24. The project carries the Apache-2.0 license. The documentation tree covers Next.js 16 down to Next.js 14, Vite with React, Astro with multiple renderers, React Native and Expo, and a backend path with Express, so the same content model is meant to travel from a marketing site to a native app without a second translation store. The build side uses tree-shakable content that loads per component and excludes unused strings, which the README argues keeps the shipped bundle smaller than a single global translation file would.
Editorial conclusion
The project carries the Apache-2.0 license, the metadata records 798 stars, and the README states it supports 231 languages through AI translation.
Community notes