Um projeto. Quatro SDKs. Traduzidos em sincronia.

As mesmas frases renderizadas por langsys-js-react, langsys-js-vue, langsys-js-svelte — e pelo SDK base puro langsys-js-typescript, que todos eles encapsulam — lendo um único projeto Langsys compartilhado. Mude o idioma e veja todos os painéis serem atualizados ao mesmo tempo.

A mesma frase, três linguagens — o que muda é o código sob cada painel. Avance as mensagens para 1 e todos os bindings são renderizados novamente ao mesmo tempo. A frase é escrita de forma simples: o Langsys gera as formas plurais de cada idioma durante a tradução, então ninguém precisa escrever os ramos.

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

A ponte em cada painel: useSignal (React) · useSignal (Vue) · $store (Svelte — sem necessidade de adaptador) · signal.subscribe() (vanilla).

Escolha seu framework

Mesmo SDK base por baixo — cada página combina demonstrações ao vivo com os idiomatismos de uma única integração.

Novo no Langsys? Os conceitos explicam as ideias em que esta demonstração se baseia — a frase é a chave, o armazenamento de localidade e por que uma chave somente leitura é segura no navegador.