BLIT386

A palette-first WebGPU retro engine for TypeScript, with an automatic Canvas 2D software fallback.

BLIT386 is a palette-first WebGPU retro engine for TypeScript, inspired by RetroBlit by Martin Cietwierkowski (@daafu). Primitives, sprites, and bitmap text all resolve color through a shared 256-entry indexed palette for pixel-perfect 2D rendering. WebGPU is the default backend; when it is unavailable the engine automatically falls back to a Canvas 2D software renderer.

Features

Palette-first indexed color

All rendering resolves through a shared 256-entry indexed palette for pixel-perfect, palette-swap-friendly output.

WebGPU with Canvas 2D fallback

WebGPU is the default backend; the engine silently falls back to a Canvas 2D software renderer when unavailable.

Sprites, primitives & bitmap text

Draw textured sprites, colored geometry, and bitmap-font glyphs through a single unified draw API.

Overlay HUD

A built-in debug HUD displays frame timing, palette state, and the active renderer backend at a keypress.

Palette effects

Cycle, fade, flash, and swap palette entries at runtime for classic retro visual effects.

Input: pointer, keyboard & gamepad

Unified input layer covering mouse, touch, pen, keyboard, and gamepad across all modern browsers.

Audio: buses, clips & synth

A full audio subsystem: a three-bus mixer, AudioClip loading and playback, and a procedural synth for zero-asset sound effects.

Quick start

The fastest way to begin is the scaffolder. It works with npm, pnpm, yarn, or bun and generates a ready-to-run Vite project with the engine installed, a starter game, and local docs:

npm create blit386@latest my-game

Prefer to wire it up by hand or add it to an existing project? Install the package and call bootstrap():

npm install blit386

import { , , , type IBTDemo,  } from 'blit386';

class  implements IBTDemo {
  async (): <boolean> {
    // paletteCreate() returns a palette; paletteSet() installs it.
    const  = .(16);

    .(1, new (32, 0, 128));
    .(2, new (255, 220, 90));

    .();

    return true;
  }

  (): void {}

  (): void {
    .(1);
    .(new (10, 10, 40, 24), 2);
  }
}

void ();