Intlayer is a per-component internationalisation (i18n) solution for JavaScript applications that is type-safe, uses AI for translation, and includes a free visual editor and CMS, aimed at web and mobile developers building multilingual apps with Next.js, React, Vite, Vue.js, Nuxt, Preact, or Express.

What it is

Intlayer is an i18n and content-management library for JavaScript and TypeScript applications. It is framework-agnostic and integrates with Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more. Content is declared per component in per-locale content declaration files, compiled into tree-shakable dictionaries, and typed with TypeScript so that content definitions and code share one type-safe environment. The project also ships a free visual editor and CMS, so content writers can edit translations without a separate localization platform.

The concrete problem it solves is the friction of existing i18n libraries, which the README describes as too complex, too rigid, or not built for modern frameworks. It replaces the pattern of calling a t function for each individual string with a single hook that retrieves all content for a component, and it removes the need to thread that function through every server component by using the same implementation on both client and server. It also replaces the usual localization platform in the workflow, since the visual editor and CMS are free and keep content next to the components that own it.

Key capabilities

• Cross-framework support covering Next.js, React, Vite, Vue.js, Nuxt, Preact, and Express.
• Per-locale content declaration files, so content is declared once and auto-generated.
• The Intlayer Compiler, which extracts content from components automatically and generates the dictionary files.
• Type-safe content definitions with TypeScript and IDE autocompletion.
• Single-hook content retrieval instead of calling a t function per string, with a consistent implementation for Next.js client and server components.
• Codebase organisation by convention: one component equals one dictionary in the same folder, keeping translations beside their components.
• Markdown support for locale files and remote Markdown, including metadata access in code, for content such as privacy policies and documentation.

Who uses it and how

• Content writers and translators use the free visual editor and CMS to edit multilingual content without buying a localization platform.
• Next.js teams building server-component applications use one content implementation across client and server, without passing t through each server component.
• React and Vite developers follow the dedicated integration guide and configure TypeScript for autocompletion.
• Teams with mobile targets use it through React Native, per the project topics.
• Documentation and policy owners keep long-form Markdown content, including remote Markdown, multilingual and metadata-aware.
• Pipelines use CI/CD integration and the Compiler to keep generated dictionaries current with component content.

Getting started

Setup runs through the framework integration guides linked from the README, with dedicated paths for Next.js and React with Vite, followed by TypeScript configuration for the type-safe environment and the Compiler for dictionary generation. The free visual editor and CMS are offered through the project site at intlayer.org.

How it compares

The provided facts do not name any paid products that Intlayer replaces, and they do not name any similar i18n tools either. Within this registry it stands alone as the listed per-component i18n solution for JavaScript applications.

When to use it — and when not to

The provided facts do not describe any database, storage, or SMTP requirements, so a self-hoster should confirm the operational footprint of the CMS before committing. Teams that prefer plain runtime string tables over JavaScript-defined content and a build-time Compiler may find the model heavier than they need. The README excerpt is feature-table heavy and light on operational detail, and the project carries 830 stars and 12 open issues, which is worth weighing against older, larger i18n ecosystems.

npm install intlayer react-intlayer

// 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 <h1>{title}</h1>;
};