Multilingual Plugin for _hyperscript

Add multilingual support to existing _hyperscript projects. Write behaviors in Spanish, Japanese, Arabic, and 21 more languages — no migration required.

Already using LokaScript? You don't need this plugin — multilingual support is built in. This page is for projects using the original _hyperscript.

Quick Start

<!-- 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@2/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

Live Demos

Each button uses non-English _hyperscript with a data-lang attribute. The plugin translates the command to canonical _hyperscript before the runtime parses it.

Spanish ES

SVO word order

_="on click alternar .active" data-lang="es"

Japanese JA

SOV word order

_="on click .active を 切り替え" data-lang="ja"

Korean KO

SOV word order

_="on click .active 을 토글" data-lang="ko"

French — Add FR

SVO word order

_="on click ajouter .highlight sur #frBox" data-lang="fr"
Box

Spanish — Put ES

SVO word order

_='on click poner "Hola desde _hyperscript!" en #pluginMsg' data-lang="es"
(message appears here)

Spanish — Remove ES

SVO word order

_="on click quitar .highlight de #rmBox" data-lang="es"
Box

German — Show / Hide DE

SVO word order

_="on click verbergen #dePanel" data-lang="de"
_="on click zeigen #dePanel" data-lang="de"
Ich bin sichtbar!

Arabic — Put AR

VSO word order

_='on click ضع "مرحبا بالعالم!" في #arOut' data-lang="ar"
(يظهر النص هنا)

Portuguese — Take PT

SVO word order

_="on click pegar .active de .pt-tab for me" data-lang="pt"

Chinese — Append ZH

SVO word order

_="on click 追加 '<div>新项目</div>' 到 #zhList" data-lang="zh"

Indonesian — Send ID

SVO word order

_="on click kirim greet ke #idReceiver" data-lang="id"
(pesan muncul di sini)

Choose a Bundle

Bundle Size Languages
hyperscript-i18n-es.global.js 85–101 KB Single language (es, ja, ko, zh, fr, de, pt, ar, tr, id)
hyperscript-i18n-western.global.js ~146 KB Spanish, Portuguese, French, German
hyperscript-i18n-east-asian.global.js ~146 KB Japanese, Korean, Chinese
hyperscript-i18n.global.js ~568 KB All 24 languages
hyperscript-i18n-lite.global.js ~2 KB None (requires @lokascript/semantic loaded separately)

Most projects only need a single-language bundle.

Configuration

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.

Plugin vs LokaScript

Use the Plugin When

  • You already have _hyperscript in production
  • You want to add one or a few languages
  • You prefer the original _hyperscript runtime
  • You need a drop-in addition with no migration

Use LokaScript When

  • You're starting a new project
  • You want tree-shakeable bundles (1.9KB–203KB)
  • You need the full 43-command set with native multilingual
  • You want the Vite plugin and build tooling