# @fluent/dom

> Fluent bindings for DOM

Latest version **0.10.2** (published 2025-07-18) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @fluent/dom
pnpm add @fluent/dom
yarn add @fluent/dom
bun add @fluent/dom
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.10.2 |
| Published | 2025-07-18 |
| First published | 2019-07-25 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 |
| Dependencies | 1 |
| Unpacked size | 86.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1009 |
| Author | Mozilla |
| Maintainers | eemeli, zbraniecki, tatumcreative, flod |
| Keywords | localization, l10n, internationalization, i18n, locale, language, formatting, translate, translation, format |

## Links

- npm: https://www.npmjs.com/package/@fluent/dom
- Repository: https://github.com/projectfluent/fluent.js
- Homepage: https://github.com/projectfluent/fluent.js#readme
- Issues: https://github.com/projectfluent/fluent.js/issues
- npm.io page: https://npm.io/package/@fluent/dom

## Dependencies (1)

- [cached-iterable](https://npm.io/package/cached-iterable.md) ^0.3

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 0.10.2 (latest) — 2025-07-18
- 0.10.1 — 2025-03-27
- 0.10.0 — 2024-06-25
- 0.9.0 — 2023-03-13
- 0.8.1 — 2021-12-21
- 0.8.0 — 2021-09-13
- 0.7.0 — 2020-07-02
- 0.6.0 — 2019-08-21
- 0.5.0 — 2019-07-25

## README

# @fluent/dom ![](https://github.com/projectfluent/fluent.js/workflows/test/badge.svg)

`@fluent/dom` provides the DOM bindings for [Project Fluent][].

[project fluent]: https://projectfluent.org

## Installation

`@fluent/dom` can be used both on the client-side and the server-side. You
can install it from the npm registry or use it as a standalone script (as the
`FluentDOM` global).

    npm install @fluent/dom

## How to use

The `DOMLocalization` constructor provides the core functionality of
full-fallback ready message formatting. It uses a lazy-resolved
`FluentBundle` objects from the `@fluent/bundle` package to format messages.

On top of that, `DOMLocalization` can localize any DOMFragment by
identifying localizable elements with `data-l10n-id` and translating them.

```javascript
import { DOMLocalization } from "@fluent/dom";

const l10n = new DOMLocalization(
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

l10n.connectRoot(document.documentElement);

l10n.translateRoots();

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

// Sets `data-l10n-id` and `data-l10n-args` which triggers
// the `MutationObserver` from `DOMLocalization` and translates the
// element.
l10n.setAttributes(h1, "welcome", { user: "Anna" });
```

For imperative uses straight from the JS code, there's also a `Localization`
class that provides just the API needed to format messages in the running code.

```javascript
import { Localization } from "@fluent/dom";

function* generateBundles() {
  // Some lazy logic for yielding FluentBundles.
  yield* [bundle1, bundle2];
}

const l10n = new Localization(
  document,
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

async function main() {
  const msg = await l10n.formatValue("welcome", { name: "Anna" });
  // → 'Welcome, Anna!'
}
```

---
_Source: https://npm.io/package/@fluent/dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._