Un proyecto. Cuatro SDK. Traducidos en sincronía.

Las mismas frases renderizadas por langsys-js-react, langsys-js-vue, langsys-js-svelte —y por el SDK base en langsys-js-typescript puro que todos envuelven— leyendo un mismo proyecto de Langsys. Cambia la configuración regional y observa cómo se actualizan todos los paneles a la vez.

La misma frase, tres idiomas: lo que cambia es el código debajo de cada panel. Lleva los mensajes a 1 y todos los enlaces se vuelven a renderizar al mismo tiempo. La oración se escribe plana: Langsys genera las formas plurales de cada idioma durante la traducción, así que nadie escribe las ramas.

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

El puente en cada panel: useSignal (React) · useSignal (Vue) · $store (Svelte, no se necesita adaptador) · signal.subscribe() (vanilla).

Elige tu framework

El mismo SDK base por debajo: cada página combina demos en vivo con los modismos de un binding.

¿Eres nuevo en Langsys? Los conceptos explican las ideas en las que se basa esta demostración: la frase es la clave, el almacén de configuraciones regionales y por qué una clave de solo lectura es segura en el navegador.