Kaplay Plugin UI

Nov 6, 2026 • Home • Edit

---

Kaplay Plugin UI adds UI game objects like buttons, modals, and tooltips to Kaplay.js games.

Motivation

KAPLAY doesn’t ship with built-in UI components. You can draw shapes and text, but interactive buttons, modal dialogs, and hover tooltips have to be hand-rolled. This plugin fills that gap with game object factories and a customizable theme.

Install

Install kaplay-plugin-ui:

npm install kaplay kaplay-plugin-ui

Usage

Import the plugin:

import kaplay from 'kaplay';
import { uiPlugin } from 'kaplay-plugin-ui';

const k = kaplay({
  plugins: [uiPlugin],
});

Add a button:

k.addButton('Start', {
  pos: k.vec2(100, 100),
  onClick: () => {
    k.go('game');
  },
});

Add a modal:

k.addModal({
  title: 'Pause',
  text: 'Take a break?',
  actions: [
    { text: 'Resume' },
    { text: 'Quit', onClick: () => k.go('menu') },
  ],
});

Add a tooltip:

const button = k.addButton('Settings');

k.addTooltip('Open settings', {
  target: button,
  placement: 'top',
});

Customize the theme:

k.setTheme({
  palette: {
    primary: k.rgb(80, 160, 255),
    text: k.rgb(255, 255, 255),
  },
  shape: {
    borderRadius: 8,
  },
});

Check out the source code on GitHub.