emulators-ui and js-dos bundles support adding on screen buttons. These buttons can be mapped to key events.

To enable buttons support, you need to add buttons section in jsdos.json. In that case js-dos will automatically configure buttons support.


You can directly create a button control like in Digger example.

Each button should conform following interface:

export type ActionType = "click" | "hold";
// hold - means track press/release events separately
export interface Button {
action: ActionType,
mapTo: number,
symbol?: string,
position: {
left?: 1 | 2,
top?: 1 | 2,
right?: 1 | 2,
bottom?: 1 | 2,

Each side of the screen can snap up to two buttons. For example:

  • { left: 1, top: 1 } - button will be placed to left-top corner
  • { left: 2, top: 1 } - button will be placed at the top and after previous button

For example, digger configuration is:

const buttons = [
action: "click",
mapTo: 88 /*KBD_x*/,
position: {
left: 1,
bottom: 1,
emulatorsUi.controls.button(layers, ci, buttons);

This snippet will add button "X" in the bottom of screen, when you press it keyboard event for key "x" will be generated.

All possible buttons

You can create up to 16 buttons per layer. Layout of all buttons:

all buttons

If you use default js-dos installation then button 13 will be created automatically. This button will be an options button that gives access to built-in functions (fullscreen, save-load, etc)

special button


Setting mapTo to KBD_NONE (keycode: 0) key has the same effect as not defining this virtual button at all.

Changing style

Currently you can change the size of buttons by passing scale in layersOptions.

const layers = emulatorsUi.dom.layers(document.getElementById("root"), { scale: 0.7 });

All buttons example



You can use Game Studio to easily configure gestures.