# @rbuljan/kioboard
> Virtual keyboard for digital signage kiosk touch screens
Latest version **1.4.10** (published 2026-03-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install @rbuljan/kioboard
pnpm add @rbuljan/kioboard
yarn add @rbuljan/kioboard
bun add @rbuljan/kioboard
```
## Health
**Score 50/100 (C)** — status: stable.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
## Facts
| | |
|---|---|
| Version | 1.4.10 |
| Published | 2026-03-02 |
| First published | 2024-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 66.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Roko C. Buljan |
| Maintainers | rbuljan |
| Keywords | javascript, virtual-keyboard, keyboard, touch, touchscreen, osk, on-screen-keyboard, digital-signage, kiosk, js |
## Links
- npm: https://www.npmjs.com/package/@rbuljan/kioboard
- Repository: https://github.com/rokobuljan/kioboard
- Homepage: https://github.com/rokobuljan/kioboard#readme
- Issues: https://github.com/rokobuljan/kioboard/issues
- npm.io page: https://npm.io/package/@rbuljan/kioboard
## Alternatives
- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads
## Recent versions
- 1.4.10 (latest) — 2026-03-02
- 1.4.9 — 2025-09-03
- 1.4.8 — 2025-09-03
- 1.4.7 — 2024-08-12
- 1.4.6 — 2024-08-05
- 1.4.5 — 2024-08-02
- 1.4.4 — 2024-08-01
- 1.4.3 — 2024-07-31
- 1.4.2 — 2024-07-31
- 1.4.1 — 2024-07-31
- 1.4.0 — 2024-07-29
- 1.3.0 — 2024-07-29
- 1.2.1 — 2024-07-28
- 1.2.0 — 2024-07-28
- 1.1.0 — 2024-07-27
- … 7 more at https://npm.io/package/@rbuljan/kioboard/versions
## README
# 
JavaScript **virtual on-screen keyboard** for digital signage kiosk touchscreens
- [**Kioboard homepage →**](https://rokobuljan.github.io/kioboard/)
- **[Quick Tutorial →](tutorial.md)**
- **[API docs →](api.md)**
## Features
- [x] Fully customizable layouts and layers
- [x] Fully customizable buttons actions
- [x] Fully customizable buttons icons (Unicode, SVG)
- [x] Themes: default, flat, glass. In light and dark mode
- [x] Language presets (contribute to the project!)
- [x] Shift + Caps-Lock
- [x] Close Kioboard button
- [x] Toggle or set initial visibility
- [x] Drag/move Kioboard handler
- [x] Different layouts per input groups
- [x] Long key press - repeat input
## Usage
Install package
```bash
npm i @rbuljan/kioboard
```
Import and instantiate
```js
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: "default-dark",
});
```
HTML
```html
```
## Options
Customization options example:
```js
const kio = new Kioboard({
parent: "body", // selector|Element
inputs: "[data-kioboard]", // selector|Element|Element[]|NodeList
input: null, // The curently active input Element
theme: "default", // "default|flat|glass"-"light|dark"
layout: {}, // Layout Object, or import en|de|es|fr|hr|it // Contribute for more!
layerName: "default", // Initial layer
shiftState: 0, // 0=off 1=on 2=capsLock // Necessary if showing the "shift" layer
isEnterSubmit: true, // submit form ( only)
isVisible: false, // Initial visibility
isPermanent: false, // Always visible
isScroll: true, // should input scrolIntoView()
isOSK: false, // show also default OS's on-screen keyboard
scrollOptions: { behavior: "smooth", block: "start", inline: "nearest" },
onInit() { /*initialized*/ },
onLoad() { /*layout loaded*/ },
onBeforeShow() { /*before show*/ },
onShow() { /*after show*/ },
onBeforeHide() { /*before hide*/ },
onHide() { /*after hide*/ },
onKeyDown(keyName) { /*after key press*/ },
onKeyUp(keyName) { /*after key release*/ },
});
```
## Methods
Having a Kioboard instance (like i.e: `kio`), you can then use its [methods](api.md)
```js
kio.load(layout, callback) // Load Layout object or .js layout file
kio.setLayout(layout) // Read layout data, attach keys actions, set default layer
kio.shift(state) // 0=off 1=on 2=caps-lock. Needed when using .show("shift") or .changeLayer("shift")
kio.show() // Show Kioboard
kio.show(layerName) // .changeLayer(layerName) and show Kioboard
kio.hide() // Kide Kioboard
kio.setActions(actions) // Set key actions for current layout. See: .on()
kio.setStyle(CSSVars) // Sets CSS Vars from object
kio.on(keys, callback) // Attach action callbacks to keys
kio.off(keys, callback) // Detach action callbacks from keys
kio.emit(keys) // Emit programmatically registered keys actions
kio.sequence(keys, speed, callback) // => fn() to stop sequencer
kio.clearKioboard() // Clear children elements (rows and buttons)
kio.draw() // Draw rows and buttons
kio.changeLayer(layerName) // Draw a specific layout's layer
kio.setTheme(themeName) // Change theme
kio.hasSelection() // true if input has selection
kio.insert(value, from, to) // insert a value at caret position of from-to index
kio.drag() // Attaches drag listeners to Kioboard element until pointerup
kio.init() // Initialize element and event listeners
kio.destroy() // Destroy element and listeners
```
Find out more about each method (with examples!) in the [API Docs](api.md)
## Feature requests / issues
Missing a feature? Have a suggestion? Found a bug?
[GitHub: rokobuljan/kioboard/issues →](https://github.com/rokobuljan/kioboard/issues)
## Licence
MIT
___
© 2024-present — Roko C. Buljan
---
_Source: https://npm.io/package/@rbuljan/kioboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
