Internationalization (i18n)

Overview

DS one includes built-in internationalization support, making it easy to create multi-language applications without additional configuration.

Quick Start

Load Translations

<script type="module">
  import {
    loadTranslations,
    setLanguage,
  } from "https://cdn.jsdelivr.net/npm/ds-one@beta/dist/ds-one.bundle.js";

  // Define translations
  await loadTranslations({
    en: {
      welcome: "Welcome",
      greeting: "Hello",
    },
    es: {
      welcome: "Bienvenido",
      greeting: "Hola",
    },
  });

  // Set active language
  setLanguage("en");
</script>

Use in Components

<text-v1 variant="heading" data-key="welcome"></text-v1>
<text-v1 variant="body" data-key="greeting"></text-v1>

Language Switching

Create a language switcher:

<button-v1 onclick="changeLanguage('en')">English</button-v1>
<button-v1 onclick="changeLanguage('es')">Español</button-v1>

<script type="module">
  import { setLanguage } from "https://cdn.jsdelivr.net/npm/ds-one@beta/dist/ds-one.bundle.js";

  window.changeLanguage = (lang) => {
    setLanguage(lang);
  };
</script>

Loading from JSON

Load translations from external JSON files:

const response = await fetch("/translations.json");
const translations = await response.json();
await loadTranslations(translations);

RTL Support

DS one automatically handles right-to-left (RTL) languages:

setLanguage("ar"); // Arabic (RTL)
setLanguage("he"); // Hebrew (RTL)

Learn More

For detailed documentation, see the Advanced i18n Guide.