Author:

Creation:2026-06-12Last update:2026-06-12

Reference this doc to your favorite AI assistant

Google AI mode Gemini

Perplexity Mistral

Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

Version History

"Release of the dynamic content feature"
v9.0.012/06/2026

The content of this page was translated using an AI.

See the last version of the original content in English

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Dynamic Records

A dynamic record is a content file whose identity is not a sequential index or a named variant, but an arbitrary set of key-value pairs declared in a meta field. Intlayer uses those fields as the selector at runtime, making it possible to address CMS records, user-specific copy, or any content whose keys are not known at build time.

Declaring dynamic records

product-copy.abc.content.ts

Copy code

Copy the code to the clipboard

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

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abc",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Pro", fr: "Widget Pro" }),
    description: t({ en: "The best widget.", fr: "Le meilleur widget." }),
  },
} satisfies Dictionary;

export default dictionary;

product-copy.abcd.content.ts

Copy code

Copy the code to the clipboard

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

const dictionary = {
  key: "product-copy",
  meta: {
    id: "prod_abcd",
    userId: "user_123",
  },
  content: {
    name: t({ en: "Widget Lite", fr: "Widget Lite" }),
    description: t({ en: "A lighter option.", fr: "Une option plus légère." }),
  },
} satisfies Dictionary;

export default dictionary;

Consuming dynamic records

All meta fields are required in the selector. Omitting any field returns null and is a TypeScript error.

ProductCopy.tsx

Copy code

Copy the code to the clipboard

import { useIntlayer } from "react-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript enforces that both `id` and `userId` are provided.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Copy code

Copy the code to the clipboard

import { useIntlayer } from "next-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript enforces that both `id` and `userId` are provided.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.vue

Copy code

Copy the code to the clipboard

<script setup>
import { useIntlayer } from "vue-intlayer";

const props = defineProps({
  productId: String,
  userId: String,
});

const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
</script>

<template>
  <p v-if="content">{{ content.description }}</p>
</template>

ProductCopy.svelte

Copy code

Copy the code to the clipboard

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";

export let productId: string;
export let userId: string;

const content = useIntlayer("product-copy", { id: productId, userId });
</script>

{#if $content}
  <p>{$content.description}</p>
{/if}

ProductCopy.tsx

Copy code

Copy the code to the clipboard

import { useIntlayer } from "preact-intlayer";

export const ProductCopy = ({
  productId,
  userId,
}: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: productId, userId });
  // TypeScript enforces that both `id` and `userId` are provided.

  if (!content) return null;

  return <p>{content.description}</p>;
};

ProductCopy.tsx

Copy code

Copy the code to the clipboard

import { useIntlayer } from "solid-intlayer";

export const ProductCopy = (props: {
  productId: string;
  userId: string;
}) => {
  const content = useIntlayer("product-copy", { id: props.productId, userId: props.userId });
  // TypeScript enforces that both `id` and `userId` are provided.

  return (
    <>
      {content() && <p>{content().description}</p>}
    </>
  );
};

product-copy.component.ts

Copy code

Copy the code to the clipboard

import { Component, Input, OnInit } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-product-copy",
  template: `
    @if (content()) {
      <p>{{ content().description }}</p>
    }
  `,
})
export class ProductCopyComponent implements OnInit {
  @Input() productId!: string;
  @Input() userId!: string;

  content: any;

  ngOnInit() {
    this.content = useIntlayer("product-copy", { id: this.productId, userId: this.userId });
  }
}

product-copy.js

Copy code

Copy the code to the clipboard

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}

With explicit locale

tsx

Copy code

Copy the code to the clipboard

const content = useIntlayer("product-copy", {  id: "prod_abc",  userId: "user_123",  locale: "fr",});

Missing meta field — compile-time error

ts

Copy code

Copy the code to the clipboard

// Type error: `userId` is missingconst content = useIntlayer("product-copy", { id: "prod_abc" });

Loading mode

Dynamic records are typically loaded lazily. Set importMode on the dictionary to control this:

ts

Copy code

Copy the code to the clipboard

const dictionary = {
  key: "product-copy",
  importMode: "fetch", // or "dynamic"
  meta: { id: "prod_abc", userId: "user_123" },
  content: { … },
} satisfies Dictionary;

export default dictionary;

See bundle optimisation for details on static, dynamic, and fetch modes.

Typical use-cases

Per-product marketing copy managed in a CMS
User-specific or account-specific content
Any content keyed by an opaque runtime ID

Per Locale File

import { useIntlayer } from "vanilla-intlayer";const content = useIntlayer("product-copy", {  id: "prod_abcd",  userId: "user_123"});if (content) {  document.body.innerHTML = `<p>${content.description}</p>`;}