Eén project. Vier SDK's. Synchroon vertaald.

Dezelfde frases, weergegeven door langsys-js-react, langsys-js-vue, langsys-js-svelte — en de vanilla basis-SDK langsys-js-typescript die ze allemaal omhullen — die één gedeeld Langsys-project uitlezen. Wijzig de taalregio en zie alle panelen tegelijk bijwerken.

Dezelfde zin, drie idiomen — de code onder elk paneel is wat verschilt. Zet de berichten op 1 en alle bindings worden in één keer opnieuw weergegeven. De zin is plat geschreven: Langsys genereert de meervoudsvormen van elke locale tijdens het vertalen, dus niemand schrijft de takken.

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

De brug in elk paneel: useSignal (React) · useSignal (Vue) · $store (Svelte — geen adapter nodig) · signal.subscribe() (vanilla).

Kies je framework

Dezelfde basis-SDK eronder — elke pagina combineert live demo's met de idiomen van één binding.

Nieuw bij Langsys? De concepten leggen de ideeën uit waarop deze demo draait — de phrase is de sleutel, de locale-store en waarom een alleen-lezensleutel veilig is in de browser.