# Does Archify Support Multi-Language and Localization Features?

> Discover if Archify supports multi-language and localization. Archify's built-in i18n system provides multi-language UIs without external dependencies.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: how-to-guide
- Published: 2026-08-15

---

**Yes, Archify includes a built-in i18n (internationalization) system that enables multi-language user interfaces without external dependencies.**

All user-facing strings in the web UI are marked with `data-i18n` attributes and swapped at runtime using a lightweight JavaScript helper. You can switch languages by providing a different translation map, and the core architecture diagram generation remains unchanged regardless of locale.

## How Archify's Localization System Works

Archify implements **client-side internationalization** through a simple but effective pattern. The system relies on three components: annotated HTML elements, a runtime translation loop, and plain JavaScript object maps for each language.

### The `data-i18n` Attribute Pattern

Every user-visible string in the UI carries a translation key. Archify uses three variants to handle different insertion contexts:

- `data-i18n` — replaces `textContent`
- `data-i18n-html` — replaces `innerHTML` (for rich content)
- `data-i18n-placeholder` — sets input placeholder text

In [`scripts/guide-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/guide-template.html), the runtime logic iterates over these marked nodes and applies translations from the active language map:

```javascript
// Core translation loop from guide-template.html (around line 278)
document.querySelectorAll('[data-i18n]').forEach(node => {
  const key = node.dataset.i18n;
  node.textContent = translations[key] || key;
});

```

This approach keeps the HTML declarative and the JavaScript minimal. No build-step transformation or server-side rendering is required.

### Adding a New Language

To localize Archify to a new language, create a translation map and register it on the global `i18n` object:

```javascript
// locales/fr.js — French translation map
const FR_TRANSLATIONS = {
  versionLabel: "Guide de scénario / stable / v[[ARCHIFY_VERSION]]",
  navProof: "Laboratoire de preuves",
  recommend: "Recommander une recette →",
  // ... all keys matching data-i18n attributes
};

// Register with Archify's i18n system
window.i18n = {
  en: EN_TRANSLATIONS,
  zh: ZH_TRANSLATIONS,
  es: ES_TRANSLATIONS,
  fr: FR_TRANSLATIONS  // newly added
};

```

Switch languages at runtime by re-running the translation helper with the desired locale:

```javascript
function setLanguage(lang) {
  const t = (key) => window.i18n[lang]?.[key] || key;
  
  document.querySelectorAll('[data-i18n]')
    .forEach(n => n.textContent = t(n.dataset.i18n));
  
  document.querySelectorAll('[data-i18n-html]')
    .forEach(n => n.innerHTML = t(n.dataset.i18nHtml));
  
  document.querySelectorAll('[data-i18n-placeholder]')
    .forEach(n => n.placeholder = t(n.dataset.i18nPlaceholder));
}

// Activate French
setLanguage('fr');

```

## Key Files for Multi-Language Support

| File | Role in Localization |
|------|----------------------|
| [`scripts/guide-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/guide-template.html) | Contains the HTML UI with `data-i18n` attributes and the runtime translation loop |
| [`docs/index.html`](https://github.com/tt-a1i/archify/blob/main/docs/index.html) | Demonstrates i18n across landing page content and feature descriptions |
| [`archify/assets/template.html`](https://github.com/tt-a1i/archify/blob/main/archify/assets/template.html) | Core template for generated diagrams; includes i18n hooks for diagram UI elements |
| User-created locale files (e.g., [`locales/fr.js`](https://github.com/tt-a1i/archify/blob/main/locales/fr.js)) | Hold key-value translation pairs; can be bundled or loaded on-demand |

The static HTML+JS architecture means translation files can be embedded directly, fetched via `<script>` tags, or bundled at build time without modifying the diagram generation engine.

## Marking UI Elements for Translation

Any HTML element can participate in localization by adding the appropriate data attribute:

```html
<!-- Simple text replacement -->
<button class="primary" id="recommend" data-i18n="recommend">
  Recommend a recipe →
</button>

<!-- HTML content (preserves formatting) -->
<div class="description" data-i18n-html="welcomeMessage">
  Welcome to <strong>Archify</strong>
</div>

<!-- Input placeholder -->
<input type="text" data-i18n-placeholder="searchHint" placeholder="Search architectures...">

```

When `setLanguage('fr')` executes, these elements update to their French equivalents instantly.

## Architecture Diagrams and Localization

A critical design decision in Archify's multi-language support: **generated architecture diagrams are language-agnostic**. The same diagram structures render identically regardless of the active UI locale. Only the surrounding interface text adapts, ensuring:

- Consistent visual output across languages
- No duplication of diagram generation logic
- Smaller translation bundles (UI text only, not diagram data)

## Summary

- **Archify supports full localization** through a lightweight, dependency-free i18n system
- Translation uses `data-i18n`, `data-i18n-html`, and `data-i18n-placeholder` attributes scanned at runtime
- Language maps are plain JavaScript objects; add new locales by creating new maps
- Core implementation lives in [`scripts/guide-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/guide-template.html) around line 278
- Diagram generation is decoupled from UI language—visual output remains consistent

## Frequently Asked Questions

### What languages does Archify support out of the box?

Archify ships with English (`en`), Chinese (`zh`), and Spanish (`es`) translation maps based on the source code analysis. You can verify the exact bundled locales by checking the `window.i18n` object initialization in [`scripts/guide-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/guide-template.html) or examining any locale files in the repository.

### Does Archify require a build step to add translations?

No. Because Archify uses runtime DOM replacement rather than compile-time string extraction, you can add translations by simply loading a new JavaScript file containing your language map. The translation helper executes client-side, making it suitable for static hosting without build pipelines.

### Can I use JSON files instead of JavaScript objects for translations?

Yes. The system expects the `window.i18n` object to contain key-value mappings, but the source of those mappings is flexible. Load JSON via `fetch()` and assign to `window.i18n.fr = await response.json()`, or use `<script type="module">` imports. The core requirement is that the translation lookup—`window.i18n[lang][key]`—must resolve successfully.

### Does localization affect the generated architecture diagrams?

No. The diagram generation engine in Archify produces identical structural output regardless of UI language. Only interface elements marked with `data-i18n` attributes change. This separation ensures that sharing diagrams across language regions does not cause visual inconsistencies.