intlayer-vanilla git:20260923.e86be10A

Immutable. This exact content never changes and is served at /api/v1/blob/22bc19730b611f3e.

---
name: intlayer-vanilla
description: Integrates Intlayer internationalization with plain JavaScript / TypeScript (no UI framework). Use when the user asks to "setup Vanilla JS i18n", translate a static HTML page, use "useIntlayer" without a framework, or switch locale in a vanilla application.
metadata:
  author: Intlayer
  url: https://intlayer.org
  license: Apache-2.0
  mcp-server: "@intlayer/mcp"
  category: productivity
  tags: [i18n, vanilla, javascript, vite]
  documentation: https://intlayer.org/doc
  support: contact@intlayer.org
---

# Intlayer Vanilla JS Usage

## Core Philosophy

Intlayer promotes **Component-Level Content Declaration**. Instead of a massive global translation file, content is declared in `*.content.ts` files adjacent to the scripts that use them.

`vanilla-intlayer` mirrors the `react-intlayer` API without depending on a UI framework: a pub/sub singleton plus callback-based helpers.

### Declare Content

**File:** `src/app.content.ts`

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

const content = {
  key: "app",
  content: {
    title: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
    }),
  },
} satisfies Dictionary;

export default content;
```

## Setup

- [Vite and Vanilla JS](references/environment_vite-and-vanilla.md) (bundled app)
- [Vanilla JS](references/environment_vanilla.md) (no bundler, standalone script generated by `intlayer standalone`)

Call `installIntlayer()` **before** any content is rendered.

## useIntlayer

`useIntlayer(key, locale?)` returns the content directly. Chain `.onChange()` to re-render when the locale changes.

```typescript
import { useIntlayer } from "vanilla-intlayer";

const title = document.querySelector("h1")!;

const content = useIntlayer("app").onChange((newContent) => {
  title.textContent = String(newContent.title);
});

title.textContent = String(content.title);
// Native attributes: use `.value`
// image.alt = content.title.value;
```

> Without a bundler, read the same helpers from the globals of the standalone bundle: `window.VanillaIntlayer` and `window.Intlayer`.

## useLocale

```typescript
import { useLocale } from "vanilla-intlayer";

const { locale, availableLocales, setLocale, subscribe } = useLocale();

const unsubscribe = subscribe((newLocale) => {
  document.documentElement.lang = newLocale;
});

setLocale("fr");
```

## Compiler

The [Intlayer Compiler](references/compiler.md) can extract all your content keys from your components, using one CLI command (`npx intlayer extract`) or automatically at app build.

## References

- [Website](https://intlayer.org)
- [Doc](https://intlayer.org/doc)

### Environments

- [Vite and Vanilla JS](references/environment_vite-and-vanilla.md)
- [Vanilla JS](references/environment_vanilla.md)

### Concepts

- [Variants](references/concept_variants.md)
- [Collections](references/concept_collections.md)
- [Compiler](references/compiler.md)
- [Formatters (number, currency, date, …)](references/formatters.md)

### Packages

- [Intlayer Exports](references/packages_intlayer_exports.md)