Svelte Fluent

svelte-fluent is a powerful localization library for Svelte and SvelteKit that enables you to integrate translations using Mozilla's natural-sounding Fluent syntax easily.

Upcoming v2 Release

We are working on the next major release which we aim to release in the beginning of 2026.

• Preview: Try the new API in the next branch.
• Changes: Expect breaking changes as we streamline the API and adopt Svelte 5 runes.
• Feedback: Please report issues or share your thoughts on GitHub.

Installation

npm install --save-dev @nubolab-ffwd/svelte-fluent
npm install --save jsdom

Documentation

Documentation can be found at https://nubolab-ffwd.github.io/svelte-fluent/

Example

<script>
    import { FluentBundle, FluentResource } from '@fluent/bundle';
    import { Localized, initFluentContext, createSvelteFluent } from '@nubolab-ffwd/svelte-fluent';

    let userName = 'Anna';
    let userGender = 'female';
    let photoCount = 3;

    const translations = `
# Simple things are simple.
hello-user = Hello, {$userName}!

# Complex things are possible.
shared-photos =
    {$userName} {$photoCount ->
        [one] added a new photo
       *[other] added {$photoCount} new photos
    } to {$userGender ->
        [male] his stream
        [female] her stream
       *[other] their stream
    }.
`;
    const bundle = new FluentBundle('en');
    bundle.addResource(new FluentResource(translations));

    initFluentContext(() => createSvelteFluent([bundle]));
</script>

<strong><Localized id="hello-user" args={{ userName }} /></strong>
<p>
    <Localized id="shared-photos" args={{ userName, userGender, photoCount }} />
</p>