Author:
    Aymeric PINEAU
    Creation:2026-06-12Last update:2026-08-04

    рд╡реИрд░рд┐рдПрдВрдЯ

    рдПрдХ рд╡реИрд░рд┐рдПрдВрдЯ рд╕рд╛рдордЧреНрд░реА рдлрд╝рд╛рдЗрд▓реЛрдВ рдХрд╛ рдПрдХ рд╕рдореВрд╣ рд╣реИ рдЬреЛ рд╕рдорд╛рди рдбрд┐рдХреНрд╢рдирд░реА key рд╕рд╛рдЭрд╛ рдХрд░рддреА рд╣реИрдВ рд▓реЗрдХрд┐рди рдкреНрд░рддреНрдпреЗрдХ рдХрд╛ рдПрдХ рдЕрд▓рдЧ variant рдорд╛рди рд╣реЛрддрд╛ рд╣реИред Intlayer useIntlayer рдХреЛ рдкрд╛рд╕ рдХрд┐рдП рдЧрдП рд╕реЗрд▓реЗрдХреНрдЯрд░ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдЙрдкрдпреБрдХреНрдд рдлрд╝рд╛рдЗрд▓ рдкрд░реЛрд╕рддрд╛ рд╣реИред

    variant рдорд╛рди рджреЛ рд░реВрдк рд▓реЗ рд╕рдХрддрд╛ рд╣реИ:

    • рдПрдХ рд╕реНрдЯреНрд░рд┐рдВрдЧ тАФ рдПрдХрд▓ рдирд╛рдорд┐рдд рд╡рд┐рдХрд▓реНрдк (A/B рдкрд░реАрдХреНрд╖рдг, рдореМрд╕рдореА рдмреИрдирд░, рдлрд╝реАрдЪрд░ рдлрд╝реНрд▓реИрдЧ)ред
    • рдПрдХ рдСрдмреНрдЬреЗрдХреНрдЯ тАФ рдлрд╝реАрд▓реНрдб рдХреЗ рд╕реЗрдЯ рджреНрд╡рд╛рд░рд╛ рд╕рдВрдмреЛрдзрд┐рдд рдПрдХ рд╕рдВрд░рдЪрд┐рдд рд╡рд┐рднреЗрджрдХ (CMS рд░рд┐рдХреЙрд░реНрдб, рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛-рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╕рд╛рдордЧреНрд░реА, рдЕрдкрд╛рд░рджрд░реНрд╢реА ID рджреНрд╡рд╛рд░рд╛ рдХреБрдВрдЬреАрдмрджреНрдз рдХреЛрдИ рднреА рд╕рд╛рдордЧреНрд░реА)ред рдкреВрд░рд╛ рдСрдмреНрдЬреЗрдХреНрдЯ рд╣реА рдкрд╣рдЪрд╛рди рд╣реИ: рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реЗрд▓реЗрдХреНрдЯрд░ рдХреЛ рдПрдХ рд╕рдорд╛рди рдСрдмреНрдЬреЗрдХреНрдЯ рджреЗрдирд╛ рд╣реЛрдЧрд╛ред
    рдСрдмреНрдЬреЗрдХреНрдЯ рд░реВрдк рдкреБрд░рд╛рдиреЗ meta рдлрд╝реАрд▓реНрдб рдХреА рдЬрдЧрд╣ рд▓реЗрддрд╛ рд╣реИред рдЬрд╣рд╛рдБ рднреА рдЖрдк рдкрд╣рд▓реЗ meta: { id, тАж } рд▓рд┐рдЦрддреЗ рдереЗ, рд╡рд╣рд╛рдБ variant: { id, тАж } рд▓рд┐рдЦреЗрдВ рдФрд░ рдЗрд╕реЗ { variant: { id, тАж } } рдХреЗ рд╕рд╛рде рдЪреБрдиреЗрдВред

    рдирд╛рдорд┐рдд (рд╕реНрдЯреНрд░рд┐рдВрдЧ) рд╡реИрд░рд┐рдПрдВрдЯ

    рдкреНрд░рддреНрдпреЗрдХ рдлрд╝рд╛рдЗрд▓ рдПрдХ рдирд╛рдорд┐рдд рд╡рд┐рдХрд▓реНрдк рдХрд╛ рдкреНрд░рддрд┐рдирд┐рдзрд┐рддреНрд╡ рдХрд░рддреА рд╣реИред variant рдХреЛ рдЫреЛрдбрд╝рдирд╛ (рдпрд╛ "default" рдкрд░ рд╕реЗрдЯ рдХрд░рдирд╛) рдЗрд╕реЗ рдлрд╝реЙрд▓рдмреИрдХ рдХреЗ рд░реВрдк рдореЗрдВ рдЪрд┐рд╣реНрдирд┐рдд рдХрд░рддрд╛ рд╣реИред

    hero-banner.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "default",
  content: {
    headline: t({
      en: "Build faster with Intlayer",
      fr: "D├йveloppez plus vite avec Intlayer",
    }),
    cta: t({ en: "Get started", fr: "Commencer" }),
  },
} satisfies Dictionary;

