KeymanWeb | Source Code and Development

KeymanWeb Source Code and Development

Note: Please see KeymanWeb 17.0 documentation for information on the latest version.

KeymanWeb 2.0 is an Open Source input method system for the web, supporting both desktops and touch devices. Keyboard layouts for use with KeymanWeb can be created with the free download Keyman Developer (Windows).

Add KeymanWeb (minified version) to a Website

KeymanWeb can be added to your website with just a few lines of code. The following example sources both the core engine and two keyboard layouts from the Keyman Cloud CDN; the code can be hosted on your own servers just as easily.

View code snippet versions:

<script src='https://s.keyman-staging.com/kmw/engine/2.0.473/keymanweb.js'></script>
<script src='https://s.keyman-staging.com/kmw/engine/2.0.473/kmwuitoggle.js'></script>
<script>
  (function(kmw) {
    kmw.init();
    kmw.addKeyboards('@eng'); // Loads default English keyboard from Keyman Cloud (CDN)
    kmw.addKeyboards('@tha'); // Loads default Thai keyboard from Keyman Cloud (CDN)
  })(tavultesoft.keymanweb);
</script>

<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwstring.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwbase.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/keymanweb.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwosk.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwnative.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwcallback.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwkeymaps.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwlayout.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwinit.js"></script>

<script src='https://s.keyman-staging.com/kmw/engine/2.0.473/src/ui/toggle/kmwuitoggle.js'></script>
<script>
  (function(kmw) {
    kmw.init();
    kmw.addKeyboards('@eng'); // Loads default English keyboard from Keyman Cloud (CDN)
    kmw.addKeyboards('@tha'); // Loads default Thai keyboard from Keyman Cloud (CDN)
  })(tavultesoft.keymanweb);
</script>

<script src='https://s.keyman-staging.com/kmw/engine/2.0.473/keymanweb.js'></script>
<script src='https://s.keyman-staging.com/kmw/engine/2.0.473/kmwuitoggle.js'></script>
<script>
  (function(kmw) {
    kmw.init();
    kmw.addKeyboards('@eng'); // Loads default English keyboard from Keyman Cloud (CDN)
    kmw.addKeyboards('@tha'); // Loads default Thai keyboard from Keyman Cloud (CDN)
  })(tavultesoft.keymanweb);
</script>

<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwstring.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwbase.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/keymanweb.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwosk.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwnative.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwcallback.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwkeymaps.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwlayout.js"></script>
<script src="https://s.keyman-staging.com/kmw/engine/2.0.473/src/kmwinit.js"></script>

<script src='https://s.keyman-staging.com/kmw/engine/2.0.473/src/ui/toggle/kmwuitoggle.js'></script>
<script>
  (function(kmw) {
    kmw.init();
    kmw.addKeyboards('@eng'); // Loads default English keyboard from Keyman Cloud (CDN)
    kmw.addKeyboards('@tha'); // Loads default Thai keyboard from Keyman Cloud (CDN)
  })(tavultesoft.keymanweb);
</script>

Try it!

KeymanWeb has multiple user interface designs to fit into any site. The sample above uses the Toggle User Interface for desktop browsers. Mobile browsers all integrate the language selection into the on screen keyboard.

Learn more about using KeymanWeb in the KeymanWeb documentation

Add custom keyboard to a Website

The following code snippet shows how you can include a custom keyboard on your website. The keyboard .js file can be created with Keyman Developer.


  <script>
    tavultesoft.keymanweb.addKeyboards({
      name: 'Tai Nua',
      id: 'tainua',
      filename: './tainua-1.0.js',
      version: '1.0',
      language: [{
        name: 'Tai Nua',
        id: 'tdd',
        region: 'as'
      }]
    });
  </script>

addKeyboards reference documentation

Use the Keyman Cloud CDN

The Keyman Cloud CDN is appropriate for smaller sites. HTTP and HTTPS endpoints are available. HTTPS is recommended.

HTTP endpoint:
HTTPS endpoint:

Get the code + Contribute

There are additional samples in the code repository. We prefer git pull requests for code submissions.

KeymanWeb on GitHub
Download KeymanWeb releases (alpha, beta and stable)

License

KeymanWeb is distributed under the MIT license.

Keyboards

Products

Downloads

Developer Tools

About

Help

Keyboards

Products

About

Developer