🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

fluent-web

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fluent-web

Drop-in localization framework for HTML documents

latest
Source
npmnpm
Version
0.1.1
Version published
Maintainers
1
Created
Source

fluent-web

fluent-web is a runtime polyfill that binds Fluent and FluentDOM into a vanilla Web platform (HTML, DOM, JS).

Installation

fluent-web provides a glue code that is executed at runtime to construct DOMLocalization, bind it to document.l10n, perform initial document translation and set the event listeners and MutationObserver.

The result fluent-web.js file should be included in the HTML file and any code executing after it will have access to the FluentWeb API.

Quick start

Clone and run the projectfluent/fluent-web repository to see the examples:

git clone https://github.com/projectfluent/fluent-web
cd fluent-web
npm install
npm start
open http://127.0.0.1:8080/examples/simple.html

How to use

The primary access point is the document.l10n object of class DOMLocalization. It is already constructed based on the resources linked from the document and localized into languages negotiated based on the available languages from the <meta> tag and languages requested via navigator.languages.

<html>
  <head>
    <meta name="defaultLanguage" content="en-US">
    <meta name="availableLanguages" content="en-US, fr">
    <link rel="localization" href="locales/{locale}/main.ftl">
    <link rel="localization" href="locales/{locale}/head.ftl">
    <script defer src="./src/fluent-web.js"></script>
  </head>
  <body>
    <h1 data-l10n-id="hello-world"/>
  </body>
</html>


function showMessage() {
  let msg = await document.l10n.formatValue('confirm-msg')
  alert(msg);
}

let h1 = document.querySelector('h1');
document.l10n.setAttributes(h1, 'welcome', { user: 'Anna' });

Learn more

Find out more about Project Fluent at projectfluent.org, including documentation of the Fluent file format (FTL), links to other packages and implementations, and information about how to get involved.

Keywords

localization
l10n
internationalization
i18n
locale
language

FAQs

Package last updated on 03 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Security News

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Deno 2.6 introduces deno audit with a new --socket flag that plugs directly into Socket to bring supply chain security checks into the Deno CLI.

By Sarah Gooding  -  Dec 12, 2025