Skip to content
webgpu-spritebatch

Installation

Install

Section titled “Install”
Terminal window
npm install webgpu-spritebatch

The package ships an ES module with full TypeScript declarations. There are no runtime dependencies.

For TypeScript projects, install the WebGPU type definitions as a dev dependency:

Terminal window
npm install -D @webgpu/types

Browser requirements

Section titled “Browser requirements”

WebGPU must be available in the browser. As of 2026:

BrowserVersion
Chrome113+
Edge113+
Firefox141+
SafariIn progress

You can check support at runtime:

if (!navigator.gpu) {
  console.error('WebGPU is not supported in this browser.')
}

Project setup

Section titled “Project setup”

Add a <canvas> element to your HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Sprite App</title>
  <style>
    html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
    canvas { display: block; width: 100%; height: 100%; }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

The library works with any bundler that supports ES modules (Vite, esbuild, webpack, etc.).

Next step

Section titled “Next step”

Head to Your First Sprite to draw something on screen.