keymanapp · ermshiperete · Jun 3, 2026
diff --git a/web/docs/engine/guide/examples/__auto-control.html b/web/docs/engine/guide/examples/__auto-control.html
@@ -1,20 +1,17 @@
+<!DOCTYPE html>
 <html>
 <head>
   <script src='https://s.keyman.com/kmw/engine/17.0.331/keymanweb.js'></script>
-  <script>var kmw = keyman;</script>
-
   <script>
-    window.addEventListener('load', function () {
-      keyman.init().then(function() {
-        keyman.addKeyboards({
-          id:'laokeys',
-          name:'Lao (Phonetic)',
-          languages:{
-            id:'lo',
-            name:'Lao'
-          },
-          filename:'./js/laokeys.js'
-        });
+    keyman.init().then(function() {
+      keyman.addKeyboards({
+        id:'laokeys',
+        name:'Lao (Phonetic)',
+        languages:{
+          id:'lo',
+          name:'Lao'
+        },
+        filename:'./js/laokeys.js'
       });
     });
   </script>
@@ -28,4 +25,4 @@ <h1>Automatic Mode Example</h1>
 
 <a href="automatic-control">Back to Document</a>
 </body>
-</html>
+</html>
diff --git a/web/docs/engine/guide/examples/__control-by-control.html b/web/docs/engine/guide/examples/__control-by-control.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
 <head>
 
@@ -8,28 +9,23 @@
 <script type='text/javascript' src='js/unified_loader.js'></script>
 
 <script type="text/javascript">
-  function SetupDocument() {
-    keyman.init({
-      root: './',  // Note - if drawing the latest version of KeymanWeb from the CDN, this will
-                   // default to the source folder on our servers.
-      ui: 'toggle',
-      resources: './'
-    }).then(function() {
-      // Load the keyboards of your choice here.
-      loadKeyboards();
-
-      /* Disable KeymanWeb interaction on the 'Email to' TEXT control */
-      keyman.disableControl(document.f.address);
-      /* Set the default keyboard for the 'Subject' TEXT control to 'off' (i.e. default browser keyboard) */
-      /* As KeymanWeb relies on the on-screen keyboard to change languages for touch-based devices, this will
-       * not work for them and will default to the first language added to KeymanWeb after initialization. */
-      keyman.setKeyboardForControl(document.f.subject, '', '');
-      /* Set the default keyboard for the 'Message body' TEXTAREA to the LaoKeys keyboard */
-      keyman.setKeyboardForControl(document.f.text, 'Keyboard_laokeys', 'lo');
-    });
-  }
-
-  window.addEventListener( 'load' , SetupDocument );
+  keyman.init({
+    root: './',  // Note - if drawing the latest version of KeymanWeb from the CDN, this will
+                  // default to the source folder on our servers.
+    ui: 'toggle',
+    resources: './'
+  }).then(async function() {
+    // Load the keyboards of your choice here.
+    await loadKeyboards();
+
+    // Disable KeymanWeb interaction on the 'Email to' TEXT control
+    keyman.disableControl(document.f.address);
+    // Set the default keyboard for the 'Subject' TEXT control to 'off' (i.e. default
+    // browser keyboard)
+    keyman.setKeyboardForControl(document.f.subject, '', '');
+    // Set the default keyboard for the 'Message body' TEXTAREA to the LaoKeys keyboard
+    keyman.setKeyboardForControl(document.f.text, 'Keyboard_laokeys', 'lo');
+  });
 </script>
 </head>
 <body>

diff --git a/web/docs/engine/guide/examples/__first-example.html b/web/docs/engine/guide/examples/__first-example.html
@@ -6,15 +6,14 @@
 
   <!-- Start of Code -->
   <script src='https://s.keyman.com/kmw/engine/17.0.331/keymanweb.js'></script>
-  <script>var kmw = keyman;</script>
   <script src='https://s.keyman.com/kmw/engine/17.0.331/kmwuitoggle.js'></script>
   <script>
-    (function() {
-      keyman.init({attachType:'auto'}).then(function() {
-        keyman.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
-        keyman.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
-      });
-    })(keyman);
+    keyman.init({
+      attachType:'auto'
+    }).then(function() {
+      keyman.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
+      keyman.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
+    });
   </script>
 </head>
 <body>
@@ -23,4 +22,4 @@ <h1>First Example</h1>
 
 <a href="index">Back to Document</a>
 </body>
-</html>
+</html>
diff --git a/web/docs/engine/guide/examples/__full-manual-control.html b/web/docs/engine/guide/examples/__full-manual-control.html
@@ -1,45 +1,39 @@
+<!DOCTYPE html>
 <html>
 <head>
 
 <script src='https://s.keyman.com/kmw/engine/17.0.331/keymanweb.js'></script>
-<script>var kmw = keyman;</script>
 
 <script type='text/javascript' src='js/unified_loader.js'></script>
 <script type="text/javascript">
 
 var KWControl = null;
 
-function SetupDocument()
-{
-  keyman.init().then(function(){
-    // Load the keyboards of your choice here.
-    loadKeyboards();
-
-    KWControl = document.getElementById('KWControl');
-    var kbds = keyman.getKeyboards();
-    for(var kbd in kbds)
-    {
-      var opt = document.createElement('OPTION');
-      opt.value = kbds[kbd].InternalName + "$$" + kbds[kbd].LanguageCode;
-      opt.innerHTML = kbds[kbd].Name;
-      KWControl.appendChild(opt);
-    }
-    document.f.multilingual.focus();
-
-    keyman.setActiveKeyboard('', '');
-  });
-}
+keyman.init().then(async function() {
+  // Load the keyboards of your choice here.
+  await loadKeyboards();
+
+  KWControl = document.getElementById('KWControl');
+  var kbds = keyman.getKeyboards();
+  for(var kbd in kbds)
+  {
+    var opt = document.createElement('OPTION');
+    opt.value = kbds[kbd].InternalName + "$$" + kbds[kbd].LanguageCode;
+    opt.innerHTML = kbds[kbd].Name;
+    KWControl.appendChild(opt);
+  }
+  document.f.multilingual.focus();
 
-function KWControlChange()
-{
+  keyman.setActiveKeyboard('', '');
+});
+
+function KWControlChange() {
   var name = KWControl.value.substr(0, KWControl.value.indexOf("$$"));
   var languageCode = KWControl.value.substr(KWControl.value.indexOf("$$") + 2);
   keyman.setActiveKeyboard(name, languageCode);
   document.f.multilingual.focus();
 }
 
-window.addEventListener( 'load' , SetupDocument );
-
 </script>
 </head>
 <body>

diff --git a/web/docs/engine/guide/examples/__manual-control.html b/web/docs/engine/guide/examples/__manual-control.html
@@ -1,29 +1,23 @@
+<!DOCTYPE html>
 <html>
 <head>
   <script src='https://s.keyman.com/kmw/engine/17.0.331/keymanweb.js'></script>
-  <script>var kmw = keyman;</script>
 
   <script type='text/javascript' src='js/laokeys_load.js'></script>
 
   <script type="text/javascript">
-    function SetupDocument()
-    {
-      keyman.init().then(function() {
-        keyman.setActiveKeyboard('laokeys');
-        keyman.osk.hide();
-      });
-    }
+    keyman.init().then(function() {
+      keyman.setActiveKeyboard('laokeys');
+      keyman.osk.hide();
+    });
 
-    function KWControlClick()
-    {
+    function KWControlClick() {
       if(keyman.osk.isEnabled()) {
         keyman.osk.hide();
       } else {
         keyman.osk.show(true); // Specifies that the OSK should display whenever a valid control has focus, re-enabling the default behavior.
       }
     }
-
-    window.addEventListener('load', SetupDocument);
   </script>
 </head>
 <body>
@@ -38,4 +32,4 @@ <h1>Manual Mode Example</h1>
 <a href="manual-control">Back to Document</a>
 </form>
 </body>
-</html>
+</html>
diff --git a/web/docs/engine/guide/examples/automatic-control.md b/web/docs/engine/guide/examples/automatic-control.md
@@ -13,17 +13,15 @@ In this example, we use only the LaoKey keyboard. Please click [this link](./__a
   <!-- Start of Code -->
   <script src="js/keymanweb.js" type="text/javascript"></script>
   <script>
-    window.addEventListener('load', function () {
-      keyman.init().then(function() {
-        keyman.addKeyboards({
-          id:'laokeys',
-          name:'Lao (Phonetic)',
-          languages:{
-            id:'lo',
-            name:'Lao'
-          },
-          filename:'./js/laokeys.js'
-        });
+    keyman.init().then(function() {
+      keyman.addKeyboards({
+        id:'laokeys',
+        name:'Lao (Phonetic)',
+        languages:{
+          id:'lo',
+          name:'Lao'
+        },
+        filename:'./js/laokeys.js'
       });
     });
   </script>

diff --git a/web/docs/engine/guide/examples/control-by-control.md b/web/docs/engine/guide/examples/control-by-control.md
@@ -10,28 +10,23 @@ Include the following script in the HEAD of your page:
 
 ```js
 <script type="text/javascript">
-  function SetupDocument() {
-    keyman.init({
-      root: './',  // Note - if drawing the latest version of KeymanWeb from the CDN, this will
-                   // default to the source folder on our servers.
-      ui: 'toggle',
-      resources: './'
-    }).then(function() {
-      // Load the keyboards of your choice here.
-      loadKeyboards();
-
-      /* Disable KeymanWeb interaction on the 'Email to' TEXT control */
-      keyman.disableControl(document.f.address);
-      /* Set the default keyboard for the 'Subject' TEXT control to 'off' (i.e. default browser keyboard) */
-      /* As KeymanWeb relies on the on-screen keyboard to change languages for touch-based devices, this will
-       * not work for them and will default to the first language added to KeymanWeb after initialization. */
-      keyman.setKeyboardForControl(document.f.subject, '', '');
-      /* Set the default keyboard for the 'Message body' TEXTAREA to the LaoKeys keyboard */
-      keyman.setKeyboardForControl(document.f.text, 'Keyboard_laokeys', 'lo');
-    });
-  }
-
-  window.addEventListener( 'load' , SetupDocument );
+  keyman.init({
+    root: './',  // Note - if drawing the latest version of KeymanWeb from the CDN, this will
+                  // default to the source folder on our servers.
+    ui: 'toggle',
+    resources: './'
+  }).then(async function() {
+    // Load the keyboards of your choice here.
+    await loadKeyboards();
+
+    // Disable KeymanWeb interaction on the 'Email to' TEXT control
+    keyman.disableControl(document.f.address);
+    // Set the default keyboard for the 'Subject' TEXT control to 'off' (i.e. default
+    // browser keyboard)
+    keyman.setKeyboardForControl(document.f.subject, '', '');
+    // Set the default keyboard for the 'Message body' TEXTAREA to the LaoKeys keyboard
+    keyman.setKeyboardForControl(document.f.text, 'Keyboard_laokeys', 'lo');
+  });
 </script>
 ```
 
@@ -48,8 +43,9 @@ Also include the following HTML code:
 
 
 <!-- When the page has finished loading, advise KeymanWeb of control settings, see above -->
-<body onload="SetupDocument()">
+<body>
 ```
+
 ---
 **Note:** In this example we disabled the first element (`document.f.address`) by API call. A later API call can re-enable KeymanWeb for this control should it fit the page's design. Alternatively, this can be done by instead adding the class `'kmw-disabled'` to the control. This will permanently block KeymanWeb from handling its input.
 

diff --git a/web/docs/engine/guide/examples/full-manual-control.md b/web/docs/engine/guide/examples/full-manual-control.md
@@ -12,27 +12,23 @@ Include the following script in the HEAD of your page:
 <script>
   var KWControl = null;
 
-  /* SetupDocument: Called when the page finishes loading */
-  function SetupDocument()
-  {
-    keyman.init().then(function(){
-      // Load the keyboards of your choice here.
-      loadKeyboards();
-
-      KWControl = document.getElementById('KWControl');
-      var kbds = keyman.getKeyboards();
-      for(var kbd in kbds)
-      {
-        var opt = document.createElement('OPTION');
-        opt.value = kbds[kbd].InternalName + "$$" + kbds[kbd].LanguageCode;
-        opt.innerHTML = kbds[kbd].Name;
-        KWControl.appendChild(opt);
-      }
-      document.f.multilingual.focus();
-
-      keyman.setActiveKeyboard('', '');
-    });
-  }
+  keyman.init().then(async function() {
+    // Load the keyboards of your choice here.
+    await loadKeyboards();
+
+    KWControl = document.getElementById('KWControl');
+    var kbds = keyman.getKeyboards();
+    for(var kbd in kbds)
+    {
+      var opt = document.createElement('OPTION');
+      opt.value = kbds[kbd].InternalName + "$$" + kbds[kbd].LanguageCode;
+      opt.innerHTML = kbds[kbd].Name;
+      KWControl.appendChild(opt);
+    }
+    document.f.multilingual.focus();
+
+    keyman.setActiveKeyboard('', '');
+  });
 
   /* KWControlChange: Called when user selects an item in the KWControl SELECT */
   function KWControlChange()
@@ -59,7 +55,7 @@ Also include the following HTML code:
 </head>
 
 <!-- When the page has finished loading, populate the keyboard selector, see above -->
-<body onload="SetupDocument()">
+<body>
 ```
 
 - File: [unified_loader.js](js/unified_loader.js)

diff --git a/web/docs/engine/guide/examples/js/unified_loader.js b/web/docs/engine/guide/examples/js/unified_loader.js
@@ -1,16 +1,18 @@
-/*(C) Copyright 2021 SIL International. All Rights Reserved. Details: keymanweb.com*/
-function loadKeyboards() {
-    // Uses an older type of keyboard stub definition.
-    var KWK={
-        "devanagari_inscript":{KN:"Devanagari (INSCRIPT)", KLC:"hi", KL:"Hindi"},
-        "european2":{KN:"EuroLatin2", KLC:"en", KL:"English"},
-        "hebrew":{KN:"Hebrew", KLC:"he", KL:"Hebrew"},
-        "korean_korda":{KN:"Korean (KORDA) - 30 Day Evaluation", KLC:"ko", KL:"Korean"},
-        "korean_morse":{KN:"Korean (Morse) - 30 Day Evaluation", KLC:"ko", KL:"Korean"},
-        "laokeys":{KN:"Lao (Phonetic)", KLC:"lo", KL:"Lao"}
-    };
+/*
+ * Keyman is copyright (C) SIL Global. MIT License.
+ */
+async function loadKeyboards() {
+  const keyboardList = [
+    { id: 'devanagari_inscript', name: 'Devanagari (INSCRIPT)', languages: { id: 'hi', name: 'Hindi' }, filename: './js/devanagari_inscript.js' },
+    { id: 'european2', name: 'EuroLatin2', languages: { id: 'en', name: 'English' }, filename: './js/european2.js' },
+    { id: 'hebrew', name: 'Hebrew', languages: { id: 'he', name: 'Hebrew' }, filename: './js/hebrew.js' },
+    { id: 'korean_korda', name: 'Korean (KORDA)', languages: { id: 'ko', name: 'Korean' }, filename: './js/korean_korda.js' },
+    { id: 'korean_morse', name: 'Korean (Morse)', languages: { id: 'ko', name: 'Korean' }, filename: './js/korean_morse.js' },
+    // using a KeyboardStub would allow to customize e.g. which font the keyboard uses
+    { KF: "./js/laokeys.js", KI: "Keyboard_laokeys", KN: "Lao (Phonetic)", KL: "Lao", KLC: "lo" }
+  ];
 
-    for(var n in KWK) {
-        KeymanWeb.registerStub({KF:"./js/" + n+".js", KI:"Keyboard_"+n, KN:KWK[n].KN, KL:KWK[n].KL, KLC:KWK[n].KLC});
-    }
+  return keyman.addKeyboards(keyboardList).catch(function(err) {
+    console.error('keyman.addKeyboards failed with '+errToString(err)+' for '+JSON.stringify(keyboardList));
+  });
 }