svelte-fluent

The expressive Svelte localization library

Describe translations with Mozilla's natural-sounding Fluent syntax

With svelte-fluent, developers can focus on building the core functionality of their application while not standing in the way of translating it into multiple languages.

Fluent is a localization system developed by Mozilla to address the limitations of traditional localization systems. They designed it to make it easier to create translations of software interfaces and content and to support more complex language structures than traditional localization systems can handle.

The example below shows how you can use svelte-fluent and FTL, the format for describing translation resources used by Fluent, to represent complex natural language concepts such as gender, plurals, and others that are important to many languages but difficult to handle with traditional localization systems.

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

	export let userName = 'Anna';
	export let userGender = 'female';
	export 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));
</script>

<FluentProvider bundles={[bundle]}>
	<strong><Localized id="hello-user" args={{ userName }} /></strong>
	<p>
		<Localized id="shared-photos" args={{ userName, userGender, photoCount }} />
	</p>
</FluentProvider>
Result:
Hello, ⁨Anna⁩!

⁨Anna⁩ ⁨added ⁨3⁩ new photos⁩ to ⁨her stream⁩.