Un projet. Quatre SDK. Traduits de façon synchronisée.

Les mêmes phrases rendues par langsys-js-react, langsys-js-vue, langsys-js-svelte — et par le SDK de base langsys-js-typescript en JavaScript pur qu'ils encapsulent tous — à partir d'un seul projet Langsys partagé. Changez de langue et regardez tous les panneaux se mettre à jour en même temps.

Même phrase, trois langages : seul le code sous chaque panneau change. Faites passer les messages à 1 et chaque binding se met à jour d’un coup. La phrase est écrite à plat : Langsys génère les formes plurielles de chaque locale pendant la traduction, personne n’a donc à écrire les 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 });
});

Le pont dans chaque panneau : useSignal (React) · useSignal (Vue) · $store (Svelte — aucun adaptateur nécessaire) · signal.subscribe() (vanilla).

Choisissez votre framework

Le même SDK de base en dessous : chaque page associe des démos interactives aux idiomes d'un binding.

Vous découvrez Langsys ? Les concepts expliquent les idées sur lesquelles repose cette démo : la phrase comme clé, le store de langue, et pourquoi une clé en lecture seule est sûre dans le navigateur.