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 { type DeclarationContent, t } from "intlayer";const componentContent = {  key: "component-key",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),  },} satisfies DeclarationContent;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>;};

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

Content Declaration

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.

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

Environments & Integrations

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

• 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 Express

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.

Happy translating!