[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:

1. Install @wolfadex/fluent-web and @fluent/bundle
2. Add a fluent-text web component to your html

   <fluent-text id="my-text-element" messageid="hello"></fluent-text>
   

3. 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];
   

4. 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.