Plugs into df$
Load it after defuss-shadcn and call df$.i18n. Without shadcn, defuss-query and defuss-morph provide the same runtime.
defussRuntime module · made for defuss-shadcn
Translate the page. Keep its state.
defuss-i18n is the localization module of the defuss runtime. Every translation is plain HTML in a <template> beside your markup, and a switch morphs only what a component owns and has rendered before: focus, typed input and state-related rendering like open dialogs stay exactly as they were.
<section id="welcome"> <h1>Translate the page.</h1> <button aria-label="Close">×</button></section><section id="welcome"><section id="welcome" data-i18n-component> <h1>Translate the page.</h1> <h1 data-i18n-target="title">Translate the page.</h1> <template data-i18n-for="title" data-i18n-locale="en">Translate the page.</template> <template data-i18n-for="title" data-i18n-locale="de">Seite übersetzen.</template> <button aria-label="Close">×</button> <button aria-label="Close" data-i18n-aria-label-de="Schließen">×</button></section>The translations live in the markup: one <template> per language, attributes as data-i18n-*. The cursor marks the line that is live right now.
Runtime module · made for defuss-shadcn
Runtime-Modul · gemacht für defuss-shadcn
Translate the page. Keep its state.
Seite übersetzen. State bleibt erhalten.
defuss-i18n is the localization module of the defuss runtime. Every translation is plain HTML in a <template> beside your markup, and a switch morphs only what a component owns and has rendered before: focus, typed input and state-related rendering like open dialogs stay exactly as they were.
defuss-i18n ist das Lokalisierungsmodul der defuss-Runtime. Jede Übersetzung ist schlichtes HTML in einem <template> neben deinem Markup, und ein Switch morpht nur, was eine Komponente managed und zuvor gerendert hat: Fokus, Eingaben und Zustand-bedingtes Rendering wie offene Dialoge bleiben genau so erhalten, wie sie zuvor waren.
Try the live demo
Live-Demo ausprobieren
Install
Installieren
Standard HTML
Standard-HTML
defuss-i18n HTML
defuss-i18n-HTML
The translations live in the markup: one <template> per language, attributes as data-i18n-*. The cursor marks the line that is live right now.
Die Übersetzungen stehen im Markup: ein <template> pro Sprache, Attribute als data-i18n-*. Der Cursor markiert die Zeile, die gerade gilt.
What it is
🧩 A localization module for the defuss runtime
defuss-i18n implements the df$.i18n API with no framework dependencies, no build step and no DOM reconciler.
HTML is the catalog
Each language is a <template> next to the default markup. The page reads without JavaScript, and a translation may change structure, not only words.
State survives a switch
Regions are morphed in place: elements, listeners, focus, text selection, typed input and open dialogs stay.
Native Intl
BCP 47 fallback chains such as de-AT → de → en, CLDR plural rules, and number and date formats from the browser, with no bundled locale data.
Attributes, too
Sixteen content attributes, from alt and aria-label to href and src, through data-i18n-{attribute}-{locale}.
Checked before it writes
validateI18n returns structured diagnostics for missing languages, overlapping regions and broken ID references.
Languages on demand
Ship one language and fetch the others with loadLocale. Only the newest request commits; a superseded one resolves as superseded.
Values stay text
Interpolated values are written as text, and value slots inside script, style or iframe are rejected before any write.
What it is
Was es ist
🧩 A localization module for the defuss runtime
🧩 Ein Lokalisierungsmodul für die defuss-Runtime
defuss-i18n implements the df$.i18n API with no framework dependencies, no build step and no DOM reconciler.
defuss-i18n implementiert die df$.i18n-API, ohne Framework-Abhängigkeiten, ohne Build-Step und ohne DOM-Reconciler.
Plugs into df$
Steckt in df$
Load it after defuss-shadcn and call df$.i18n. Without shadcn, defuss-query and defuss-morph provide the same runtime.
Nach defuss-shadcn laden und df$.i18n aufrufen. Ohne shadcn liefern defuss-query und defuss-morph dieselbe Runtime.
HTML is the catalog
HTML ist der Katalog
Each language is a <template> next to the default markup. The page reads without JavaScript, and a translation may change structure, not only words.
Jede Sprache ist ein <template> neben dem Standard-Markup. Die Seite ist ohne JavaScript lesbar, und eine Übersetzung darf auch die Struktur ändern, nicht nur Wörter.
State survives a switch
State überlebt den Switch
Regions are morphed in place: elements, listeners, focus, text selection, typed input and open dialogs stay.
Regionen werden in-place gemorpht: Elemente, Listener, Fokus, Textauswahl, Eingaben und offene Dialoge bleiben.
Native Intl
Natives Intl
BCP 47 fallback chains such as de-AT → de → en, CLDR plural rules, and number and date formats from the browser, with no bundled locale data.
BCP-47-Fallback-Ketten wie de-AT → de → en, CLDR-Pluralregeln sowie Zahlen- und Datumsformate aus dem Browser, ohne mitgelieferte Locale-Daten.
Attributes, too
Auch Attribute
Sixteen content attributes, from alt and aria-label to href and src, through data-i18n-{attribute}-{locale}.
Sechzehn Content-Attribute, von alt und aria-label bis href und src, über data-i18n-{attribute}-{locale}.
Checked before it writes
Geprüft, bevor es schreibt
validateI18n returns structured diagnostics for missing languages, overlapping regions and broken ID references.
validateI18n liefert strukturierte Diagnosen zu fehlenden Sprachen, überlappenden Regionen und kaputten ID-Referenzen.
Languages on demand
Sprachen bei Bedarf
Ship one language and fetch the others with loadLocale. Only the newest request commits; a superseded one resolves as superseded.
Shippe eine Sprache und lade die anderen mit loadLocale nach. Nur der neueste Request setzt sich durch; ein überholter endet als superseded.
Values stay text
Werte bleiben Text
Interpolated values are written as text, and value slots inside script, style or iframe are rejected before any write.
Interpolierte Werte werden als Text geschrieben, und Value-Slots in script, style oder iframe werden vor jedem Schreiben abgelehnt.
How it works
⚙️ One switch, four steps
A language switch is synchronous: when setLocale returns, every bound component shows the new language.
Author
Write the default language as plain HTML and mark the parts that change with
data-i18n-target. Each translation goes into a<template>beside it.Bind
bind(root, locale)captures the templates once and checks ownership: every region belongs to exactly one component.Select
setLocale('de')commits a frozen snapshot. Each binding picks one template per region through the fallback chain and plural rules, and fills values and attributes on detached copies.Morph
defuss-morph patches each live region through
df$. Matched elements stay,langanddirfollow, anddefuss-i18n:changefires.
How it works
So funktioniert’s
⚙️ One switch, four steps
⚙️ Ein Switch, vier Schritte
A language switch is synchronous: when
setLocale returns, every bound component shows the new language.
Ein Sprachwechsel ist synchron: Wenn setLocale zurückkehrt, zeigt jede gebundene Komponente die neue Sprache.
Author
Schreiben
Write the default language as plain HTML and mark the parts that change with data-i18n-target. Each translation goes into a <template> beside it.
Schreibe die Standardsprache als schlichtes HTML und markiere die veränderlichen Teile mit data-i18n-target. Jede Übersetzung kommt in ein <template> daneben.
Bind
Binden
bind(root, locale) captures the templates once and checks ownership: every region belongs to exactly one component.
bind(root, locale) erfasst die Templates einmal und prüft die Ownership: Jede Region gehört genau einer Komponente.
Select
Auswählen
setLocale('de') commits a frozen snapshot. Each binding picks one template per region through the fallback chain and plural rules, and fills values and attributes on detached copies.
setLocale('de') legt einen eingefrorenen Snapshot fest. Jedes Binding wählt pro Region ein Template über Fallback-Kette und Pluralregeln und füllt Werte und Attribute an losgelösten Kopien.
Morph
Morphen
defuss-morph patches each live region through df$. Matched elements stay, lang and dir follow, and defuss-i18n:change fires.
defuss-morph patcht jede Live-Region über df$. Gematchte Elemente bleiben, lang und dir ziehen mit, und defuss-i18n:change feuert.
Live demo
🔀 Switch the language, watch what stays
Every sentence on this page comes from a defuss-i18n template. The window below holds what usually breaks: typed input in an open dialog, plural forms, markup rendered from state and translated attributes.
Egg carton
Plural rulesIn the carton
1 egg
CLDR picks the plural form, Intl formats the number.
Egg carton
Eierkarton
Plural rules
Pluralregeln
In the carton
Im Karton
CLDR picks the plural form, Intl formats the number.
CLDR wählt die Pluralform, Intl formatiert die Zahl.
egg
eggs
Ei
Eier
Your settings
Native stateOpen the dialog, type a name, then switch the language inside it.
Your settings
Deine Einstellungen
Native state
Nativer State
Open the dialog, type a name, then switch the language inside it.
Öffne den Dialog, gib einen Namen ein und wechsle darin die Sprache.
Open settings
Einstellungen öffnen
Application state
State rendererrender() builds this markup from state, so the checkbox keeps its value through every switch.
Application state
Application-State
State renderer
State-Renderer
render() builds this markup from state, so the checkbox keeps its value through every switch.
render() baut dieses Markup aus dem State, darum behält die Checkbox ihren Wert bei jedem Switch.
Toggle checked state
Häkchen umschalten
Attributes
src · altThe image’s src and alt switch with the language, through data-i18n-src-de and data-i18n-alt-de.
Attributes
Attribute
The image’s
src and alt switch with the language, through data-i18n-src-de and data-i18n-alt-de.
src und alt des Bildes wechseln mit der Sprache, über data-i18n-src-de und data-i18n-alt-de.
Event log
One line per render, written by a defuss-i18n:change listener.
Live demo
Live-Demo
🔀 Switch the language, watch what stays
🔀 Sprache wechseln, sehen, was bleibt
Every sentence on this page comes from a defuss-i18n template. The window below holds what usually breaks: typed input in an open dialog, plural forms, markup rendered from state and translated attributes.
Jeder Satz auf dieser Seite stammt aus einem defuss-i18n-Template. Das Fenster unten zeigt, was sonst gern bricht: Eingaben in einem offenen Dialog, Pluralformen, Markup aus dem State und übersetzte Attribute.
Language
Sprache
Locale
Locale
Revision
Revision
Direction
Richtung
Fallback
Fallback
Event log
Event-Log
One line per render, written by a
defuss-i18n:change listener.
Eine Zeile pro Render, geschrieben von einem defuss-i18n:change-Listener.
6.2 kBgzip, minified browser build, peers excluded
16translatable content attributes
4builds: ESM, CommonJS, browser ESM, classic script
0runtime dependencies; defuss-query and defuss-morph are peers
gzip, minified browser build, peers excluded
gzip, minifizierter Browser-Build, ohne Peers
translatable content attributes
übersetzbare Content-Attribute
builds: ESM, CommonJS, browser ESM, classic script
Builds: ESM, CommonJS, Browser-ESM, klassisches Script
runtime dependencies; defuss-query and defuss-morph are peers
Runtime-Dependencies; defuss-query und defuss-morph sind Peers
kB
kB
Install
📦 Add it to a website
defuss-i18n works best with defuss-shadcn. From jsDelivr next to defuss-shadcn, from npm for a bundler, or with the two peers on their own.
By hand
Pick how the page loads its runtime, then copy the snippet.
index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/defuss-shadcn@0.9.8/dist/components/core.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/defuss-shadcn@0.9.8/dist/components/all.min.css"><script type="module" src="https://cdn.jsdelivr.net/npm/defuss-shadcn@0.9.8/dist/components/all.min.js"></script><script type="module" src="https://cdn.jsdelivr.net/npm/defuss-i18n@0.1.0/dist/all.min.js"></script><script type="module"> const locale = df$.i18n.createI18n({ locale: 'en', fallback: ['en'] }); for (const root of document.querySelectorAll('[data-i18n-component]')) df$.i18n.bind(root, locale); locale.setLocale('de'); // every bound component now shows German</script>bun add defuss-i18n defuss-query@^0.1.0 defuss-morph@^0.1.1app.js
import { createI18n, bindI18n } from 'defuss-i18n'; const locale = createI18n({ locale: 'de-DE', fallback: ['en'] });const welcome = bindI18n(document.getElementById('welcome'), locale);welcome.dispose(); // when the component leaves the pageindex.html
<script type="module"> await import('https://cdn.jsdelivr.net/npm/defuss-morph@0.1.1/dist/all.min.js'); await import('https://cdn.jsdelivr.net/npm/defuss-query@0.1.0/dist/all.min.js'); await import('https://cdn.jsdelivr.net/npm/defuss-i18n@0.1.0/dist/all.min.js');</script>Vibe coding
Paste this prompt into your coding agent. It links the repository, so the agent works from the current README and the authoring contract in documentation/component-skill.md.
Integrate defuss-i18n into this app: https://github.com/kyr0/defuss-i18nRead its README.md and documentation/component-skill.md first. Install it with bun add defuss-i18n defuss-query@^0.1.0 defuss-morph@^0.1.1, or load https://cdn.jsdelivr.net/npm/defuss-i18n@0.1.0/dist/all.min.js after the all.min.js of defuss-shadcn.Mark each translated component with data-i18n-component and the parts that change with data-i18n-target. Put one <template data-i18n-for data-i18n-locale> per language next to each part, never inside it, and translate attributes with data-i18n-{attribute}-{locale}.Create one controller with createI18n({ locale, fallback: ['en'] }), bind() every component, resolve every validateI18n diagnostic, pass dynamic values as text through data-i18n-value slots, and dispose() a binding when its component leaves the page.⏎ sendGive your agent the defuss-vae skills too: it then plans, tests and reviews against a verifier instead of declaring itself done. In Claude Code, the plugin adds the commit and Stop-hook gate. Needs python3 ≥ 3.9, git and make.
npx skills add kyr0/defuss-vae --skill '*'claude plugin marketplace add kyr0/defuss-vaeclaude plugin install defuss-vae@defuss-vae
Install
Installation
📦 Add it to a website
📦 Zu einer Website hinzufügen
defuss-i18n works best with defuss-shadcn. From jsDelivr next to defuss-shadcn, from npm for a bundler, or with the two peers on their own.
defuss-i18n funktioniert am besten mit defuss-shadcn. Über jsDelivr neben defuss-shadcn, über npm für einen Bundler oder nur mit den beiden Peers.
By hand
Von Hand
Pick how the page loads its runtime, then copy the snippet.
Wähle, wie die Seite ihre Runtime lädt, und kopiere das Snippet.
With defuss-shadcn
Mit defuss-shadcn
Without defuss-shadcn
Ohne defuss-shadcn
Vibe coding
Vibe Coding
Paste this prompt into your coding agent. It links the repository, so the agent works from the current README and the authoring contract in documentation/component-skill.md.
Füge diesen Prompt in deinen Coding-Agenten ein. Er verlinkt das Repository, damit der Agent mit der aktuellen README und dem Authoring-Contract in documentation/component-skill.md arbeitet.
Integrate defuss-i18n into this app: https://github.com/kyr0/defuss-i18n
Integriere defuss-i18n in diese App: https://github.com/kyr0/defuss-i18n
Read its README.md and documentation/component-skill.md first. Install it with bun add defuss-i18n defuss-query@^0.1.0 defuss-morph@^0.1.1, or load https://cdn.jsdelivr.net/npm/defuss-i18n@0.1.0/dist/all.min.js after the all.min.js of defuss-shadcn.
Lies zuerst README.md und documentation/component-skill.md. Installiere es mit bun add defuss-i18n defuss-query@^0.1.0 defuss-morph@^0.1.1 oder lade https://cdn.jsdelivr.net/npm/defuss-i18n@0.1.0/dist/all.min.js nach dem all.min.js von defuss-shadcn.
Mark each translated component with data-i18n-component and the parts that change with data-i18n-target. Put one <template data-i18n-for data-i18n-locale> per language next to each part, never inside it, and translate attributes with data-i18n-{attribute}-{locale}.
Markiere jede übersetzte Komponente mit data-i18n-component und die veränderlichen Teile mit data-i18n-target. Lege pro Sprache ein <template data-i18n-for data-i18n-locale> neben jeden Teil, nie hinein, und übersetze Attribute mit data-i18n-{attribute}-{locale}.
Create one controller with createI18n({ locale, fallback: ['en'] }), bind() every component, resolve every validateI18n diagnostic, pass dynamic values as text through data-i18n-value slots, and dispose() a binding when its component leaves the page.
Erzeuge einen Controller mit createI18n({ locale, fallback: ['en'] }), binde jede Komponente mit bind(), behebe jede validateI18n-Diagnose, übergib dynamische Werte als Text über data-i18n-value-Slots und rufe dispose() auf, wenn eine Komponente die Seite verlässt.
⏎ send
⏎ senden
Copy prompt
Prompt kopieren
Give your agent the defuss-vae skills too: it then plans, tests and reviews against a verifier instead of declaring itself done. In Claude Code, the plugin adds the commit and Stop-hook gate. Needs python3 ≥ 3.9, git and make.
Gib deinem Agenten auch die Skills von defuss-vae: Dann plant, testet und reviewt er gegen einen Verifier, statt sich selbst für fertig zu erklären. In Claude Code ergänzt das Plugin das Commit- und Stop-Hook-Gate. Benötigt python3 ≥ 3.9, git und make.
Any agent
Jeder Agent
Claude Code plugin
Claude-Code-Plugin
Stressed with inconsistent results and tiring reviews?
Build more consistent agents with defuss-vae, Aron Homberg’s Verified Agentic Engineering method. Aron is a freelance AI researcher, O’Reilly author (2011), conference speaker, and longtime mentor to software engineering teams.
Talk to Aron on LinkedIn
…if you’re looking for a remote training or mentoring session for you or your engineering team.
Stressed with inconsistent results and tiring reviews?
Gestresst von inkonsistenten Ergebnissen und ermüdenden Reviews?
Build more consistent agents with defuss-vae, Aron Homberg’s Verified Agentic Engineering method. Aron is a freelance AI researcher, O’Reilly author (2011), conference speaker, and longtime mentor to software engineering teams.
Baue konsistentere Agenten mit defuss-vae, Aron Hombergs Methode Verified Agentic Engineering. Aron ist freiberuflicher KI-Forscher, O’Reilly-Autor (2011), Konferenzsprecher und langjähriger Mentor für Software-Engineering-Teams.
Talk to Aron on LinkedIn
Mit Aron auf LinkedIn sprechen
…if you’re looking for a remote training or mentoring session for you or your engineering team.
…wenn du ein Remote-Training oder eine Mentoring-Session für dich oder dein Engineering-Team suchst.
Read the documentation
Guides to state and ownership, lazy loading and the security model, plus the full API and error reference.
MIT licensed · Source on GitHub
Read the documentation
Zur Dokumentation
Guides to state and ownership, lazy loading and the security model, plus the full API and error reference.
Leitfäden zu State und Ownership, Lazy Loading und Security-Modell sowie die vollständige API- und Fehlerreferenz.
Getting started
Erste Schritte
API reference
API-Referenz
MIT licensed · Source on GitHub
MIT-Lizenz · Quellcode auf GitHub