Add multilingual support to existing _hyperscript projects. Write behaviors in Spanish, Japanese, Arabic, and 21 more languages — no migration required.
<!-- 1. Load _hyperscript -->
<script src="https://unpkg.com/hyperscript.org"></script>
<!-- 2. Load the multilingual plugin (Spanish) -->
<script src="https://unpkg.com/@lokascript/hyperscript-adapter@4.3.0/dist/hyperscript-i18n-es.global.js"></script>
<!-- 3. Write hyperscript in Spanish -->
<button _="on click alternar .active" data-lang="es">
Haz clic
</button>
The plugin patches _hyperscript at runtime — your existing English code continues to work unchanged.
Or install via npm:
npm install @lokascript/hyperscript-adapter
Each button below uses non-English _hyperscript with a data-lang attribute. The plugin translates the command to canonical _hyperscript before the runtime parses it.
The demo runs in an isolated frame loading the real hyperscript.org runtime plus the plugin — this page itself loads @hyperfixi/core's engine for its own docs tooling, and two engines processing the same attributes would conflict.
| Language | Word order | Snippet |
|---|---|---|
| Spanish ES | SVO | _="on click alternar .active" data-lang="es" |
| Japanese JA | SOV | _="on click .active を 切り替え" data-lang="ja" |
| Korean KO | SOV | _="on click .active 을 토글" data-lang="ko" |
| French — add FR | SVO | _="on click ajouter .highlight sur #frBox" data-lang="fr" |
| Spanish — put ES | SVO | _='on click poner "Hola desde _hyperscript!" en #pluginMsg' data-lang="es" |
| Spanish — remove ES | SVO | _="on click quitar .highlight de #rmBox" data-lang="es" |
| German — show / hide DE | SVO | _="on click verbergen #dePanel" data-lang="de"_="on click zeigen #dePanel" data-lang="de" |
| Arabic — put AR | VSO | _='on click ضع "مرحبا بالعالم!" في #arOut' data-lang="ar" |
| Portuguese — take PT | SVO | _="on click pegar .active de .pt-tab" data-lang="pt" |
| Chinese — put ZH | SVO | _="on click 放 '<div>新项目</div>' 到 #zhList" data-lang="zh" |
| Indonesian — send ID | SVO | _="on click kirim greet ke #idReceiver" data-lang="id" |
| Bundle | Size (gzipped) | Languages |
|---|---|---|
hyperscript-i18n-es.global.js |
119–126 KB | One language. 23 to choose from: ar bn de es fr he hi id it ja ko ms pl pt qu ru sw th tl tr uk vi zh |
hyperscript-i18n-western.global.js |
146 KB | Spanish, Portuguese, French, German |
hyperscript-i18n-east-asian.global.js |
143 KB | Japanese, Korean, Chinese |
hyperscript-i18n-slavic.global.js |
145 KB | Polish, Russian, Ukrainian |
hyperscript-i18n-south-asian.global.js |
134 KB | Bengali, Hindi |
hyperscript-i18n-southeast-asian.global.js |
140 KB | Indonesian, Malay, Thai, Tagalog, Vietnamese |
hyperscript-i18n.global.js |
260 KB | All 24 languages |
hyperscript-i18n-lite.global.js |
~2 KB | None (requires @lokascript/semantic loaded separately) |
Sizes are gzipped transfer size, measured against the published
@lokascript/hyperscript-adapter@4.3.0. A
single-language bundle is the cheapest way in; a regional bundle costs
far less than two single-language bundles would, so reach for one as soon
as you need two.
Most projects only need a single-language bundle.
For browser usage with <script> tags, the plugin auto-registers with sensible defaults — no configuration needed.
For Node.js or bundler projects, pass options to hyperscriptI18n():
import { hyperscriptI18n } from '@lokascript/hyperscript-adapter';
_hyperscript.use(
hyperscriptI18n({
// Set a default language for all elements
defaultLanguage: 'es',
// Enable console logging during development
debug: true,
// Tune confidence per language — SOV languages
// (ja, ko, tr) need lower thresholds
confidenceThreshold: {
es: 0.7,
ja: 0.1,
ko: 0.05,
'*': 0.5, // default for unlisted languages
},
})
);
See the API reference for the full options table.
_hyperscript in production