Matter.js
~82kb min / ~25kb gzMake objects fall, bounce, and collide with real physics in the browser.
See It in Action
Real physics in the browser — drag, throw, and smash objects that collide like they would in real life.
Boxes fall under gravity, bounce off walls, and pile up. Drag them with your mouse to toss them around.
What is Matter.js?
Matter.js is a 2D physics engine for the web. Drop a ball and it falls. Throw a box and it bounces off a wall. Stack blocks and knock them over. Matter.js handles gravity, collisions, and forces so you don't have to do the math yourself.
You give it shapes (boxes, circles, polygons), set properties like mass and bounciness, and it simulates realistic physics in real time. It includes a built-in renderer for quick prototyping, but you can also connect it to your own canvas or any rendering library.
Note: Matter.js is stable and widely used, but development has slowed — v0.20.0 (the latest release) came out in 2024 with no updates since. The 0.x version number reflects ongoing development, not instability. For projects that need active development or maximum performance, consider Rapier.
When to Use Matter.js
How Matter.js Compares
Matter.js is 2D, Cannon.js is 3D — pick based on your dimension needs. Both projects have slowed in development. The cannon-es fork is the maintained version of Cannon.js, though it too hasn't seen updates since 2022.
Rapier is a Rust/WASM physics engine that handles both 2D and 3D with much better performance. Use Matter.js for simpler projects where ease of setup matters; Rapier when you need speed or scale.
Planck.js is a JavaScript rewrite of Box2D — the physics engine used in many commercial games. Matter.js is easier to learn; Planck.js is familiar to developers who already know Box2D.
Get Started with Matter.js
npm install matter-jsyarn add matter-js<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/matter.min.js"></script>import Matter from "matter-js";
const { Engine, Render, Runner, Bodies, Composite } = Matter;
// Create engine and renderer
const engine = Engine.create();
const render = Render.create({
element: document.body,
engine: engine
});
// Add a falling box and a static ground
const box = Bodies.rectangle(400, 200, 80, 80);
const ground = Bodies.rectangle(400, 610, 810, 60, {
isStatic: true
});
// Composite.add is the modern way (World.add still works but is legacy)
Composite.add(engine.world, [box, ground]);
// Run the simulation
const runner = Runner.create();
Runner.run(runner, engine);
Render.run(render);