export default dictionary;
    hero-banner.black-friday.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "black_friday",
  content: {
    headline: t({
      en: "50 % off тАФ today only",
      fr: "тИТ50 % тАФ aujourd'hui seulement",
    }),
    cta: t({ en: "Shop now", fr: "Acheter maintenant" }),
  },
} satisfies Dictionary;

export default dictionary;

    рдЖрдВрд╢рд┐рдХ рд╡реЗрд░рд┐рдПрдВрдЯ

    рдПрдХ рд╡реЗрд░рд┐рдПрдВрдЯ рдХреЗрд╡рд▓ рдЙрдиреНрд╣реАрдВ рдХреБрдВрдЬрд┐рдпреЛрдВ рдХреЛ рдШреЛрд╖рд┐рдд рдХрд░рддрд╛ рд╣реИ рдЬрд┐рдиреНрд╣реЗрдВ рд╡рд╣ рдУрд╡рд░рд░рд╛рдЗрдб рдХрд░рддрд╛ рд╣реИ; рдмрд╛рдХреА рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рд╕реЗ рд╡рд┐рд░рд╛рд╕рдд рдореЗрдВ рдорд┐рд▓рддреА рд╣реИрдВред

    hero-banner.summer.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "hero-banner",
  variant: "summer",
  content: {
    headline: t({
      en: "Build faster all summer",
      fr: "D├йveloppez plus vite tout l'├йt├й",
    }),
  },
} satisfies Dictionary;

export default dictionary;
    tsx
    useIntlayer("hero-banner", { variant: "summer" });
// тЖТ { headline: "D├йveloppez plus vite tout l'├йt├й", cta: "Commencer" } тАФ `cta` рд╡рд┐рд░рд╛рд╕рдд рдореЗрдВ рдорд┐рд▓рд╛

useIntlayer("hero-banner", { variant: "never-declared" });
// тЖТ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐

    рдЗрд╕рд▓рд┐рдП рдЖрдк рдХреЗрд╡рд▓ рд╡рд╣реАрдВ рд╡реЗрд░рд┐рдПрдВрдЯ рдлрд╝рд╛рдЗрд▓ рдЬреЛрдбрд╝рддреЗ рд╣реИрдВ рдЬрд╣рд╛рдВ рд╢рдмреНрдж рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рднрд┐рдиреНрди рд╣реЛрддреЗ рд╣реИрдВред рдПрдХ рдХреБрдВрдЬреА рдХреЗрд╡рд▓ рддрднреА null рдкрд░ рд╣рд▓ рд╣реЛрддреА рд╣реИ рдЬрдм рд╡рд╣ рд╡реЗрд░рд┐рдПрдВрдЯ рдШреЛрд╖рд┐рдд рдХрд░рддреА рд╣реИ рд▓реЗрдХрд┐рди рдХреЛрдИ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рдирд╣реАрдВ рд╣реЛрддреА рд╣реИред

    рдирд╛рдорд┐рдд рд╡реЗрд░рд┐рдПрдВрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛

    рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ

    Hero.tsx
    import { useIntlayer } from "react-intlayer";

export const Hero = () => {
const { headline, cta } = useIntlayer("hero-banner");
// тЖТ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ

return (
  <section>
    <h1>{headline}</h1>
    <a>{cta}</a>
  </section>
);
};
    Hero.tsx
    import { useIntlayer } from "next-intlayer";

