Jesper Orb

Intl Explorer


Intl Explorer is a tool for experimenting and trying out the ECMAScript Internationalization API.


Supported by all major browsers, the Intl object provides access to the ECMAScript Internationalization API, a suite of functions for language sensitive string comparison, number formatting, and more.

Intl Explorer is a website for experimenting with these functions and see the result evaluated in a code snippet. Every code snippet also comes with a Copy-button which copies the code that produces the result to your clipboard.

Furthermore the website provides browser compability data directly from MDN about which functions can be used in which browsers.


I built this tool because I had found out about Intl.DateTimeFormat and wanted to use it in my companys code. But we already had some specific date formats in our designs (relying on date-fns or similar formatters). I wasn't sure that a conversion was possible or if we were going to have to change some date format to better suite the output of Intl.DateTimeFormat.

MDN is great and has all the info and some interactive examples but it has some issues:

This is some tedious work. So I thought to myself:

This was also really tedious work but it was feasible, and that was the start of what is now:

Technology used

Intl-explorer is built with SvelteKit and TypeScript. And that is basically it.

For the Playground I am using svelte-higlight to highlight code snippets.

For the browser compability data I am using mdn/browser-compat-data. This is a big package with everything in it. So for better handling I am looping through it creating specific .json-files for each page with just only the required data.

How it works

Getting each option

Every function under the namespace has an options-object to pass as second argument:

new Intl.ListFormat("en-US", {
  type: "conjunction",
  style: "long",
.format(["Miso", "Sesam"])
// Miso and Sesam

The process of getting the correct data for each function was where most of the time went as it was bit tedious to get right. I manually looked at the TypeScript-types for each function and created objects that represent those values:

export const listFormatOptions = {
	type: [undefined, 'conjunction', 'disjunction', 'unit'],
	style: [undefined, 'long', 'short', 'narrow'],
} as const;

You can find these types in the TypeScript source repo. For example in the file: lib/lib.es5.d.ts. It can be a bit tricky to get all the types tho because not everything was implemented in ECMAScript5. So you may find some more types in different lib-files. For example lib/lib.es2022.d.t includes the types for the Segmenter-function which is the newest one.

When you have these options gathered you can loop through them and call each function under Intl with each option and show the output.

Getting each locale

I think I got this from Stack Overflow. Someone has just compiled a list based on some spec/wiki which every possible known locale. Source File: This is just a big hard coded object 🤷.

It is the same with calendars, currencies and units. These are just hard coded. With units (yards, miles etc.) I tried looking at the specification and compile my own list of every possible unit. But it turns out not every unit in the spec is implemented and it does not say which are implemented or not.

Closing notes

I hope you will have use for this tool! Please give it a star on GitHub. And if you have found any issues, please file an issue at GitHub. Thank you!