Using debuff without a build step

The runtime packages are plain ES modules with no dependencies, so any page can load them straight from a CDN with an import map. This suits prototypes, CodePen-style sketches, teaching and very small jam entries.

Pin an exact version in real projects.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="importmap">
      {
        "imports": {
          "@debuffjp/core": "https://cdn.jsdelivr.net/npm/@debuffjp/core@0.1/dist/index.js",
          "@debuffjp/input": "https://cdn.jsdelivr.net/npm/@debuffjp/input@0.1/dist/index.js",
          "@debuffjp/juice": "https://cdn.jsdelivr.net/npm/@debuffjp/juice@0.1/dist/index.js"
        }
      }
    </script>
    <style>
      html, body { margin: 0; height: 100%; background: #111; }
      main { position: fixed; inset: 0; display: grid; place-items: center; }
    </style>
  </head>
  <body>
    <main><canvas id="game"></canvas></main>
    <script type="module">
      import { Game } from "@debuffjp/core";
      import { Input } from "@debuffjp/input";

      const game = new Game({ canvas: document.querySelector("#game"), width: 320, height: 180 });
      const input = new Input(game, { bindings: { left: ["ArrowLeft"], right: ["ArrowRight"] } });
      let x = 160;

      game
        .add({
          id: "play",
          update(dt) {
            x += input.axis("left", "right") * 120 * dt;
          },
          render(draw) {
            draw.rect(x - 8, 120, 16, 16, "#cffb2d");
          },
        })
        .go("play");
      game.start();
    </script>
  </body>
</html>

What you give up

With the CLI	Without a build
Tree-shaking: you ship only what you import	Whole package modules are downloaded
Asset pipeline and manifest	Load assets yourself, or hand-write a manifest for @debuffjp/assets
Size report and dev-boundary check	None
debuff scenario tests and dev hooks	Not available
TypeScript	Plain JavaScript (types still help in editors via JSDoc)

When the prototype outgrows a single file, npm create debuff gives you the full toolchain with the same APIs.