Intlayer

Intlayer is a free, open-source internationalization library that lets you define type-safe translations next to React, Next.js, Vue, Angular, and other JavaScript components, with an AI-powered CLI for automated translation, a visual editor for content management, and an optional headless CMS for remote syncing.

What is Intlayer?

Intlayer is a type-safe i18n library that takes content declarations written in TypeScript or JavaScript next to your components and compiles them into dictionary files. It runs on any JavaScript environment (Node.js, browsers) and integrates with frameworks like Next.js, Express, NestJS, Hono, Fastify, React, Vue, Svelte, Solid, Nuxt, Astro, TanStack, Lit, and Angular. It is maintained by Aymeric Zip and the open-source community.

Key Features

• Per-component content declaration — Define translations alongside each component in .content.ts files; the compiler extracts them and generates dictionary files automatically.
• Type-safe with TypeScript — All content definitions are fully typed, providing autocompletion, validation, and prevention of missing keys.
• AI-powered CLI translation — Run npx intlayer fill to detect missing translations and fill them using OpenAI, Claude, or local AI models, keeping Git history clean and types intact.
• Visual editor for CMS — Edit website content directly in a live visual editor without touching code; invite non-developer editors and collaborate.
• Compiler automation — The Intlayer Compiler (npx intlayer build) automatically extracts content from component files and generates dictionary files, reducing manual work.
• Feature flags and live sync — Dictionaries can define logic, styles, and configuration; with Live Sync, toggle features or update app behavior in real time from the CMS.
• A/B testing (beta) — AI-driven experimentation platform to test copy, design, and features, with data-backed decisions.
• Supports 17+ frameworks — Official integrations for Next.js, React, Vue, Nuxt, Svelte, Solid, Angular, Astro, TanStack, Express, NestJS, Hono, Fastify, Vite, Preact, Lit, and more.

Who is it for?

Intlayer is built for developers building multilingual web applications who want to keep translations next to their components and automate the localization workflow. It also serves content managers who need a visual editor to update site copy without writing code, and teams that require an open-source self-hosted alternative to proprietary translation management platforms like Crowdin or Lokalise.

What can you do with Intlayer?

• Multilingual app development — Declare translations in TypeScript, run the compiler to generate dictionary files, and use the framework adapter to render localized content in React, Next.js, Vue, etc.
• AI-accelerated translation — Use the CLI (npx intlayer fill) to automatically fill missing translations using AI models, then audit with npx intlayer test.
• Remote content management — Connect local dictionaries with the Intlayer headless CMS for live syncing, hot updates without rebuilds, webhook-triggered CI/CD, and feature flag management.
• SEO optimization — The analyzer tool evaluates your website’s global localization score and provides actionable insights.

How does Intlayer work?

You run npx intlayer init to set up the configuration. Then define content in .content.ts files in your component directories using the t() helper for localized strings. The Intlayer Compiler scans these files and generates typed dictionary files. On the client or server, you import the generated dictionary and use the library's hooks or helpers to render the correct locale. The optional visual editor and CMS allow remote editing without redeployment.