Internationalization
in plain HTML.

Drop-in localization primitives for Web Components. Format messages, numbers, dates, durations, relative time, lists, display names, and plurals with scoped locale runtimes that can switch language without a page refresh.

Get Started $ npm i @beforesemicolon/intl

9 WEB COMPONENTS

1 RUNTIME

Intl FORMATTERS

1<intl-locale locale="en-US" fallback-locale="en" src-dir="/locales">2    <h1><intl-msg key="checkout.title">Checkout</intl-msg></h1>3 4    <p>5        <intl-msg key="checkout.total">Total</intl-msg>:6        <intl-number7            type="currency"8            currency="USD"9        >1299.99</intl-number>10    </p>11 12    <intl-rel-time live>2026-01-01T00:00:00Z</intl-rel-time>13</intl-locale>

// THE ECOSYSTEM

Built on Web Component & Markup.

Intl is built on top of Web Component and Markup. Same engine, modular packages, zero lock-in.

Markup

@beforesemicolon/markup

The reactive templating system behind the Before Semicolon component stack. Tagged templates, state, effects, repeat, and suspense.

Read the docs

Web Component

@beforesemicolon/web-component

The custom-element layer Intl components are built on. Props, state, lifecycle hooks, scoped rendering, and framework-free browser registration.

Read the docs

// WHY INTL

Localize component-first interfaces without framework lock-in.

Use declarative custom elements for markup-heavy views and runtime-aware formatter functions for application code, tests, and server-side work.

Scoped locale runtime

Set locale and messages once with <intl-locale>, switch language with setLocale(), and nest independent runtime scopes anywhere in the DOM.

Formatter APIs

Call intlMsg, intlNumber, intlDateTime, intlDuration, intlRelTime, intlList, intlName, and intlPlural directly.

Accessible output

Components render light DOM text and semantic elements like <time>, with language direction metadata applied from the active locale.

Explicit component API

Attributes map directly to the underlying Intl options, keeping markup readable and predictable from the first release.

Component entrypoints

Import all components from the root package or use per-component entrypoints when you want smaller browser bundles.

Cached formatter reuse

Formatter instances are cached by locale and options inside the active runtime scope, avoiding repeated Intl.* construction.

// USE THIS TODAY

Five practical localization examples.

Each example works with the same runtime and component model, so teams can mix markup and JavaScript without changing libraries.

EXAMPLE 01

Currency formatting

1<intl-locale locale="en-US">2    <intl-number3        type="currency"4        currency="USD"5    >1299.99</intl-number>6 7    <intl-number8        type="currency"9        currency="EUR"10        locale="de-DE"11    >1299.99</intl-number>12</intl-locale>

EXAMPLE 02

Relative time and date

1<intl-locale locale="en-US">2    <intl-datetime3        date-style="medium"4        time-style="short"5    >2026-06-30T10:15:00Z</intl-datetime>6 7    <intl-rel-time live>2026-01-01T00:00:00Z</intl-rel-time>8</intl-locale>

EXAMPLE 03

Plural and list

1<intl-locale locale="en-US">2    <intl-plural one="item" other="items">2</intl-plural>3    <intl-list type="and">shipping tax discounts</intl-list>4</intl-locale>

EXAMPLE 04

Language switcher

1<intl-locale id="page-locale" locale="en" src-dir="/locales">2    <select id="language">3        <option value="en">English</option>4        <option value="fr">French</option>5    </select>6 7    <h1><intl-msg key="hero.title">Welcome</intl-msg></h1>8</intl-locale>9 10<script>11    language.addEventListener('change', () => {12        pageLocale.runtime.setLocale(language.value)13    })14</script>

EXAMPLE 05

Full composition

1<intl-locale locale="en-US" src-dir="/locales">2    <h1><intl-msg key="checkout.title">Checkout</intl-msg></h1>3    <p>4        <intl-msg key="checkout.total">Total</intl-msg>5        <intl-number type="currency" currency="USD">1299.99</intl-number>6    </p>7    <intl-msg key="checkout.items">8        <intl-plural one="item" other="items">2</intl-plural>9    </intl-msg>10</intl-locale>

// QUICK START

Install in seconds.

Use the package entrypoint for all components and helpers, or import individual component entrypoints when you want smaller bundles.

<script src="https://unpkg.com/@beforesemicolon/intl/dist/client.js"></script>

npm install @beforesemicolon/intl

yarn add @beforesemicolon/intl

pnpm add @beforesemicolon/intl

Build localized interfaces with Web Components.

Read the docs for runtime setup, formatter APIs, browser registration, component props, edge cases, and compatibility notes.

Get Started Read the Docs

Internationalizationin plain HTML.