Introduction

@wonderlandlabs-pixi-ux is an attempt to make PixiJS feel more like building for the browser: drop-in components, predictable state, and structured layout/styling patterns. It is not a full-fledged UX toolkit but it has some fundamental building blocks for application development.

The goal is not to replace Pixi. The goal is to add a practical layer on top of it so teams can build larger UI systems with familiar conventions from web development:

• CSS-style definitions (style-tree) for reusable visual rules
• flexbox-like layout ideas (box) for composition and alignment
• state-driven interaction primitives (drag, resizer, window, toolbar, button)

In truth it began as an attempt to patch a system developed in Pixi that was demonstrating graphic artifacts because graphic elements were being modified outside of the ticker refresh cycle. The ticker-forest module was the first element of the system; others grew to prove the utility and ease the adaption of it as a holistic base to any visual manipulation.

Underlying Technology

At the rendering layer, this project uses PixiJS, a high-performance 2D toolkit built on WebGL (with modern GPU backends in newer versions). Pixi gives us fast scene graphs, textures, graphics, text rendering, and interaction primitives, but it intentionally stays low-level about UI patterns.

Pixi is an animation and rendering language similar to the deprecated Flash system or Canvas; it uses a canvas as a bridge but its underlying work is done in WebGL. Pixi.js is a seen describing language to make complex graphics - from graphs and charts to full blown video games - developable in the browser.

At the state layer, this project uses Forestry. Forestry provides structured stores, branch-based composition, and predictable mutation flows, which makes complex UI trees easier to reason about than ad hoc object graphs and event wiring.

Forestry is an enterprise grade store system comparable to the Redux Toolkit; it is synchronous, schema driven, branchable and testable class instances that supply Streaming data via RxJS to interested subscribers.

@wonderlandlabs-pixi-ux sits between those two layers. Packages such as ticker-forest connect Forestry state updates to Pixi's frame/ticker lifecycle so render work happens at the right time, while higher-level modules (box, button, toolbar, window) build browser-inspired conventions on top of that foundation.

How To Use This Site

• Use the Package Docs section in the left sidebar for all package pages.
• Open any package page for API usage and examples mirrored from the package README.

Package Set

Package	Version	Docs	GitHub
@wonderlandlabs-pixi-ux/box Tree-based layout engine for measurable areas, alignment, constraints, and BoxTree traversal.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/button Button store that composes BoxTree layout with StyleTree-driven visual states.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/caption Caption/speech/thought bubble rendering with configurable geometry and text styling.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/drag Drag interaction state controller that normalizes pointer-driven movement workflows.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/grid Zoom-aware Pixi grid rendering manager for infinite canvas and artboard use cases.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/resizer Interactive resize handles and rectangle mutation flow for Pixi containers.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/root-container Root container utilities for centered stage coordinates with zoom/pan behavior.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/style-tree Hierarchical style matching engine keyed by noun paths and state selectors.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/ticker-forest Forestry base class that schedules dirty-state resolve work on a Pixi ticker.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/toolbar Toolbar composition store for arranging and styling groups of buttons.	1.1.11	View Docs
@wonderlandlabs-pixi-ux/window Window manager and window store primitives with titlebar, drag, and resize support.	1.1.13	View Docs

This table is generated from packages/*/package.json via yarn workspace @wonderlandlabs-pixi-ux/docs sync:intro-package-table.

Cross Dependencies

• style-tree is used directly by box, button, caption, and window.
• box is used by caption, window, and button.
• drag and resizer are used by window.
• ticker-forest is used directly by box.
• button is used directly by toolbar.

Documentation Source

Most package pages are generated from source READMEs in /packages/*/README.md.