Intlayer Documentation

Welcome to the official Intlayer documentation! Here, you'll find everything you need to integrate, configure, and master Intlayer for all your internationalization (i18n) needs, whether you’re working with Next.js, React, Vite, Express, or another JavaScript environment.

Introduction

What is Intlayer?

Intlayer is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, Intlayer make your development stronger and more efficient.

Intlayer also provides an optional visual editor that allows you to easily edit and manage your content. This editor is particularly useful for developers who prefer a visual interface for content management, or for teams generating content without having to worry about code.

Example of usage

.
└── Components
    └── MyComponent
        ├── index.content.ts
        └── index.tsx

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentContent;

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

Why Intlayer over alternatives?

Compared to main solutions like next-intl or i18next, Intlayer is a solution that comes with integrated optimizations such as:

Main Features

Intlayer offers a variety of features tailored to meet the needs of modern web development. Below are the key features, with links to detailed documentation for each:

• Internationalization Support: Enhance your application's global reach with built-in support for internationalization.
• Visual Editor: Improve your development workflow with editor plugins designed for Intlayer. Check out the Visual Editor Guide.
• Configuration Flexibility: Customize your setup with extensive configuration options detailed in the Configuration Guide.
• Advanced CLI Tools: Manage your projects efficiently using Intlayer's command line interface. Explore the capabilities in the CLI Tools Documentation.

Core Concepts

Dictionary

Organize your multilingual content close to your code to keep everything consistent and maintainable.

• Get Started
  Learn the basics of declaring your content in Intlayer.

• Translation
  Understand how translations are generated, stored, and utilized in your application.

• Enumeration
  Easily manage repeated or fixed sets of data across various languages.

• Condition
  Learn how to use conditional logic in Intlayer to create dynamic content.

• Insertion Discover how to insert values in a string using insertion placeholders.

• Function Fetching
  See how to dynamically fetch content with custom logic to match your project’s workflow.

• Markdown
  Learn how to use Markdown in Intlayer to create rich content.

• File embeddings
  Discover how to embed externals files in Intlayer to use them in the content editor.

• Nesting
  Understand how to nest content in Intlayer to create complex structures.

Environments & Integrations

We’ve built Intlayer with flexibility in mind, offering seamless integration across popular frameworks and build tools:

• Intlayer with Next.js 16
• Intlayer with Next.js 15
• Intlayer with Next.js 14 (App Router)
• Intlayer with Next.js Page Router
• Intlayer with React CRA
• Intlayer with Vite + React
• Intlayer with React Router v7
• Intlayer with Tanstack Start
• Intlayer with React Native and Expo
• Intlayer with Lynx and React
• Intlayer with Vite + Preact
• Intlayer with Vite + Vue
• Intlayer with Nuxt
• Intlayer with Vite + Svelte
• Intlayer with SvelteKit
• Intlayer with Express
• Intlayer with NestJS
• Intlayer with Hono
• Intlayer with Angular

Each integration guide includes best practices for using Intlayer’s features, like server-side rendering, dynamic routing, or client-side rendering, so you can maintain a fast, SEO-friendly, and highly scalable application.

Contributing & Feedback

We value the power of open-source and community-driven development. If you’d like to propose improvements, add a new guide, or correct any issues in our docs, feel free to submit a Pull Request or open an issue on our GitHub repository.

Ready to translate your application faster and more efficiently? Dive into our docs to start using Intlayer today. Experience a robust, streamlined approach to internationalization that keeps your content organized and your team more productive.

Frequently Asked Questions