Virtual touch keyboard

for the web, digital signage, kiosk apps, IOT, you name it!

Try it here

Usage

npm i @rbuljan/kioboard

Include this couple of lines in your entry file and you're good to go!

import "@rbuljan/kioboard/dist/kioboard.css";
import en from "@rbuljan/kioboard/dist/layouts/en.js";
import Kioboard from "@rbuljan/kioboard";

const kio = new Kioboard({
  layout: en,
  theme: "flat-dark",
});

Themes

We made some nifty responsive ones, crafted for visual feedback and legibility (A11Y)

code

Layouts

We provide several language layouts you can use right away, or mockup as a starting point for you own!

Contribute!

code

import en from "./src/layouts/en.js";
// or: "de", "fr", "hr", "es", "it"
kio.load(en);

Custom Layouts

Create your own!

code

const myLayout = {
  name: "custom",
  layers: {
    default: [
        "1 2 3 4",
        "shift a b enter",
        "smile space",
    ],
    shift: [
        "! ? . ,",
        "shift A B enter",
        "smile space",
    ],
    emoji: [
        "😀 🤓 🤭 😁",
        "🥰 🙂 😎 enter",
        "default space"
    ],
  },
  icons: {
    smile: "😀",
  },
  actions: {
    smile() { this.show("emoji"); },
  },
};

kio.load(myLayout).show();

Want to know more? Read the quick tutorial

Styling

Crucial to expose your brand, or your app's look and feel. Kioboard provides you with a .style() method to do just that.

Hue Alpha Radius Gap Size

code