A modern & fully featured HTML5 game engine

melonJS is an open-source 2.5D game engine for indie developers: perspective and orthogonal cameras, GPU-accelerated tilemap rendering, 3D mesh & glTF scenes, post-processing and custom shaders, and polygon-accurate physics. Runs on WebGPU, WebGL 2 or Canvas2D with automatic fallback. The whole engine is ~250 KB minzipped of vanilla JS/TS, with no dependencies and no toolchain lock-in.

Fast

Modern ES6 architecture. WebGPU and WebGL 2 renderers with Canvas fallback. Web Audio with 3D spatial sound.

Free

Released under the permissive MIT License. No cost. Forever.

Standalone

Zero dependencies. Compatible with all major browsers and mobile devices. ~250 KB minzipped, with no toolchain lock-in.

Why melonJS?

melonJS is designed so you can focus on making games, not on graphics plumbing.

Canvas2D-Inspired API

If you've used the HTML5 Canvas, you already know melonJS. The rendering API (save, restore, translate, rotate, setColor, fillRect, ...) follows the same familiar patterns. No render graphs, no shader pipelines, no instruction sets to learn.

WebGPU, WebGL 2 or Canvas2D

Write your game once, run it on any backend with zero code changes. The default AUTO mode tries WebGPU first, falls back to WebGL 2, and ultimately to Canvas, and the entire feature set renders identically on both GPU backends.

Complete Engine, Minimal Footprint

Physics, tilemaps, audio, input, cameras, tweens, particles, UI: a full game stack in a single ES module. No dependency sprawl, no library stitching.

Scenes, Loaded in One Call

level.load(name) brings an authored scene straight into your world. Tiled is a first-class citizen for 2D, and glTF / GLB is its equivalent for 3D: author in Blender, export a .glb, and the whole scene (meshes, materials, cameras, lights and node animation) loads under a Camera3d.

Batteries Included

Get started in minutes with minimal setup. Sprites, animations, 3D meshes with dynamic lighting and ground shadows, built-in & custom shaders, spatial audio and particle effects, ready to use out of the box.

Hackable by Design

ES6 classes throughout, a plugin system for engine extensions, and a clean architecture that's easy to extend without fighting the framework. Go as deep as you need.

Powerful Level Design

Design your levels visually with the Tiled map editor. melonJS natively supports orthogonal, isometric, and hexagonal maps with multiple layers, parallax scrolling, and more.

melonJS level design with Tiled map editor showing platformer game

Features

Fast WebGPU & WebGL 2 renderers across desktop and mobile, with automatic fallback to Canvas
GPU-accelerated tile rendering for orthogonal Tiled maps on both GPU backends: one quad per layer, no per-tile loop
Optional perspective camera (Camera3d) with frustum culling for 2.5D / 3D-projected scenes
3D mesh rendering with OBJ/MTL loading, multi-material support, and hardware depth testing
glTF / GLB 3D scenes loaded with a single level.load(): meshes, materials, cameras, lights and node animation, played through the same API as a 2D Sprite
3D lighting (Light3d directional, point, spot & ambient, up to 32 lights) with ground shadows on by default
Light2d as a first-class renderable: multi-light, radial-gradient falloff, illumination-only mode, normal-map sprite shading
Per-camera post-processing with stackable shader effects (Flash, Outline, Glow, CRT, Hologram, ColorMatrix) and custom ShaderEffect per-sprite fragment effects (GLSL and/or WGSL)
Physics: polygon SAT collision, QuadTree/Octree broad-phase (auto-swapped 2D↔3D), 2D & 3D raycasts, plus pluggable adapters (Matter / Planck)
Full Tiled map editor integration, with every feature supported (any map format, animated tilesets, custom properties, parallax layers, native .aseprite tilesets)
Web Audio with 3D spatial sound, stereo panning, and procedural audio primitives (oscillators, noise) for SFX without sample assets
Multi-input: mouse, touch, keyboard, gamepad & accelerometer
UI toolkit with drag-and-drop, hover/press buttons, and bitmap-font text
Tweens, transitions & particle effects
Spine 4.3 runtime integration via the official plugin
State manager, asset loader & plugin system
~250 KB minzipped, zero dependencies

Try it Live

Jump right into a melonJS game, playable in your browser.

Get Started in Seconds

Scaffold a new project with a single command:

npm create melonjs@latest my-game
cd my-game
npm install
npm run dev

Or use the API directly for a quick Hello World:

import { Application, Text } from "melonjs";

// create a new melonJS application
const app = new Application(1218, 562, {
    parent: "screen",
    scale: "auto",
});

// initialize it (builds the renderer and appends the canvas)
await app.init();

// add a text display object
app.world.addChild(new Text(609, 281, {
    font: "Arial",
    size: 160,
    fillStyle: "#FFFFFF",
    textBaseline: "middle",
    textAlign: "center",
    text: "Hello World !",
}));

AI Skills

melonJS ships 23 skills that teach a coding agent the engine's conventions, and the mistakes that fail silently rather than erroring: a custom draw() that ignores this.pos, isKinematic blocking pointer events, draw order set after addChild.

Install them into whichever agent you use:

~/my-game

$ npx skills add https://github.com/melonjs/melonJS/tree/master/packages/melonjs/skills
•  Found 23 skills
•  Installing all 23 skills
•  77 agents
•  Installing to: Claude Code

$ claude
> Add a bouncing crate with SAT collision to my Tiled level.

One command, no config. The skills land in .agents/skills/, the shared location 77 agents read from, and the installer symlinks them into whatever else your editor expects, so nothing is placed by hand.

Claude Code

Takes them as a plugin instead, registering the same guidance as 23 routed skills.

/plugin marketplace add melonjs/melonJS

Codex, Cursor, Gemini CLI

Anything following the AGENTS.md convention reads it from your project root. Copy the one that ships with the package, or paste its sections into yours.

cp node_modules/melonjs/skills/AGENTS.md .

Pinned to your release

The command above installs from master. The copy matching the version you depend on ships in the npm package, one directory per subsystem.

node_modules/melonjs/skills/

Then just describe what you want, as above. The melonjs skill routes to the guide that fits, out of physics, tilemaps, sprites, 3D scenes, lighting, shaders, audio, input, UI, performance and the rest, so your agent reads the one or two that matter rather than everything.

Compatibility

Compatible with all major browsers and mobile devices.

The published bundle targets ES2022. A browser that does not support it cannot parse the file at all: loading fails with a syntax error and a blank screen, rather than breaking later when some feature runs.

To support older browsers, transpile melonJS together with your own code. See Supporting older browsers in the README.