Intlayer Content

Intlayer Content Nodes

Define rich and dynamic content using Intlayer functions. Use the reference below for each node type.

Translation (t)

Define multilingual content mapped to locales.

Doc

import { t } from "intlayer";

const content = t({
  en: "Hello",
  fr: "Bonjour",
  es: "Hola",
});

Find locales to declare in config file. Supported configuration files:

• intlayer.config.{ts|js|json|json5|jsonc|cjs|mjs}
• .intlayerrc

Enumeration (enu)

Map content to specific keys, numbers, or ranges (useful for pluralization).

Doc

import { enu } from "intlayer";

const carCount = enu({
  "0": "No cars",
  "1": "One car",
  ">1": "Multiple cars",
  fallback: "Unknown amount",
});

Condition (cond)

Define content based on a boolean condition.

Doc

import { cond } from "intlayer";

const isLoggedIn = cond({
  true: "Welcome back!",
  false: "Please log in",
  fallback: "Status unknown", // Optional
});

Markdown (md)

Define rich text using Markdown syntax.

Doc

import { md } from "intlayer";

const article = md("# Title\n\nSome **bold** text.");

HTML (html)

Define HTML content, optionally with custom components.

Doc

import { html } from "intlayer";

const richText = html("<p>Hello <strong>World</strong></p>");

Nesting (nest)

Reuse content from another dictionary.

Doc

import { nest } from "intlayer";

// Reference entire dictionary
const fullRef = nest("other_dictionary_key");

// Reference specific path
const partialRef = nest("other_dictionary_key", "path.to.value");

Function Fetching

Execute logic to generate content (synchronous or asynchronous).

Doc

const computed = () => `Current time: ${new Date().toISOString()}`;

const fetched = async () => {
  const data = await fetch("/api/data").then((res) => res.json());
  return data.message;
};

Insertion (insert)

Define dynamic content with variables.

Doc

import { insert } from "intlayer";

const welcome = insert("Hello {{name}}!");

File (file)

Reference external files as content.

Doc

import { file } from "intlayer";

const myFile = file("./path/to/file.txt");

Gender (gender)

Define content based on gender ('male', 'female', etc.).

Doc

import { gender } from "intlayer";

const greeting = gender({
  male: "Welcome sir",
  female: "Welcome madam",
  fallback: "Welcome",
});

Example Directory Structure (react)

src/
├── components/
│   ├── MyComponent/
│   │   ├── index.content.ts          # Content declaration
│   │   └── index.tsx                 # Component
│   ├── myOtherComponent.content.ts   # Content declaration
│   └── MyOtherComponent.tsx          # Component

Content Templates

TypeScript (.content.ts)

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

const content = {
  key: "my-component-key",
  content: {
    title: "...",
  },
} satisfies Dictionary;

export default content;

TypeScript with React (.content.tsx)

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

const content = {
  key: "my-component-key",
  content: {
    title: <>My React Node</>,
  },
} satisfies Dictionary;

export default content;

{
  "key": "my-component-key",
  "content": {
    "title": "..."
  }
}

import { t } from "intlayer";

/** @type {import('intlayer').Dictionary} **/
const content = {
  key: "my-component-key",
  content: {
    title: "...",
  },
};

export default content;

Content declaration combination

Nodes can be imbricated for complex logic.

import {
  cond,
  enu,
  file,
  gender,
  insert,
  html,
  md,
  nest,
  t,
  type Dictionary,
} from "intlayer";

const content = {
  key: "test",
  title: "Test component content",
  description:
    "Content declarations for the Test component, including examples of plurals, conditions, gender-specific messages, dynamic insertions, markdown, file-based content and nested dictionaries used for demonstration and testing purposes.",
  content: {
    baseContent: "Intlayer", // Content that no need to be i18n
    welcomeMessage: t({
      en: "Welcome to our application",
      "en-GB": "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
      // ... All other locales set in intlayer config file
    }),
    numberOfCar: enu({
      // Check all conditions in other
      "<-1": "Less than minus one car",
      "-1": "Minus one car",
      "0": "No cars",
      "1": "One car",
      ">19": "Many cars",
      ">5": "Some cars", // Will never will triggered, because >5 is included between 1 and >19
      fallback: "Fallback value", // Optional but avoid undefined type
    }),
    myCondition: cond({
      true: "my content when it's true",
      false: "my content when it's false",
      fallback: "my content when the condition fails", // Optional but avoid undefined type
    }),
    myGender: gender({
      male: "my content for male users",
      female: "my content for female users",
      fallback: "my content when gender is not specified", // Optional but avoid undefined type
    }),
    myInsertion: insert(
      "Hello, my name is {{name}} and I am {{age}} years old!"
    ),
    myMultilingualInsertion: insert(
      t({
        ar: "مرحبا, اسمي {{name}} وأنا {{age}} سنة!",
        de: "Hallo, mein Name ist {{name}} und ich bin {{age}} Jahre alt!",
        en: "Hello, my name is {{name}} and I am {{age}} years old!",
        "en-GB": "Hello, my name is {{name}} and I am {{age}} years old!",
      })
    ),
    myTextFile: file("./test.txt"), // File helps to know where is located the file
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
    fullNested: nest("code"),
    // References a specific nested value:
    partialNested: nest("code", "title"),
    myMarkdown: md("## My title \n\nLorem Ipsum"),
    myMarkdownFile: md(file("./test.md")),
    multilingualMarkdown: t({
      en: md("## test en"),
      fr: md("## test fr"),
      es: md("## test es"),
      "en-GB": md("## test en-GB"),
    }),
    myHTML: html("<h2>My title</h2><p>Lorem Ipsum</p>"),
    myHTMLFile: html(file("./test.html")),

    arrayContent: ["string", "string2", "string3"],
    arrayOfObject: [
      {
        name: "item1",
        description: "description1",
      },
      {
        name: "item2",
        description: "description2",
      },
    ],
    objectOfArray: {
      array: ["item1", "item2", "item3"],
      object: {
        name: "object name",
        description: "object description",
      },
    },
  },
  tags: ["test", "test page"],
} satisfies Dictionary;

export default content;

Type validation of dictionary

Dictionary<{ title: string; description?: string }>; // Generic describing content type for formatted data (metadata, etc)

Key Dictionary Fields for AI Management

Core Metadata

• key: The identifier for the dictionary (e.g., about-page-meta). AI can ensure consistent naming conventions.
• title: A human-readable name for identification in the CMS or editor.
• description: Provides context for the dictionary. AI uses this to understand the purpose and generate better translations or content.
• tags: Categorization strings (e.g., metadata, SEO) to help organize and filter dictionaries.

Content & Localization

• locale: Specifies the language of the content for (per-locale file)[references/concept_per-locale-file.md]
• contentAutoTransformation: A toggle to automatically convert raw strings into specialized formats like Markdown, HTML, or Insertions (variables).
• fill: An instruction indicating whether the dictionary should be automatically populated by AI/automation tools.

Behaviorals Settings

• priority: A numeric value used to resolve conflicts during merge of dictionaries under a same key.
• importMode: Defines how content is loaded (static, dynamic, or live). AI can recommend the best mode based on performance needs.
• location: Controls CMS synchronization (hybrid, remote, local). AI can manage where the source of truth resides.
• schema: string that use zod schema declared in config file to validate data

References

• Website

• Doc

• Content Overview

• Exports intlayer package