FormatJS — Internationalization Framework for JavaScript

Introduction

FormatJS is a set of internationalization libraries that implement the ICU Message syntax standard. The project includes react-intl for React applications, along with standalone formatters for numbers, dates, relative times, and pluralized strings that work in any JavaScript environment.

What FormatJS Does

• Formats numbers, currencies, dates, and relative times for any locale
• Parses and evaluates ICU MessageFormat strings with plurals and select expressions
• Provides React bindings via react-intl with hooks and components
• Compiles message catalogs at build time for smaller runtime bundles
• Polyfills missing Intl APIs for older browsers

Architecture Overview

FormatJS is organized as a monorepo of small focused packages. The core intl-messageformat parser compiles ICU message strings into an AST, which is evaluated at runtime with locale data from the native Intl API. React-intl wraps this in a context provider and exposes hooks like useIntl() for component-level formatting.

Self-Hosting & Configuration

• Install react-intl for React or @formatjs/intl for framework-agnostic use
• Wrap your app with IntlProvider passing locale and message objects
• Use the @formatjs/cli to extract messages from source code into JSON catalogs
• Compile messages ahead of time with formatjs compile to skip runtime parsing
• Add polyfills for Intl.PluralRules or Intl.RelativeTimeFormat if targeting older browsers

Key Features

• Full ICU MessageFormat support including nested plurals and selects
• Build-time message extraction and compilation CLI
• Locale data sourced from the native Intl API, not bundled CLDR data
• TypeScript-first with generated message type checking
• Tree-shakeable package structure for minimal bundle impact

Comparison with Similar Tools

• i18next — Plugin ecosystem is larger; FormatJS is more standards-aligned with ICU syntax
• Lingui — Macro-based extraction; FormatJS uses AST-based CLI extraction
• vue-i18n — Vue-specific; FormatJS targets React and vanilla JS
• Rosetta — Minimal key-value lookup; FormatJS handles complex pluralization and formatting

FAQ

Q: Is FormatJS only for React? A: No. The core packages (intl-messageformat, @formatjs/intl) work in any JS environment. react-intl is the React-specific layer.

Q: How do I extract translatable strings from my code? A: Use formatjs extract CLI to scan source files and output a JSON message catalog.

Q: Does it support server-side rendering? A: Yes. The IntlProvider works in SSR contexts, and the standalone formatters run in Node.js.

Q: How large is the bundle? A: The react-intl package adds roughly 15-20 KB gzipped; using build-time compilation reduces this further.

Sources

• https://github.com/formatjs/formatjs
• https://formatjs.io