# @nanostores/i18n

> A tiny (≈600 bytes) i18n library for React/Preact/Vue/Svelte

Latest version **1.3.3** (published 2026-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nanostores/i18n
pnpm add @nanostores/i18n
yarn add @nanostores/i18n
bun add @nanostores/i18n
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2026-05-10 |
| First published | 2021-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | ^20.0.0 \|\| >=22.0.0 |
| Dependencies | 0 |
| Unpacked size | 27.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 305 |
| Author | Andrey Sitnik |
| Maintainers | ai |
| Keywords | i18n, internationalization, localization, nano, nanostores, preact, react, svelte, vue |

## Links

- npm: https://www.npmjs.com/package/@nanostores/i18n
- Repository: https://github.com/nanostores/i18n
- Homepage: https://github.com/nanostores/i18n#readme
- Issues: https://github.com/nanostores/i18n/issues
- Funding: https://github.com/sponsors/ai
- npm.io page: https://npm.io/package/@nanostores/i18n

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 1.3.3 (latest) — 2026-05-10
- 1.3.2 — 2026-04-15
- 1.3.1 — 2026-04-14
- 1.3.0 — 2026-04-13
- 1.2.2 — 2025-07-27
- 1.2.1 — 2025-07-25
- 1.2.0 — 2025-07-22
- 1.1.2 — 2025-07-19
- 1.1.1 — 2025-07-18
- 1.1.0 — 2025-07-18
- 1.0.1 — 2025-06-17
- 1.0.0 — 2025-04-10
- 0.12.2 — 2024-08-03
- 0.12.1 — 2024-02-20
- 0.12.0 — 2023-10-05
- … 14 more at https://npm.io/package/@nanostores/i18n/versions

## README

# Nano Stores I18n

<img align="right" width="92" height="92" title="Nano Stores logo"
     src="https://nanostores.github.io/nanostores/logo.svg">

Tiny and flexible JS library to make your web application translatable.
Uses [Nano Stores] state manager and [JS Internationalization API].

- **Small.** Around 1 KB (minified and brotlied). Zero dependencies.
- Works with **React**, **Preact**, **Vue**, **Svelte**, and plain JS.
- Supports **tree-shaking** and translation **on-demand download**.
- **Plain flat JSON** translations compatible with
  online translation services like [Weblate].
- Out of the box **TypeScript** support for translations.
- **Flexible variable translations**. You can change translation,
  for instance, depends on screen size.

```tsx
// components/post.jsx
import { params, count } from '@nanostores/i18n' // You can use own functions
import { useStore } from '@nanostores/react'
import { i18n, format } from '../stores/i18n.js'

export const messages = i18n('post', {
  title: 'Post details',
  published: params('Was published at {at}'), // TypeScript will get `at` type
  comments: count({
    one: '{count} comment',
    other: '{count} comments'
  })
})

export const Post = ({ author, comments, publishedAt }) => {
  const t = useStore(messages)
  const { time } = useStore(format)
  return (
    <article>
      <h1>{t.title}</h1>
      <p>{t.published({ at: time(publishedAt) })}</p>
      <p>{t.comments(comments.length)}</p>
    </article>
  )
}
```

```ts
// stores/i18n.js
import { createI18n, localeFrom, browser, formatter } from '@nanostores/i18n'
import { persistentAtom } from '@nanostores/persistent'

export const setting = persistentAtom<string | undefined>('locale', undefined)

export const locale = localeFrom(
  setting, // User’s locale from localStorage
  browser({
    // or browser’s locale auto-detect
    available: ['en', 'fr', 'ru'],
    fallback: 'en'
  })
)

export const format = formatter(locale)

export const i18n = createI18n(locale, {
  get(code) {
    return fetchJSON(`/translations/${code}.json`)
  }
})
```

```js
// public/translations/ru.json
{
  "post": {
    "title": "Данные о публикации",
    "published": "Опубликован {at}",
    "comments": {
      "one": "{count} комментарий",
      "few": "{count} комментария",
      "many": "{count} комментариев",
    }
  },
  // Translations for all other components
}
```

[JS Internationalization API]: https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/
[Nano Stores]: https://github.com/nanostores/nanostores
[Weblate]: https://weblate.org/

---

<img src="https://cdn.evilmartians.com/badges/logo-no-label.svg" alt="" width="22" height="16" /> Made at <b><a href="https://evilmartians.com/devtools?utm_source=nanostores-i18n&utm_campaign=devtools-button&utm_medium=github">Evil Martians</a></b>, product consulting for <b>developer tools</b>.

---

## Docs
Read full docs **[here](https://github.com/nanostores/i18n#readme)**.

---
_Source: https://npm.io/package/@nanostores/i18n · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._