HTMLDrop.

PixiJS starter

PixiJS v8: fast 2D rendering with WebGL, sprites, and a ticker.

Open in editor Free. No install, no sign-up.
  • pixi.js

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PixiJS starter</title>
  </head>
  <body>
    <a href="https://pixijs.com" target="_blank" class="badge">PixiJS</a>
  </body>
</html>

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1099bb;
}
canvas {
  display: block;
}
.badge {
  position: fixed;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #e72264;
  color: white;
  font:
    800 16px system-ui,
    sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
}

import { Application, Assets, Container, Sprite } from "https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.mjs";

// The PixiJS getting-started demo: a spinning grid of bunnies.
const app = new Application();
await app.init({ background: "#1099bb", resizeTo: window });
document.body.prepend(app.canvas);

// Previews block Web Workers, so images are decoded on the main thread.
Assets.setPreferences({ preferWorkers: false });
const texture = await Assets.load("https://pixijs.com/assets/bunny.png");
const container = new Container();
app.stage.addChild(container);

for (let i = 0; i < 25; i++) {
  const bunny = new Sprite(texture);
  bunny.x = (i % 5) * 40;
  bunny.y = Math.floor(i / 5) * 40;
  container.addChild(bunny);
}

// Rotate the grid around its center.
container.pivot.set(container.width / 2, container.height / 2);
app.ticker.add((time) => {
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;
  container.rotation -= 0.01 * time.deltaTime;
});

Questions

Can I use PixiJS without a build step?

Yes. This starter loads PixiJS straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a PixiJS project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my PixiJS demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits