Intlayer Documentation

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

Introduction

What is Intlayer?

Intlayer is an internationalisation library designed specifically for JavaScript developers. It allows the declaration of your content everywhere in your code. It converts declarations of multilingual content into structured dictionaries to integrate easily into your code. Using TypeScript, Intlayer makes 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-GB": "Hello World",
      fr: "Bonjour le monde",
      es: "Hola Mundo",
    }),
  },
} 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>;
};

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:

• Internationalisation Support: Enhance your application's global reach with built-in support for internationalisation.
• Visual Editor: Improve your development workflow with editor plugins designed for Intlayer. Check out the Visual Editor Guide.
• Configuration Flexibility: Customise 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

Organise 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 utilised 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 external 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 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 Express
• Intlayer with NestJS
• Intlayer with Angular

Each integration guide includes best practices for using Intlayer’s features, such as server-side rendering, dynamic routing, or client-side rendering, enabling you to 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 internationalisation that keeps your content organised and your team more productive.