Un progetto. Quattro SDK. Tradotti in perfetta sincronia.

Le stesse frasi renderizzate da langsys-js-react, langsys-js-vue, langsys-js-svelte — e dall'SDK di base langsys-js-typescript in vanilla che tutti incapsulano — leggendo un unico progetto Langsys condiviso. Cambia la lingua e guarda ogni pannello aggiornarsi contemporaneamente.

Stessa frase, tre idiomi: a cambiare è il codice sotto ogni pannello. Porta i messaggi a 1 e tutti i binding vengono renderizzati di nuovo contemporaneamente. La frase è scritta in forma piatta: Langsys genera le forme plurali di ogni lingua durante la traduzione, quindi nessuno deve scrivere i rami.

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 });
});

Il collegamento in ogni pannello: useSignal (React) · useSignal (Vue) · $store (Svelte, nessun adattatore necessario) · signal.subscribe() (vanilla).

Scegli il tuo framework

Stesso SDK di base sotto il cofano: ogni pagina abbina demo dal vivo e gli idiomi di un singolo binding.

Non conosci Langsys? I concetti spiegano le idee su cui si basa questa demo: la frase è la chiave, lo store delle lingue e perché una chiave di sola lettura è sicura nel browser.