PixiJS 313,967 (pixijs/pixijs (https://github.com/pixijs/pixijs 48,232 ), MIT, about 48,200 stars, 8.21.0) is the most widely used GPU 2D renderer on the web: sprites, graphics, text and filters in a scene graph, batched into few draw calls. Version 8 rebuilt it around WebGPU. app.init({ preference: 'webgpu' }) asks for the WebGPU renderer and falls back to WebGL 2 when no adapter is available; the scene code is the same either way. The shelf below draws each BookNest cover as a container holding a vector shape and two text objects:
<script src="https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.min.js"></script>
<script type="module">
const app = new PIXI.Application();
await app.init({ preference: 'webgpu', width: 600, height: 180, background: '#ece8de',
antialias: true, resolution: 2, autoDensity: true }); // WebGL 2 if WebGPU fails
document.body.appendChild(app.canvas);
const books = [['The Quiet Harbor', '#1f5f8b', 14.99], ['Patterns of the Deep Web', '#5b3f99',
39.5], ['Salt and Saffron', '#e09a10', 24], ['Small Steps to Big Summits', '#3f7d3a', 18.75],
["The Clockmaker's Paradox", '#b5452f', 16.2], ['Gardens in Glass', '#2a9d8f', 21.3]];
const titleStyle = { fontFamily: 'Georgia', fontSize: 10, fontWeight: 'bold', fill: '#ffffff',
wordWrap: true, wordWrapWidth: 68 };
books.forEach(([title, color, price], i) => {
const cover = new PIXI.Container({ x: 60 + i * 97, y: 80, rotation: (i - 2.5) * 0.03 });
cover.addChild(new PIXI.Graphics() // one scene graph node per book
.roundRect(-43, -60, 86, 120, 6).fill(color)
.rect(-43, -54, 8, 108).fill({ color: 0x000000, alpha: 0.25 })); // spine shadow
cover.addChild(new PIXI.Text({ text: title, x: -32, y: -50, style: titleStyle }));
cover.addChild(new PIXI.Text({ text: `$${price.toFixed(2)}`, y: 66, anchor: { x: 0.5, y: 0 },
style: { fontFamily: 'Arial', fontSize: 13, fill: '#37474f' } }));
app.stage.addChild(cover);
});
app.render(); // draw now, not on the next tick
console.log(`PixiJS ${PIXI.VERSION}, renderer: ${app.renderer.name}`);
window.__done = true;
</script>
PixiJS 8.21.0, renderer: webgpu
Under the hood, text is rasterized with Canvas 2D into a texture, vector shapes are tessellated into triangles on the CPU, and the batcher packs everything that shares a texture set into one draw. Compared with Canvas 2D's Konva and Fabric.js 696,666 , PixiJS trades built-in editing tools (selection handles, serialization) for raw drawing speed: pick it for games, data-heavy 2D views and tens of thousands of sprites; pick Konva or Fabric for editors.