PixiJS Layout v3 is here! 🎉

Today we are releasing PixiJS Layout v3, a complete rebuild of the library from the ground up. This new version offers a powerful, web-standard way to manage layout inside PixiJS projects, powered by the Yoga layout engine.

More than just a rewrite, v3 represents a major leap forward: it brings true flexbox layout principles to the PixiJS ecosystem, opening up PixiJS to web developers who are used to CSS-style layouts. Whether you are creating a game UI, a dynamic canvas app, or a full interactive experience, you can now use the layout patterns you already know — flex-grow, justify-content, align-items, and more.

In addition, PixiJS Layout v3 integrates seamlessly with PixiJS React, enabling React developers to compose and manage PixiJS UIs with a familiar declarative workflow. Whether you are working in plain PixiJS or combining it with React, layout is now easier, more intuitive, and more powerful.

A Complete Rebuild for Web Developers

v3 is a ground-up rewrite, built on top of Yoga. This brings predictable, web-standard layout behavior to PixiJS for the first time. It allows you to think about your layouts in the same way you would for web development — flex containers, wrapped children, alignment, and spacing — without abandoning the performance and flexibility of PixiJS.

Why This Matters

• Web developers can now use familiar concepts like flex containers and flex items inside PixiJS without fighting the system.
• No learning curve for layout: If you know CSS Flexbox, you know how to structure your PixiJS scenes.
• React developers get even more power: PixiJS Layout v3 is fully integrated with PixiJS React, letting you declare layout directly inside JSX.

Key Features

Yoga-Powered Layout

Layout calculations are powered by Yoga, the same engine that powers layout for React Native, bringing tried and tested flexbox behavior to PixiJS.

Familiar properties like justifyContent, alignItems, flexDirection, and gap are now fully supported.

Opt-In by Design

PixiJS Layout v3 is opt-in by design. You can enable layout only on the objects that need it — Containers, Sprites, Graphics, Text, or even custom objects — without forcing a complete restructure of your project.

This flexibility allows you to use layout where it makes sense, while keeping the rest of your codebase clean and performant. It also means you can use layout in existing projects without needing to refactor everything.

const sprite = new Sprite({ texture, layout: true });

Or define layout inline when creating objects:

const container = new Container({
    layout: {
        width: 500,
        height: 300,
        justifyContent: 'center',
        alignContent: 'center',
        flexWrap: 'wrap',
    },
});

Design for React

PixiJS Layout v3 includes full integration with PixiJS React, enabling easy JSX usage:

<layoutContainer layout={{ flexDirection: 'row', gap: 10 }}>
    <layoutSprite texture={texture} layout={{ width: 100, height: 100 }} />
    <layoutSprite texture={texture} layout={{ width: 100, height: 100 }} />
</layoutContainer>

This allows React developers to compose layouts declaratively, just like building web UIs, but using the speed and flexibility of PixiJS under the hood.

Web-Style Features

We have added several web-style features to enhance layout capabilities:

• objectFit: Control how content scales inside containers (fill, contain, cover, none, scale-down).
• objectPosition: Fine-tune content alignment within layout bounds.
• Overflow scrolling: Enable overflow: scroll for any container.

Documentation Overhaul

We have completely rewritten the documentation. It now includes:

• Clear guides for getting started and best practices
• Detailed examples covering common use cases
• Improved explanations of layout behavior and PixiJS integration

The new documentation makes it easier than ever to get up and running.

Getting Started

Getting started with PixiJS Layout v3 is simple and due to the opt-in nature of the library, you can use it in any PixiJS project without needing to refactor your entire codebase.

Check out the Getting Started guide for a step-by-step introduction but here’s a quick overview:

Setup

Install PixiJS Layout v3:

pnpm add @pixi/layout
# or
yarn add @pixi/layout
# or
npm install @pixi/layout

Import the library early in your application:

import '@pixi/layout';

// ... initialize your app

Apply layout when and where you need it:

const container = new Container({
    layout: {
        width: 500,
        height: 300,
        justifyContent: 'center',
        alignContent: 'center',
        flexWrap: 'wrap',
    },
});

const sprite = new Sprite({ texture, layout: true });

container.addChild(sprite);

Conclusion

PixiJS Layout v3 brings web-standard flexbox to the world of 2D graphics.

If you are a web developer, you can now build PixiJS projects with the layout tools you already know. If you are a React developer, you can compose rich, high-performance UIs inside your canvas-based apps just like you would on the web.

Explore the new documentation, try it out in your projects, and let us know what you think. We are excited to see what you will build!

🌐 Stay Connected

Follow Zyie and PixiJS on social media for the latest updates. Join our vibrant community on Discord for real-time discussions and support.