🌐 Web Game Engines & Libraries

WebGL (opens in a new tab), WebGL2 (opens in a new tab), and WebGPU (opens in a new tab) enable developers to create real-time 2D and 3D graphics in the browser. Writing raw WebGL or WebGPU code is tedious, so there are engines that abstract the complexity and do the heavy-lifting to provide more user-friendly APIs. This page presents the main JavaScript engines available.

Engines and libraries

Much like any ecosystem of developer tools, there are 2 approaches: the monolithic batteries-included framework approach (those would be the engines), or the modular assemble-independent-libraries-together approach. Some of them are installable as typical NPM dependencies, others come in the form of editors that can be downloaded or used in the browser. The main engines and libraries available as packages for JavaScript game development are:

• Stars
  NPM
  TS
  Maintained
• Three.js

  99k

  1M/w

  

  – 3D library
  99k1M/w
  
• PixiJS

  42k

  110k/w

  

  – 2D library (there is also Pixi3D (opens in a new tab))
  42k110k/w
  
• Phaser

  36k

  25k/w

  

  – 2D engine
  36k25k/w
  
• Babylon.js

  22k

  30k/w

  

  – 3D engine, WebGPU-ready
  22k30k/w
  
• PlayCanvas

  9k

  2k/w

  

  – (engine only) 3D engine, WebGPU-ready
  9k2k/w
  
• OGL

  4k

  15k/w

  

  – Minimal 3D library
  4k15k/w
  
• Orillusion

  4k

  150/w

  

  – WebGPU 3D engine in beta
  4k150/w
  
• Kaboom

  3k

  2k/w

  

  – Simple 2D engine
  3k2k/w
  
• Two.js

  8k

  5k/w

  

  – 2D library
  8k5k/w
  
• Excalibur

  2k

  2k/w

  

  – 2D engine
  2k2k/w
  

Compare on NPMTrends and Star History (requires a GH token)

About these numbers and colors

And many more engines and libraries (opens in a new tab).

UI library wrappers

You can use any of the previous libraries and engines on their own, but some of them can also be combined with UI libraries wrappers for React, Svelte, Vue, or Angular. This might seem surprising at first, but using these makes your code more declarative and conveniently abstracts some boilerplate. The main wrapper libraries are:

• Stars
  NPM
  TS
  Maintained
• React Three Fiber

  26k

  320k/w

  

  – Three.js with React
  26k320k/w
  
• Threlte

  2k

  4k/w

  

  – Three.js with Svelte
  2k4k/w
  
• TresJS

  2k

  3k/w

  

  – Three.js with Vue
  2k3k/w
  
• react-babylonjs

  800

  3k/w

  

  – Babylon.js with React
  8003k/w
  
• Pixi React

  2k

  9k/w

  

  – PixiJS with React
  2k9k/w
  
• Svelte Pixi

  100

  150/w

  

  – PixiJS with Svelte
  100150/w
  
  2 years
• Phavuer

  100

  30/w

  

  – Phaser with Vue
  10030/w
  
• react-ogl

  140

  30/w

  

  – OGL with React
  14030/w
  
  2 years

For instance, React Three Fiber (R3F), lets you add objects to a scene and control them as React components:

import { useRef, useState } from 'react'

import { Canvas, useFrame } from '@react-three/fiber'

const Box = (props) => {
  const ref = useRef(null)
  const [hovered, setHovered] = useState(false)
  const [clicked, setClicked] = useState(false)

  useFrame((_, dt) => {
    ref.current.rotation.x += dt
  })

  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={() => setClicked(!clicked)}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <boxGeometry />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

const App = () => (
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>
)

export default App

Downloadable/cloud editors

The following engines are available as downloadable or cloud-based editors and support JavaScript or TypeScript. Make sure to check their licensing and pricing models.

• Stars
  NPM
  TS
  Maintained
• PlayCanvas

  /w

  

  – 3D engine, freemium cloud editor, WebGPU-ready
  N/AN/A
  
• Cocos Creator

  5k

  /w

  

  – 2D and 3D engine, native editor and exports
  5kN/A
  
• Wonderland Engine

  /w

  

  – 3D engine, freemium, native editor
  N/AN/A
  
• Rogue Engine

  /w

  

  – 3D editor for Three.js
  N/AN/A
  
• Triplex

  /w

  

  – React Three Fiber editor that saves to source code
  N/AN/A
  
• Construct 3

  /w

  

  – Premium 2D engine with visual scripting
  N/AN/A
  
• GDevelop

  6k

  /w

  

  – Freemium 2D and 3D no-code platform
  6kN/A
  
• Needle

  900/w

  

  – Tools to export Unity and Blender scenes to Three.js
  N/A900/w
  
• Spline

  90k/w

  

  – Freemium collaborative web-based 3D modeling tool
  N/A90k/w
  
• Ethereal Engine

  /w

  

  – Full-stack solution for metaverse experiences
  N/AN/A
  

Going native with JavaScript

You also have a few options to write JavaScript code that compiles to native. Expo (opens in a new tab) is a framework for React Native (opens in a new tab), and they created Expo GL (opens in a new tab) and expo-three (opens in a new tab) to provide a Three.js interface for native OpenGL ES. And it can be used declaratively with React Three Fiber (opens in a new tab)! Babylon.js is working on a similar preview feature with Babylon Native (opens in a new tab) and Babylon React Native (opens in a new tab). There is also Cocos Creator (opens in a new tab), a native editor that can compile TypeScript to native.