Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time



Responsive controller framework for the web.

See it in Action

What is ControllerKit?

ControllerKit is a JavaScript library that makes adding controls to your website trivial. ControllerKit supports keyboard, touch, and gamepad inputs right off the bat, so all you have to do is bind and handle the controls.

Getting Started

First things first, let's install it. It's only available on the GitHub Package registry, so you'll need to set that up before you can install.

$ npm i @zenithdevs/controllerkit

Once installed, just import it and make a new instance of the ControllerKit class. The only argument the ControllerKit class takes is options, which is optional. See API to learn more.

import ControllerKit from "@zenithdevs/controllerkit";
const controls = new ControllerKit();

Now we can listen for inputs by binding the on "change" event handler and running the listen method.

controls.on("change", (controls) => console.log(controls));


ControllerKit was made to be simple and requires little to no configuration. The four lines in the Getting Started section may be all you need, but for those who want more customization there's more options here.

For starters, the options object in the ControllerKit constructor. Below is an example that has all the options passed, along with their default values.

new ControllerKit({
  touch: true, // Enable touch input
  keyboard: true, // Enable keyboard input
  gamepad: true, // Enable gamepad input
  deadZone: 0.5, // The deadzone for controller joysticks
  touchQuerySelector: "[data-ck-control]", // The query selector of touch button elements
  bindings, // The bindings object, covered in the "Binding" section


The valid configuration for the bindings object is:

type CKInputBindings = {
  [key in CKControl]: {
    keyboard?: number; // A keyCode to bind to.
    gamepadButton?: number; // The button on a controller to bind to.
    gamepadJoystick?: { axis: number; direction: -1 | 1 }; // The axis to bind to as well as the direction (positive 1 or negative 1).

The valid keys are as follows (as defined by the CKControl type):

type CKControl =
  | "start"
  | "select"
  | "special"
  | "a"
  | "b"
  | "x"
  | "y"
  | "up"
  | "down"
  | "left"
  | "right"
  | "l_trigger"
  | "l_shoulder"
  | "r_trigger"
  | "r_shoulder"
  | "analog_l_up"
  | "analog_l_down"
  | "analog_l_left"
  | "analog_l_right"
  | "analog_l_press"
  | "analog_r_up"
  | "analog_r_down"
  | "analog_r_left"
  | "analog_r_right"
  | "analog_r_press";

Event Listeners

There are currently three event listener types:

  • "change", passes an object with the input source and it's current state to the event listener.
  • "connected", passes a GamepadEvent to the event listener.
  • "disconnected", passes a GamepadEvent to the event listener.