IntlPull
Svelte
120K weekly downloads

Svelte Localization with svelte-i18n

Lightweight i18n for Svelte and SvelteKit. Store-based reactivity. ICU MessageFormat. 120K weekly downloads. Perfect for modern Svelte apps.

Prerequisites

  • Svelte 4+ or SvelteKit application
  • Node.js 18+
  • npm or pnpm package manager

Common Challenges

Problems developers face when localizing Svelte apps—and how IntlPull helps.

SvelteKit Integration

Setting up SSR with proper hydration requires understanding SvelteKit's load functions.

Smaller Ecosystem

Fewer plugins and extensions compared to react-i18next. May need custom solutions.

Documentation Gaps

Some advanced use cases lack documentation. Community resources are growing.

svelte-i18n Features

Why svelte-i18n is a great choice for Svelte localization.

Store-Based Reactivity

Uses Svelte stores. Translations auto-update when locale changes. No manual subscriptions.

vs manual updates

ICU MessageFormat

Full ICU syntax support. Plurals, selects, and nested formatting.

vs basic interpolation

Lazy Loading

Load translations on demand. Perfect for large apps. Async loader support.

vs loading all upfront

SvelteKit SSR

Server-side rendering support. Proper hydration. SEO-friendly localization.

vs client-only solutions

Lightweight

Small bundle footprint. No heavy dependencies. Svelte-native approach.

vs bloated libraries

Formatter Functions

Format dates, numbers, currencies. Uses native Intl APIs. Locale-aware.

vs external formatters

Quick Setup

Get svelte-i18n running in your Svelte project.

1

Install svelte-i18n

Add svelte-i18n to your Svelte project.

npm install svelte-i18n
2

Create i18n Configuration

Set up the i18n instance.

// src/lib/i18n.js
import { register, init, getLocaleFromNavigator } from 'svelte-i18n';

register('en', () => import('./locales/en.json'));
register('es', () => import('./locales/es.json'));
register('de', () => import('./locales/de.json'));

init({
  fallbackLocale: 'en',
  initialLocale: getLocaleFromNavigator(),
});
3

Load in Layout

Import i18n in your root layout.

<!-- src/routes/+layout.svelte -->
<script>
  import '../lib/i18n';
  import { isLoading } from 'svelte-i18n';
</script>

{#if $isLoading}
  <p>Loading...</p>
{:else}
  <slot />
{/if}
4

Use Translations

Use the $_ store in components.

<script>
  import { _, locale, locales } from 'svelte-i18n';
</script>

<h1>{$_('welcome.title')}</h1>
<p>{$_('welcome.description', { values: { name: 'Svelte' } })}</p>

<select bind:value={$locale}>
  {#each $locales as loc}
    <option value={loc}>{loc}</option>
  {/each}
</select>

IntlPull Integration

Connect IntlPull to manage translations professionally.

1

Install IntlPull CLI

Add the CLI for translation management.

npm install -D @intlpull/cli
2

Configure intlpull.json

Set up the project configuration.

{
  "projectId": "your-project-id",
  "format": "json",
  "sourceLocale": "en",
  "localesDir": "./src/lib/locales",
  "filePattern": "{locale}.json"
}
3

Pull Translations

Download translations from IntlPull.

npx intlpull pull
4

Add to Build

Integrate with your build process.

// package.json
{
  "scripts": {
    "i18n:pull": "intlpull pull",
    "build": "npm run i18n:pull && vite build"
  }
}

Frequently Asked Questions

Related Guides

React

React i18next Localization Guide

Complete guide to React localization with react-i18next. Setup, lazy loading, namespaces, SSR, and IntlPull integration for production i18n.

Vue

Vue.js Localization with vue-i18n

Complete guide to Vue 3 localization with vue-i18n. Composition API, lazy loading, and IntlPull integration for production i18n.

Ready to Localize Your Svelte App?

Start with our free tier. No credit card required.

    Svelte Localization with svelte-i18n | IntlPull | IntlPull