[Updated on 2020-05-08: Changed example to match current release.]

Across my various web projects, adding localization has always required learning how to use my current framework’s popular localization library. It was always frustrating having to learn a new library to get the same localization files on the screen. I assumed I was the only one having this problem so I went about my work accepting it as fact. Recently though I began hearing of others having the same struggle, and it finally came to me. Web components!

At the same time I was also reading about Fluent, a more modern approach to localization.

Combined with my interest in making localization easier and wanting to use Fluent in my apps, I built @wolfadex/fluent-web. Now I can add localization to any web app without spending time learning a new library! Check out the demo below to see it in action.

The bare minimum to get Hello, World! on the screen is:

Install @wolfadex/fluent-web and @fluent/bundle Add a fluent-text web component to your html <fluent-text id="my-text-element" messageid="hello"></fluent-text> Build a resource, and add it to your component import "@wolfadex/fluent-web"; import { FluentResource, FluentBundle } from "@fluent/bundle"; const resource = new FluentResource(` hello = Hello, Fluent! `); const bundle = new FluentBundle("en-US"); bundles.addResource(resource); const textEl = document.getElementById("my-text-element"); textEl.bundles = [bundle]; Get your result Hello, Fluent!

For more information on how to use it please check out the docs.

I do plan on migrating the docs to use fluent-web . Any help with localizing would be most appreciated as I only spean American English and ASL. I’ve created an GitHub issue to keep track of which locales are in progress and which are completed.

Lastly I’d like to thank @turboMaCk, @toastal, and @BrianHicks for providing the extra localizations in the demo, and the Fluent team for their great feedback and for building Fluent.