Chapter 1: Tooling for web games in 2026

I'd love to be able to recommend a fully dependency-free path to building web games, but right now without a bit of tooling it's significantly more difficult. So in this chapter we'll set up a simple, reusable starting point from which you can build just about any browser game. Our examples require Node.js with npm. (Alternatives like Bun and Deno also work.)

The bundler

Vite is a bundler. It takes the code from your many source files and assembles them into a single "bundle", hence the name. In 2026, bundlers also do a whole lot more. Vite will also...

• Transpile TypeScript source code into JavaScript that the browser can run.
• Run a local dev server with live reloading and hot module replacement.
• Generate source maps for debugging.
• Optimize assets for production builds.
• Allow you to import assets and optionally inline them directly into your bundled code. Images, sound effects, wasm files, and fonts are much easier to work with when using Vite.

Scaffold the project

Scaffold out a minimal app by running the following command:

npm create vite@latest

After naming your project in Vite's CLI, pick the "vanilla" and "TypeScript" options.

$ npm create vite@latest
│
◇  Project name:
│  asteroids
│
◇  Select a framework:
│  Vanilla
│
◇  Select a variant:
│  TypeScript
│
◇  Install with npm and start now?
│  No

Enter the project directory and install its dependencies:

cd asteroids
npm install

Your project should look roughly like:

Go ahead and delete everything in the src/ folder, then add a new placeholder main.ts for us to return to later. You can put whatever you want in there for now.

console.log("it works!");

Optional configuration tweaks

Update vite.config.ts

Install vite-plugin-image-optimizer [GitHub] and its peer dependencies sharp and svgo. The plugin will automatically compress any image assets added to your project source at build-time.

npm install vite-plugin-image-optimizer sharp svgo

Now create or edit vite.config.ts in your project root:

import { defineConfig } from "vite";

export default defineConfig({});

import { defineConfig } from "vite";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";

export default defineConfig({
  plugins: [ViteImageOptimizer()],
});

// draw a health bar above the character
function drawHealthBar(ctx, x, y, health) {
  const maxHealth = 100;
  const barWidth = 48;
  const barHeight = 6;
  const healthPercent = health / maxHealth;
  const width = barWidth * healthPercent;

  // dark background
  ctx.fillStyle = "#1e1e2e";
  ctx.fillRect(x, y - 12, barWidth, barHeight);

  // green when healthy, red when critical
  const isCritical = healthPercent < 0.3;
  ctx.fillStyle = isCritical ? "red" : "green";
  ctx.fillRect(x, y - 12, width, barHeight);
}

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

let currentHealth = 50;
let x = 0;
let y = 16;

drawHealthBar(ctx, x, y, currentHealth);

import { defineConfig } from "vite";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";

export default defineConfig({
  build: {
    sourcemap: true,
  },
  plugins: [ViteImageOptimizer()],
});

import { defineConfig } from "vite";

export default defineConfig({});

Start the dev server

First, start your local dev server so you can see changes live as you make them:

npm run dev

Then open the URL displayed in your terminal, which will probably be like http://localhost:5173. You'll just see a blank page for now. If you open the browser console, you should see the log you added in main.ts.

Add some starter code

Update main.ts

console.log("it works!");

console.log("it works!");

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

console.log("it works!");

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const bounds = canvas.getBoundingClientRect();

console.log("it works!");

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const bounds = canvas.getBoundingClientRect();

const ctx = canvas.getContext("2d")!;
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, bounds.width, bounds.height);

console.log("it works!");

You should now see a blue rectangle in the top-left corner, which is the canvas at its default size. Next, we'll expand it to fill the entire window.

Update index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" ... />
    <meta name="viewport" ... />
    <title>Your Game</title>
  </head>
  <body>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" ... />
    <meta name="viewport" ... />
    <title>Your Game</title>
    <style>
      canvas {
        position: fixed;
        inset: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" ... />
    <meta name="viewport" ... />
    <title>Your Game</title>
  </head>
  <body>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

If you see a full-page blue rectangle, you have successfully initialized all the tooling you'll need to get started building web games.

Finally, make sure everything builds successfully for production:

npm run build

Up next

We'll cover painting to the canvas using CanvasRenderingContext2D in chapter 2 →.