Dasher on the Web

Dasher is a zooming text-entry interface, driven by continuous pointing gestures. This repo hosts a WebAssembly build of the native DasherCore C++ engine for in-browser use.

Positioning: this is a demo of the Dasher engine on the web, not a supported product. The same engine powers the desktop and mobile apps; for daily use, prefer those (see the downloads page).

Live demo: https://dasher-project.github.io/dasher-web/ — the lean, embeddable demo (this is what dasher.at iframes).

Enhanced playground: https://dasher-project.github.io/dasher-web/js-demo/ — the full feature tour:

• Settings dialog generated from the engine's C-API manifest — all 99 parameters, tabbed Input / Language / Output / Customization / Game Mode (+ Privacy), including every input filter (Stylus, Click Mode, Compass Mode, …)
• Locale picker — 33 locales from dasher-shared-resources
• Game mode — type the target phrase, live progress and WPM
• Typing rate — cps · wpm readout in the footer (RFC 0012, default on)
• Searchable 470+ alphabet catalogue — 20 bundled with training text; the rest lazy-load from the static catalogue and use fallback frequencies until you type
• 12 colour palettes + dark companions that follow the OS colour scheme (RFC 0007), node shapes, outline control
• Output-pane layouts (right / left / bottom / top), speech (speak-on-stop), clipboard actions, open/save text files
• Chrome follows the design guide: 64px toolbar, 48px status bar, Lucide icons, light/dark tokens

Quick Start

git clone --recurse-submodules https://github.com/dasher-project/dasher-web.git
cd dasher-web/wasm-build

# Build (requires Emscripten SDK + CMake + Ninja)
source /path/to/emsdk/emsdk_env.sh
bash build.sh        # or build.bat on Windows

# Serve the output with any static server
npx serve .
# Open http://localhost:3000/demo.html

See wasm-build/README.md for full build details, API docs, and architecture.

How It Works

The native DasherCore engine (C++) is compiled to WebAssembly via Emscripten. Data files (alphabets, colours, training text, localized strings) are preloaded into the WASM virtual filesystem. A JavaScript wrapper (dasher-wasm-wrapper.js) provides a clean API with canvas rendering, mouse/touch input, and parameter control.

Features include:

• Full DasherCore engine with PPM language model
• 10 trained languages (English, German, Spanish, French, Italian, Portuguese, Dutch, Polish, Russian, Arabic) — 19 alphabets
• Adjustable speed with auto-speed control
• Learning toggle for language model adaptation
• Mouse and touch input
• Canvas-based rendering

Repository Structure

wasm-build/               WASM build (source, scripts, demos)
  dashercore-src/         DasherCore C++ source (git submodule, branch main)
  data-bundle/            Curated data files for preloading (10 languages,
                          21 palettes incl. dark companions)
  alphabet-catalogue/     455 extra alphabet XMLs + index, fetched on demand
  strings/ui-strings.json Shared UI string catalogue (33 locales)
  demo.html               Lean embeddable demo (deployed at /)
  enhanced.html           Playground (deployed at /js-demo/)
  dasher-wasm-wrapper.js  JavaScript API wrapper
  build.sh / build.bat    Build scripts

Legacy pure-JS demo

Before the WASM build, this repo carried a complete pure-JavaScript Dasher demo (browser/) originally written by Jim Hawkins (ACE Centre-North, later VMware). It is preserved, with all its v0.2.0 enhancements (90 languages, script-generated alphabets, saved-language migration), on the legacy-js-demo tag:

git checkout legacy-js-demo        # browse or run the JS demo

Releases from v0.2.0 also carried it. It was retired from main in favour of the WASM DasherCore build — same engine as the desktop and mobile apps, no separate JS codebase to maintain. The JS demo is preserved but not actively developed or supported; the tag stands as the record of Jim's work.

Embedding in Your Site

The deployed demo is hosted at https://dasher-project.github.io/dasher-web/. You can link to it, embed it in an iframe, or self-host the files.

Option 1: Iframe

<iframe
  src="https://dasher-project.github.io/dasher-web/"
  width="800" height="600"
  style="border:1px solid #ddd; border-radius:8px;"
  allow="fullscreen"
></iframe>

Option 2: Self-hosted

Copy these files from a build (or from the GH Pages output) into your project:

dasher-wasm-wrapper.js
wasm/
  dasher.js
  dasher.wasm
  dasher.data

Then use the JavaScript API directly:

<canvas id="dasher" width="800" height="600"></canvas>

<script src="dasher-wasm-wrapper.js"></script>
<script type="module">
  const canvas = document.getElementById('dasher');
  const { default: createModule } = await import('./wasm/dasher.js');

  const dasher = new DasherWasm();
  await dasher.init({
    canvas,
    moduleFactory: createModule,
    onOutput: (eventType, text) => console.log('Output:', text),
  });

  dasher.createContext();
  dasher.setScreenSize(canvas.width, canvas.height);

  // Input
  canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    dasher.mouseMove(
      (e.clientX - rect.left) * (canvas.width / rect.width),
      (e.clientY - rect.top) * (canvas.height / rect.height)
    );
  });
  canvas.addEventListener('mousedown', () => dasher.mouseDown());
  canvas.addEventListener('mouseup', () => dasher.mouseUp());

  // Render loop
  function loop() {
    dasher.frame(performance.now());
    requestAnimationFrame(loop);
  }
  loop();
</script>

The wrapper also exposes parameter control:

// Switch alphabet
dasher.setAlphabet('English');

// Adjust speed (20-400%)
dasher.setSpeed(120);

// Toggle auto-speed / learning
dasher.setBoolParameter(dasher.findParameterKey('BP_AUTO_SPEEDCONTROL'), true);
dasher.setBoolParameter(dasher.findParameterKey('BP_LM_ADAPTIVE'), true);

License

MIT licensed. Copyright (c) dasher-project contributors.

Other Versions of Dasher

• DasherCore - C++ core engine
• Dasher (classic) - Original desktop version
• Dasher for iOS/Android - Mobile apps
• Dasher for Desktop - Electron wrapper