Quick start

Requires Svelte 5. The SDK works with SvelteKit server rendering. Source on GitHub

Create a project

Create a project in Langsys. You'll need its project ID and an API key. Request early access

Install

npm install langsys-js-svelte

Initialize

Initialize Langsys once, in your root layout. It takes a config object and a writable store holding the user's locale.

// src/routes/+layout.svelte
<script lang="ts">
    import { writable } from 'svelte/store';
    import { onMount } from 'svelte';
    import { LangsysApp, type iLangsysInitConfig } from 'langsys-js-svelte';

    const userLocale = writable('en-US');

    onMount(async () => {
        const config: iLangsysInitConfig = {
            projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
            key: import.meta.env.VITE_LANGSYS_API_KEY,
            UserLocaleStore: userLocale,
            baseLocale: 'en-US',
            ssrTokenStrategy: 'client', // 'client' | 'server' | 'auto'
        };

        const res = await LangsysApp.init(config);
        if (!res.status) console.warn(res.errors?.join(', '));
    });
</script>

API keys

Write key

For development. The SDK registers new phrases and content blocks as they appear in your app.

Read-only key

For production. The SDK only fetches translations and never creates phrases.

The SDK detects which kind of key it has and behaves accordingly.

Translate phrases

Use the t store for individual strings. The phrase itself is the lookup key and the base-language text, so there's no separate key file. Placeholders in curly braces are type-checked when you compile.

<script lang="ts">
    import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to my app', 'UI')}</h1>
<p>{$t('Hello, {name}!', 'UI', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages', 'Notifications', { count: 3 })}</p>

Use a category when the same phrase means different things in different places:

<strong>{$t('Home', 'Main menu')}</strong>
<strong>{$t('Home', 'Home repairs')}</strong>

Translate content blocks

Use the Translate component for larger blocks where structure matters. Translators see the styled result and translate it as one unit, still working phrase by phrase inside it.

<script lang="ts">
    import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Blog" tag="article">
    <h1>My article title</h1>
    <p>My content <strong>reads best</strong> in the reader's own language.</p>
</Translate>

Other SDKs and the API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

API reference

Stuck on something? Send us a message