One project. Four SDKs. Translated in lockstep.

The same phrases rendered by langsys-js-react, langsys-js-vue, langsys-js-svelte — and the vanilla langsys-js-typescript base SDK they all wrap — reading one shared Langsys project. Change the locale and watch every panel update at once.

Same phrase, three idioms — the code under each panel is what differs. Step the messages to 1 and every binding re-renders at once. The sentence is written flat: Langsys generates each locale's plural forms during translation, so nobody writes the branches.

const t = useT();
const count = useSignal(countStore);

<p>{t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{t('You have {count} new messages.', 'LearnDemo', { count })}</p>

const t = useT();
const count = useSignal(countStore);

<p>{{ t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' }) }}</p>
<p>{{ t('You have {count} new messages.', 'LearnDemo', { count }) }}</p>

import { t } from 'langsys-js-svelte';

<p>{$t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages.', 'LearnDemo', { count: $countStore })}</p>

import { t, tSignal } from 'langsys-js-typescript';

tSignal.subscribe(() => {
  hello.textContent = t('Hello, {name}!', 'LearnDemo', { name: 'Sarah' });
  messages.textContent = t('You have {count} new messages.', 'LearnDemo', { count });
});

The bridge in each panel: useSignal (React) · useSignal (Vue) · $store (Svelte — no adapter needed) · signal.subscribe() (vanilla).

Pick your framework

Same base SDK underneath — each page pairs live demos with the idioms of one binding.

New to Langsys? The concepts explain the ideas this demo runs on — the phrase is the key, the locale store, and why a read-only key is safe in the browser.