export const Hero = () => {
const { headline, cta } = useIntlayer("hero-banner");
// тЖТ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ

return (
  <section>
    <h1>{headline}</h1>
    <a>{cta}</a>
  </section>
);
};
    Hero.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const { headline, cta } = useIntlayer("hero-banner");
</script>

<template>
<section>
  <h1>{{ headline }}</h1>
  <a>{{ cta }}</a>
</section>
</template>
    Hero.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("hero-banner");
</script>

<section>
<h1>{$content.headline}</h1>
<a>{$content.cta}</a>
</section>
    Hero.tsx
    import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
const { headline, cta } = useIntlayer("hero-banner");
// тЖТ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ

return (
  <section>
    <h1>{headline}</h1>
    <a>{cta}</a>
  </section>
);
};
    Hero.tsx
    import { useIntlayer } from "solid-intlayer";

export const Hero = () => {
const content = useIntlayer("hero-banner");
// тЖТ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ

return (
  <section>
    <h1>{content().headline}</h1>
    <a>{content().cta}</a>
  </section>
);
};
    hero.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-hero",
template: `
  <section>
    <h1>{{ content().headline }}</h1>
    <a>{{ content().cta }}</a>
  </section>
`,
})
export class HeroComponent {
content = useIntlayer("hero-banner");
}
    hero.js
    import { useIntlayer } from "vanilla-intlayer";

const { headline, cta } = useIntlayer("hero-banner");

