KAPLAY is a 2D game library for JavaScript and TypeScript, released under the MIT licence, that lets developers describe games as lists of composable components and try them immediately in a browser-based editor, the KAPLAYGROUND — it is aimed at both beginners learning game development and experienced developers who want a small library rather than a full engine.

What it is

KAPLAY is a JavaScript and TypeScript game library distributed as the kaplay package on npm and usable directly in the browser through a CDN script tag. Its model is component composition: a developer calls kaplay() once to start a game, then adds game objects by passing a list of components such as sprite(), rect(), pos(), area(), body() and health() to add(), attaching plain data objects and string tags alongside them. Behaviour is expressed imperatively through handlers such as player.onCollide("enemy", ...), onUpdate("enemy", ...) and onKeyDown("w", ...).

The concrete problem it solves is the hand-written plumbing that otherwise surrounds a small 2D game: the library supplies the game loop, asset loading through calls like loadSprite("bean", "https://play.kaplayjs.com/bean.png"), collision and physics responses, input handling and object lifecycle management through destroy(). It lives in the JavaScript and TypeScript ecosystem, so it slots into an existing front-end project rather than requiring a separate engine runtime; the README notes that a bundler such as Vite or ESBuild is needed when the library is installed through a package manager. A web-based editor, the KAPLAYGROUND, and more than 90 examples accompany it for learning and quick experiments.

Key capabilities

• Starting a game with configuration options, as in kaplay({ background: "#6d80fa" }).
• Building game objects from component lists, for example add([rect(40, 40), pos(100, 200), area(), body(), health(8)]).
• Attaching tags and plain data fields to objects so groups can be queried, as with onUpdate("enemy", (enemy) => { ... }).
• Collision callbacks supplied by the area() component, used through player.onCollide("enemy", ...).
• Sprite loading from a URL with loadSprite().
• Installation through npm, yarn, pnpm or bun, via a CDN script tag in the browser, or by scaffolding with npx create-kaplay.
• TypeScript support through import "kaplay/global" for global types, a tsconfig.json types entry pointing at ./node_modules/kaplay/dist/declaration/global.d.ts, or source types imported from kaplay, such as TextCompOpt.

Who uses it and how

• Beginners can write and run code instantly in the KAPLAYGROUND, using more than 90 examples as a starting point.
• Developers with an existing JavaScript or TypeScript front end can add the library to a project already built with Vite or ESBuild.
• Small browser-only projects can load the library from a CDN script tag without any build step at all.
• TypeScript teams can choose between global types for convenience and namespace-style imports from kaplay for stricter control.
• Finished games are collected on itch.io and Newgrounds, where the project maintains curated playlists of games made with the library.

Getting started

The fastest route is npx create-kaplay my-game, after which the project is available at http://localhost:5173 for editing in src/game.js. Alternatively, install the kaplay package with npm, yarn, pnpm or bun and pair it with a bundler such as Vite or ESBuild.

How it compares

The facts provided list no paid products that KAPLAY replaces, and the only other project named anywhere in them is Kaboom.js, which appears as the kaboom-js and kaboomjs topic tags. No comparable game library is described in this registry entry, so on the evidence given KAPLAY stands alone here.

When to use it — and when not to

KAPLAY runs in the browser, so a self-hoster operates no database, storage service or mail server — only static hosting for the built game — but installing it through a package manager does mean adding a bundler to the toolchain. Teams that do not work in JavaScript or TypeScript, or that want to avoid build tooling entirely, are better served elsewhere. The README itself cautions against relying on the global namespace when publishing a game rather than testing or learning, recommending explicit type configuration instead, and the repository currently carries 76 open issues.

// Start a game
kaplay({
    background: "#6d80fa",
});

// Load an image
loadSprite("bean", "https://play.kaplayjs.com/bean.png");

// Add a sprite to the scene
add([
    sprite("bean"), // it renders as a sprite
]);

// Add a Game Obj to the scene from a list of components
const player = add([
    rect(40, 40), // it renders as a rectangle
    pos(100, 200), // it has a position (coordinates)
    area(), // it has a collider
    body(), // it is a physical body which will respond to physics
    health(8), // it has 8 health points
    // Give it tags for easier group behaviors
    "friendly",
    // Give plain objects fields for associated data
    {
        dir: vec2(-1, 0),
        dead: false,
        speed: 240,
    },
]);

// .onCollide() comes from "area" component
player.onCollide("enemy", () => {
    // .hp comes from "health" component
    player.hp--;
});

// check fall death
player.onUpdate(() => {
    if (player.pos.y >= height()) {
        destroy(player);
    }
});

// All objects with tag "enemy" will move to the left
onUpdate("enemy", (enemy) => {
    enemy.move(-400, 0);
});

// move up 100 pixels per second every frame when "w" key is held down
onKeyDown("w", () => {
    player.move(0, 100);
});

npx create-kaplay my-game

npm install kaplay

yarn add kaplay

pnpm add kaplay

bun add kaplay

<script src="https://unpkg.com/kaplay@3001.0.12/dist/kaplay.js"></script>

import "kaplay/global";

vec2(10, 10); // typed!

{
  "compilerOptions": {
    "types": ["./node_modules/kaplay/dist/declaration/global.d.ts"]
  }
}

import type { TextCompOpt } from "kaplay"
import type * as KA from "kaplay" // if you prefer a namespace-like import

interface MyTextCompOpt extends KA.TextCompOpt {
  fallback: string;
}