document.body.innerHTML = `
<section>
  <h1>${headline}</h1>
  <a>${cta}</a>
</section>
`;

    рдирд╛рдорд┐рдд рд╡реИрд░рд┐рдПрдВрдЯ

    tsx
    const { headline, cta } = useIntlayer("hero-banner", {
  variant: "black_friday",
});

    рд╕реНрдкрд╖реНрдЯ locale рдХреЗ рд╕рд╛рде рдирд╛рдорд┐рдд рд╡реИрд░рд┐рдПрдВрдЯ

    tsx
    const content = useIntlayer("hero-banner", {
  variant: "black_friday",
  locale: "fr",
});

    рдСрдмреНрдЬреЗрдХреНрдЯ (рд╕рдВрд░рдЪрд┐рдд) рд╡реИрд░рд┐рдПрдВрдЯ

    рдПрдХ рдСрдмреНрдЬреЗрдХреНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ variant рдлрд╝реАрд▓реНрдб рдореЗрдВ рдШреЛрд╖рд┐рдд рдордирдорд╛рдиреЗ key-value рдпреБрдЧреНрдореЛрдВ рдХреЗ рд╕реЗрдЯ рджреНрд╡рд╛рд░рд╛ рд╕рд╛рдордЧреНрд░реА рдХреЛ рд╕рдВрдмреЛрдзрд┐рдд рдХрд░рддрд╛ рд╣реИ тАФ рдЬрд┐рд╕рд╕реЗ CMS рд░рд┐рдХреЙрд░реНрдб, рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛-рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╕рд╛рдордЧреНрд░реА, рдпрд╛ рдРрд╕реА рдХреЛрдИ рднреА рд╕рд╛рдордЧреНрд░реА рдореЙрдбрд▓ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЬрд┐рд╕рдХреА рдХреБрдВрдЬреА рдПрдХ рдЕрдкрд╛рд░рджрд░реНрд╢реА ID рд╣реИред рдкрд╣рдЪрд╛рди рдкреВрд░рд╛ рдСрдмреНрдЬреЗрдХреНрдЯ рд╣реИ: рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рд╣рд▓ рд╣реЛрдиреЗ рдХреЗ рд▓рд┐рдП рд╕реЗрд▓реЗрдХреНрдЯрд░ рдХреЛ рдПрдХ рд╕рдорд╛рди рдСрдмреНрдЬреЗрдХреНрдЯ рджреЗрдирд╛ рд╣реЛрдЧрд╛ред

    product.abc.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { 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.abcd.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "product",
  variant: { 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;

    рдСрдмреНрдЬреЗрдХреНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ

    рдорд┐рд▓рд╛рди рдХрд░рдиреЗ рд╡рд╛рд▓рд╛ рдСрдмреНрдЬреЗрдХреНрдЯ variant рдореЗрдВ рдкрд╛рд╕ рдХрд░реЗрдВред рдбрд┐рдХреНрд╢рдирд░реА рдореЗрдВ рдШреЛрд╖рд┐рдд рдкреНрд░рддреНрдпреЗрдХ рдлрд╝реАрд▓реНрдб рдкреНрд░рджрд╛рди рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рд╕рдорд╛рди рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП; рдЕрдиреНрдпрдерд╛ рдкрд░рд┐рдгрд╛рдо null рд╣реЛрддрд╛ рд╣реИред рдлрд╝реАрд▓реНрдб рдХрд╛ рдХреНрд░рдо рдорд╛рдпрдиреЗ рдирд╣реАрдВ рд░рдЦрддрд╛ред

    Product.tsx
    import { useIntlayer } from "react-intlayer";

export const Product = ({
productId,
userId,
}: {
productId: string;
userId: string;
}) => {
const content = useIntlayer("product", {
  variant: { id: productId, userId },
});

if (!content) return null;

return <p>{content.description}</p>;
};
    Product.tsx
    import { useIntlayer } from "next-intlayer";

export const Product = ({
productId,
userId,
}: {
productId: string;
userId: string;
}) => {
const content = useIntlayer("product", {
  variant: { id: productId, userId },
});

if (!content) return null;

return <p>{content.description}</p>;
};
    Product.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";

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

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

<template>
<p v-if="content">{{ content.description }}</p>
</template>
    Product.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

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

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

{#if $content}
<p>{$content.description}</p>
{/if}
    Product.tsx
    import { useIntlayer } from "preact-intlayer";

export const Product = ({
productId,
userId,
}: {
productId: string;
userId: string;
}) => {
const content = useIntlayer("product", {
  variant: { id: productId, userId },
});

if (!content) return null;

return <p>{content.description}</p>;
};
    Product.tsx
    import { useIntlayer } from "solid-intlayer";

export const Product = (props: {
productId: string;
userId: string;
}) => {
const content = useIntlayer("product", {
  variant: { id: props.productId, userId: props.userId },
});

return (
  <>
    {content() && <p>{content().description}</p>}
  </>
);
};
    product.component.ts
    import { Component, Input, OnInit } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

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

content: any;

ngOnInit() {
  this.content = useIntlayer("product", {
    variant: { id: this.productId, userId: this.userId },
  });
}
}
    product.js
    import { useIntlayer } from "vanilla-intlayer";

const content = useIntlayer("product", {
variant: { id: "prod_abcd", userId: "user_123" },
});

if (content) {
document.body.innerHTML = `<p>${content.description}</p>`;
}

    рд╕реНрдкрд╖реНрдЯ locale рдХреЗ рд╕рд╛рде

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

    рдЕрдиреБрдкрд╕реНрдерд┐рдд рдлрд╝реАрд▓реНрдб тАФ рдХреЛрдИ рдорд┐рд▓рд╛рди рдирд╣реАрдВ

    ts
    // null рд▓реМрдЯрд╛рддрд╛ рд╣реИ: `userId` рдЕрдиреБрдкрд╕реНрдерд┐рдд рд╣реИ, рдЗрд╕рд▓рд┐рдП рдСрдмреНрдЬреЗрдХреНрдЯ рдШреЛрд╖рд┐рдд рд╡реИрд░рд┐рдПрдВрдЯ рд╕реЗ рдореЗрд▓ рдирд╣реАрдВ рдЦрд╛рддрд╛
const content = useIntlayer("product", { variant: { id: "prod_abc" } });

    рдкрд░рд┐рд╡реЗрд╢реА рд╡реИрд░рд┐рдПрдВрдЯ

    рдХреБрдЫ рд╡реИрд░рд┐рдПрдВрдЯ рдЖрдпрд╛рдо рдкреВрд░реЗ рд╕рддреНрд░ рдХреЗ рд▓рд┐рдП рд╕реНрдерд┐рд░ рд░рд╣рддреЗ рд╣реИрдВ тАФ рдЯреЗрдиреЗрдВрдЯ, рд╡рд┐рджреНрдпрд╛рд▓рдп рдХрд╛ рдкреНрд░рдХрд╛рд░, рдкреНрд▓рд╛рди рд╕реНрддрд░ред рдпреЗ рдПрдХ рд╣реА рдмрд╛рд░ рд╣рд▓ рд╣реЛрддреЗ рд╣реИрдВ, рдФрд░ рдХрд┐рд╕реА рднреА рдХреЙрдореНрдкреЛрдиреЗрдВрдЯ рдХреЛ рдЗрдиреНрд╣реЗрдВ рд╣рд╛рде рд╕реЗ рдкрд╛рд╕ рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдПред

    рдЗрдиреНрд╣реЗрдВ рдЗрдВрдЬреЗрдХреНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП useIntlayer рдХреЛ рдЕрдкрдиреЗ рд╣реБрдХ рдореЗрдВ рди рд▓рдкреЗрдЯреЗрдВред рдмрд┐рд▓реНрдб-рдЯрд╛рдЗрдо рдЕрдиреБрдХреВрд▓рди рдХреЗрд╡рд▓ рдлреНрд░реЗрдорд╡рд░реНрдХ рдкреИрдХреЗрдЬ рд╕реЗ рдЖрдпрд╛рддрд┐рдд рд╢рд╛рдмреНрджрд┐рдХ useIntlayer("key") рдХреЙрд▓ рдХреЛ рд╣реА рдкреБрдирд░реНрд▓рд┐рдЦрд┐рдд рдХрд░рддрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдХрд┐рд╕реА рд░реИрдкрд░ рдХреЗ рдкреАрдЫреЗ рдХреБрдЫ рднреА рдмрдВрдбрд▓ рдирд╣реАрдВ рд╣реЛрддрд╛ред

    рдЗрд╕рдХреЗ рдмрдЬрд╛рдп рд╡реИрд░рд┐рдПрдВрдЯ рдХреЛ рдкреНрд░реЛрд╡рд╛рдЗрдбрд░ рдкрд░ рдПрдХ рд╣реА рдмрд╛рд░ рдШреЛрд╖рд┐рдд рдХрд░реЗрдВ, рдареАрдХ locale рдХреА рддрд░рд╣:

    App.tsx
    import { IntlayerProvider } from "react-intlayer";

export const App = ({ locale, schoolType }) => (
<IntlayerProvider locale={locale} variant={schoolType}>
  <Hero />
</IntlayerProvider>
);
    layout.tsx
    import { IntlayerProvider } from "next-intlayer/server";

export default async function Layout({ children, params }) {
const { locale } = await params;
const schoolType = await getSchoolType();

return (
<IntlayerProvider locale={locale} variant={schoolType}>
{children}
</IntlayerProvider>
);
}
    layout.tsx
    import { IntlayerServerProvider } from "next-intlayer/server";
import { IntlayerClientProvider } from "next-intlayer";

export default async function Layout({ children, params }) {
const { locale } = await params;
const schoolType = await getSchoolType();

return (
  <IntlayerServerProvider locale={locale} variant={schoolType}>
    <IntlayerClientProvider locale={locale} variant={schoolType}>
      {children}
    </IntlayerClientProvider>
  </IntlayerServerProvider>
);
}
    main.ts
    import { createApp } from "vue";
import { installIntlayer } from "vue-intlayer";
import App from "./App.vue";

const app = createApp(App);

installIntlayer(app, { locale: "en", variant: schoolType });

app.mount("#app");
    +layout.svelte
    <script lang="ts">
import { setupIntlayer } from "svelte-intlayer";

export let schoolType: string;

setupIntlayer("en", schoolType);
</script>

<slot />
    App.tsx
    import { IntlayerProvider } from "preact-intlayer";

export const App = ({ locale, schoolType }) => (
<IntlayerProvider locale={locale} variant={schoolType}>
  <Hero />
</IntlayerProvider>
);
    App.tsx
    import { IntlayerProvider } from "solid-intlayer";

export const App = (props) => (
<IntlayerProvider locale={props.locale} variant={props.schoolType}>
  <Hero />
</IntlayerProvider>
);
    app.config.ts
    import { ApplicationConfig } from "@angular/core";
import { provideIntlayer } from "angular-intlayer";

export const appConfig: ApplicationConfig = {
providers: [provideIntlayer("en", true, schoolType)],
};
    main.js
    import { installIntlayer } from "vanilla-intlayer";

installIntlayer({ locale: "en", variant: schoolType });

    рдЕрдм рдкреНрд░реЛрд╡рд╛рдЗрдбрд░ рдХреЗ рдиреАрдЪреЗ рдкреНрд░рддреНрдпреЗрдХ рдбрд┐рдХреНрд╢рдирд░реА рдкрдарди рдЙрд╕реА рд╡реИрд░рд┐рдПрдВрдЯ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рд╣рд▓ рд╣реЛрддрд╛ рд╣реИ, рдФрд░ рдХреЙрд▓-рд╕реНрдерд▓ рдХрд╛ рд╕реЗрд▓реЗрдХреНрдЯрд░ рд╣рдореЗрд╢рд╛ рдЬреАрддрддрд╛ рд╣реИ:

    tsx
    useIntlayer("hero-banner");
// тЖТ рдкреНрд░реЛрд╡рд╛рдЗрдбрд░ рдХрд╛ рд╡реИрд░рд┐рдПрдВрдЯ

useIntlayer("hero-banner", { variant: "summer" });
// тЖТ "summer" тАФ рдкреНрд░реЛрд╡рд╛рдЗрдбрд░ рд╡реИрд░рд┐рдПрдВрдЯ рдХреЛ рдкреНрд░рддрд┐рд╕реНрдерд╛рдкрд┐рдд рдХрд░рддрд╛ рд╣реИ, рдЙрд╕рдХрд╛ рд╡рд┐рд╕реНрддрд╛рд░ рдирд╣реАрдВ рдХрд░рддрд╛

    рд░реВрдк

    variant рдкреНрд░реЙрдк рддреАрди рд░реВрдк рд╕реНрд╡реАрдХрд╛рд░ рдХрд░рддрд╛ рд╣реИ:

    рд░реВрдк рдЕрд░реНрде
    variant="school1" рд╣рд░ рдХреБрдВрдЬреА рдХреЗ рд▓рд┐рдП рдПрдХ рдирд╛рдорд┐рдд рд╡реИрд░рд┐рдПрдВрдЯ
    variant={["school1", "default"]} рдПрдХ рдХреНрд░рдорд┐рдд рд╡рд░реАрдпрддрд╛ рд╢реГрдВрдЦрд▓рд╛
    variant={{ "hero-banner": "school1", default: "base" }} рдкреНрд░рддрд┐ рдбрд┐рдХреНрд╢рдирд░реА рдХреБрдВрдЬреА рдПрдХ рд╡реИрд░рд┐рдПрдВрдЯ

    рд╡рд░реАрдпрддрд╛ рд╢реГрдВрдЦрд▓рд╛

    рд╢реГрдВрдЦрд▓рд╛ рдХреЛ рдкреНрд░рддреНрдпреЗрдХ рдХреБрдВрдЬреА рджреНрд╡рд╛рд░рд╛ рдШреЛрд╖рд┐рдд рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐рдпреЛрдВ рдХреЗ рд╕рд╛рдкреЗрдХреНрд╖ рдмрд╛рдПрдБ рд╕реЗ рджрд╛рдПрдБ рдЖрдЬрд╝рдорд╛рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ рдкрд╣рд▓реА рдШреЛрд╖рд┐рдд рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рдЬреАрддрддреА рд╣реИред рдЬрдм рдХреЛрдИ рднреА рдШреЛрд╖рд┐рдд рди рд╣реЛ, рддреЛ рдирд┐рд╣рд┐рдд рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рд╣реЛрддрд╛ рд╣реИ тАФ рдареАрдХ рд╡реИрд╕реЗ рд╣реА рдЬреИрд╕реЗ рдПрдХрд▓ рдорд╛рди рдХреЗ рд▓рд┐рдПред

    tsx
    <IntlayerProvider variant={["school1", "school2"]} />
// `hero-banner` рдХреЛрдИ `school1` рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рдШреЛрд╖рд┐рдд рдирд╣реАрдВ рдХрд░рддрд╛, рдкрд░ `school2` рдШреЛрд╖рд┐рдд рдХрд░рддрд╛ рд╣реИ тЖТ "school2"
// рд╡рд╣ рдХреБрдВрдЬреА рдЬреЛ рджреЛрдиреЛрдВ рдореЗрдВ рд╕реЗ рдХреЛрдИ рдШреЛрд╖рд┐рдд рдирд╣реАрдВ рдХрд░рддреА тЖТ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐

    рдЕрддрдГ ["black_friday", "summer"] рдХрд╛ рдЕрд░реНрде рд╣реИ ┬лрдпрджрд┐ рдЗрд╕ рдХреБрдВрдЬреА рдХреЗ рдкрд╛рд╕ black friday рд╣реИ рддреЛ рд╡рд╣реА, рдЕрдиреНрдпрдерд╛ summer, рдЕрдиреНрдпрдерд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ┬╗ред рд╢реГрдВрдЦрд▓рд╛рдПрдБ рдХреЙрд▓-рд╕реНрдерд▓ рдкрд░ рднреА рд╕реНрд╡реАрдХрд╛рд░реНрдп рд╣реИрдВ:

    tsx
    useIntlayer("hero-banner", { variant: ["black_friday", "summer"] });
    рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдпрд╣ рдХрдВрдЯреЗрдВрдЯ рдлрд╝рд╛рдЗрд▓ рдХреЗ variant рдлрд╝реАрд▓реНрдб рджреНрд╡рд╛рд░рд╛ рд╕реНрд╡реАрдХрд╛рд░ рдХрд┐рдП рдЬрд╛рдиреЗ рд╡рд╛рд▓реЗ рдРрд░реЗ рдХрд╛ рджрд░реНрдкрдг рдкреНрд░рддрд┐рдмрд┐рдВрдм рд╣реИ: рд╡рд╣рд╛рдБ рдПрдХ рдРрд░реЗ рдкреНрд░рддрд┐ рддрддреНрд╡ рдПрдХ рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рдШреЛрд╖рд┐рдд рдХрд░рддрд╛ рд╣реИ, рдпрд╣рд╛рдБ рд╡рд╣ рдЙрдиреНрд╣реЗрдВ рдкреНрд░рд╛рдердорд┐рдХрддрд╛ рдХреНрд░рдо рдореЗрдВ рдЙрдкрднреЛрдЧ рдХрд░рддрд╛ рд╣реИред

    рдкреНрд░рддрд┐-рдХреБрдВрдЬреА рдореИрдк

    рдкреНрд░рддреНрдпреЗрдХ рдбрд┐рдХреНрд╢рдирд░реА рдХреБрдВрдЬреА рдХреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╕рдВрдмреЛрдзрд┐рдд рдХрд░реЗрдВред рдЖрд░рдХреНрд╖рд┐рдд default рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рдЙрди рд╕рднреА рдХреБрдВрдЬрд┐рдпреЛрдВ рдХреЛ рдХрд╡рд░ рдХрд░рддреА рд╣реИ рдЬреЛ рд╕реВрдЪреАрдмрджреНрдз рдирд╣реАрдВ рд╣реИрдВ:

    tsx
    <IntlayerProvider
  variant={{
    "hero-banner": "school1",
    product: ["school1", "default"],
    default: "base",
  }}
/>
    рдкреНрд░реЛрд╡рд╛рдЗрдбрд░ рдкрд░ рдПрдХ рд╕рд╛рдорд╛рдиреНрдп рдСрдмреНрдЬреЗрдХреНрдЯ рд╣рдореЗрд╢рд╛ рдкреНрд░рддрд┐-рдХреБрдВрдЬреА рдореИрдк рдХреЗ рд░реВрдк рдореЗрдВ рдкрдврд╝рд╛ рдЬрд╛рддрд╛ рд╣реИ, рдХрднреА рдСрдмреНрдЬреЗрдХреНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рдирд╣реАрдВ тАФ рджреЛрдиреЛрдВ рд╕рдВрд░рдЪрдирд╛рддреНрдордХ рд░реВрдк рд╕реЗ рд╕рдорд╛рди рд╣реИрдВред рдХрд┐рд╕реА рдСрдмреНрдЬреЗрдХреНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ рдХреЛ рд╡реИрд╢реНрд╡рд┐рдХ рд░реВрдк рд╕реЗ рддрдп рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрд╕реЗ рдХрд┐рд╕реА рдкреНрд░рд╡рд┐рд╖реНрдЯрд┐ рдХреЗ рдиреАрдЪреЗ рдиреЗрд╕реНрдЯ рдХрд░реЗрдВ: variant={{ default: { id: "prod_abc" } }}ред

    рдЪреВрдБрдХрд┐ рдореИрдк рдХреА рдХреБрдВрдЬрд┐рдпрд╛рдБ рдЖрдкрдХреА рдШреЛрд╖рд┐рдд рдбрд┐рдХреНрд╢рдирд░реА рдХреБрдВрдЬрд┐рдпреЛрдВ рдХреЗ рд╡рд┐рд░реБрджреНрдз рдЬрд╛рдБрдЪреА рдЬрд╛рддреА рд╣реИрдВ, рдХреЛрдИ рдЯрд╛рдЗрдкреЛ тАФ рдпрд╛ рд╕реАрдзреЗ рд▓рд┐рдЦрд╛ рдЧрдпрд╛ рдСрдмреНрдЬреЗрдХреНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ, рдЬреИрд╕реЗ variant={{ id: "prod_abc" }} тАФ рд╕рдВрдХрд▓рди-рд╕рдордп рддреНрд░реБрдЯрд┐ рд╣реИред

    рд▓реЛрдбрд┐рдВрдЧ рдореЛрдб

    рдСрдмреНрдЬреЗрдХреНрдЯ рд╡реИрд░рд┐рдПрдВрдЯ рдЕрдХреНрд╕рд░ рдЖрд▓рд╕реА рд░реВрдк рд╕реЗ рд▓реЛрдб рдХрд┐рдП рдЬрд╛рддреЗ рд╣реИрдВред рдЗрд╕реЗ рдирд┐рдпрдВрддреНрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдбрд┐рдХреНрд╢рдирд░реА рдкрд░ importMode рд╕реЗрдЯ рдХрд░реЗрдВ:

    ts
    const dictionary = {
  key: "product",
  importMode: "fetch", // or "dynamic"
  variant: { id: "prod_abc", userId: "user_123" },
  content: { тАж },
} satisfies Dictionary;

export default dictionary;

    static, dynamic рдФрд░ fetch рдореЛрдб рдХреЗ рд╡рд┐рд╡рд░рдг рдХреЗ рд▓рд┐рдП рдмрдВрдбрд▓ рдСрдкреНрдЯрд┐рдорд╛рдЗрдЬрд╝реЗрд╢рди рджреЗрдЦреЗрдВред

    рд╡рд┐рд╢рд┐рд╖реНрдЯ рдЙрдкрдпреЛрдЧ-рдорд╛рдорд▓реЗ

    • рдкреНрд░рдпреЛрдЧ key рджреНрд╡рд╛рд░рд╛ рд╕рдВрдЪрд╛рд▓рд┐рдд A/B рдЯреЗрдХреНрд╕реНрдЯ рдкрд░реАрдХреНрд╖рдг
    • рдореМрд╕рдореА рдпрд╛ рдкреНрд░рдЪрд╛рд░рд╛рддреНрдордХ рдмреИрдирд░
    • рдлрд╝реАрдЪрд░-рдлрд╝реНрд▓реИрдЧ рд╕рдВрджреЗрд╢
    • locale-рд╡рд┐рд╢рд┐рд╖реНрдЯ рдорд╛рд░реНрдХреЗрдЯрд┐рдВрдЧ рдЕрднрд┐рдпрд╛рди
    • CMS рдореЗрдВ рдкреНрд░рдмрдВрдзрд┐рдд рдкреНрд░рддрд┐-рдЙрддреНрдкрд╛рдж рдорд╛рд░реНрдХреЗрдЯрд┐рдВрдЧ рдЯреЗрдХреНрд╕реНрдЯ
    • рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛-рд╡рд┐рд╢рд┐рд╖реНрдЯ рдпрд╛ рдЦрд╛рддрд╛-рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╕рд╛рдордЧреНрд░реА
    • рд░рдирдЯрд╛рдЗрдо рдкрд░ рдЕрдкрд╛рд░рджрд░реНрд╢реА ID рджреНрд╡рд╛рд░рд╛ рдХреБрдВрдЬреАрдмрджреНрдз рдХреЛрдИ рднреА рд╕рд╛рдордЧреНрд░реА
    рд╕рдВрдЧреНрд░рд╣рдкреНрд░рддрд┐ рд▓реЛрдХреЗрд▓ рдлрд╝рд╛рдЗрд▓