# pixijs/pixijs

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/pixijs-pixijs).**

46,621 stars · 4,959 forks · TypeScript · mit

## Links

- GitHub: https://github.com/pixijs/pixijs
- Homepage: http://pixijs.com
- awesome-repositories: https://awesome-repositories.com/repository/pixijs-pixijs.md

## Topics

`canvas` `canvas2d` `data-visualization` `game` `glsl` `javascript` `pixi` `pixijs` `renderer` `rendering` `rendering-2d-graphics` `rendering-engine` `webgl`

## Description

PixiJS is a high-performance 2D rendering engine designed for building interactive visual content and browser-based games. It provides a hardware-accelerated graphics library that leverages WebGL and WebGPU backends to execute complex scenes, utilizing a hierarchical scene graph to manage object transformations and display order.

The project distinguishes itself through a sophisticated architecture that decouples rendering logic from hardware APIs, allowing for consistent performance across diverse browser environments. It features a robust, asynchronous asset pipeline that handles loading, caching, and resolution of media resources, alongside a reactive property system that ensures efficient updates within the scene graph. Developers can extend the engine's core functionality through a modular plugin system and custom environment adapters, enabling usage in non-standard contexts like server-side rendering or background web workers.

Beyond its core rendering capabilities, the engine includes a comprehensive suite of tools for interaction handling, visual effects, and performance optimization. It supports advanced features such as batch-based GPU rendering, automated culling, and container texture caching to minimize overhead in high-density scenes. The framework also provides built-in support for text rendering, skeletal animations, and declarative UI layouts, making it suitable for both data visualization and complex interactive interfaces.

The library is implemented in TypeScript and offers extensive documentation for its API, including support for custom build configurations to optimize final bundle sizes.

## Tags

### Graphics & Multimedia

- [2D Graphics Rendering](https://awesome-repositories.com/f/graphics-multimedia/2d-graphics-rendering.md) — Builds high-performance visual scenes and interactive animations using hardware-accelerated graphics backends.
- [2D Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/2d-rendering-engines.md) — Provides a high-performance 2D graphics engine using WebGL and WebGPU backends.
- [Batch-Based Rendering](https://awesome-repositories.com/f/graphics-multimedia/batch-based-rendering.md) — Minimizes GPU context switches by grouping draw calls based on shared textures and shader states.
- [Graphics Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-rendering-engines.md) — PixiJS renders the scene by walking the display list to batch draw calls, upload GPU resources, and issue commands using WebGL or WebGPU backends. ([source](https://pixijs.com/8.x/guides/concepts/render-loop.md))
- [Scene Graphs](https://awesome-repositories.com/f/graphics-multimedia/scene-graphs.md) — Organizes visual elements into a hierarchical tree to manage parent-child transformations and coordinate spaces.
- [Asynchronous Asset Pipelines](https://awesome-repositories.com/f/graphics-multimedia/asynchronous-asset-pipelines.md) — Manages the asynchronous loading, caching, and resolution of external media resources.
- [Graphics Abstractions](https://awesome-repositories.com/f/graphics-multimedia/graphics-abstractions.md) — Provides a unified interface that abstracts rendering logic across WebGL and WebGPU backends.
- [Interactive Graphics Libraries](https://awesome-repositories.com/f/graphics-multimedia/interactive-graphics-libraries.md) — Provides a complete toolkit for handling graphics, pointer events, and accessibility in canvas environments.
- [Scene Graph Management](https://awesome-repositories.com/f/graphics-multimedia/scene-graph-management.md) — Manages scene hierarchies by nesting renderable objects within containers to control display order. ([source](https://pixijs.com/8.x/guides/concepts/architecture.md))
- [Vector Drawing Primitives](https://awesome-repositories.com/f/graphics-multimedia/vector-drawing-primitives.md) — PixiJS renders various geometric shapes and SVG paths by chaining drawing commands to define lines, rectangles, circles, polygons, and complex curves. ([source](https://pixijs.com/8.x/guides/components/scene-objects/graphics.md))
- [Container Management](https://awesome-repositories.com/f/graphics-multimedia/container-management.md) — PixiJS manages child objects within a container by adding, removing, reordering, or reparenting them, while listening for lifecycle events. ([source](https://pixijs.com/8.x/guides/components/scene-objects/container.md))
- [Data Visualization Libraries](https://awesome-repositories.com/f/graphics-multimedia/data-visualization-libraries.md) — Enables efficient rendering of large datasets and complex geometry via GPU-accelerated drawing.
- [External Asset Loaders](https://awesome-repositories.com/f/graphics-multimedia/external-asset-loaders.md) — Facilitates asynchronous loading of external media files with automatic caching to prevent redundant requests. ([source](https://pixijs.com/8.x/guides/components/assets.md))
- [Geometry Management](https://awesome-repositories.com/f/graphics-multimedia/geometry-management.md) — PixiJS reuses shared geometry data across multiple display objects by defining drawing commands in a context object for efficient memory usage. ([source](https://pixijs.com/8.x/guides/components/scene-objects/graphics.md))
- [Graphics Pipelines](https://awesome-repositories.com/f/graphics-multimedia/graphics-pipelines.md) — Renders graphics using an automated selection of available backends for optimal performance. ([source](https://pixijs.com/8.x/guides/concepts/architecture.md))
- [Memory Management](https://awesome-repositories.com/f/graphics-multimedia/memory-management.md) — Provides methods to release GPU and browser memory by destroying textures when no longer needed. ([source](https://pixijs.com/8.x/guides/components/textures.md))
- [Rendering Optimization](https://awesome-repositories.com/f/graphics-multimedia/rendering-optimization.md) — PixiJS promotes containers to render groups to optimize the rendering performance of complex subtrees by grouping their draw calls. ([source](https://pixijs.com/8.x/guides/components/scene-objects/container.md))
- [Sprite Manipulation](https://awesome-repositories.com/f/graphics-multimedia/sprite-manipulation.md) — PixiJS resizes sprites using either percentage-based scaling or absolute pixel dimensions, which automatically adjust the underlying scale properties. ([source](https://pixijs.com/8.x/guides/components/scene-objects/sprite.md))
- [Texture Caching](https://awesome-repositories.com/f/graphics-multimedia/texture-caching.md) — PixiJS optimizes rendering performance by flattening complex containers into a single texture, reducing the overhead of processing individual child elements. ([source](https://pixijs.com/8.x/guides/components/scene-objects/container/cache-as-texture.md))
- [Texture Management Systems](https://awesome-repositories.com/f/graphics-multimedia/texture-management-systems.md) — PixiJS updates a sprite's texture to automatically rebind event listeners, recalculate dimensions, and trigger a visual refresh of the rendered object. ([source](https://pixijs.com/8.x/guides/components/scene-objects/sprite.md))
- [Update Loops](https://awesome-repositories.com/f/graphics-multimedia/update-loops.md) — Synchronizes frame-based logic and rendering updates using a centralized, priority-aware clock.
- [Asset Bundles](https://awesome-repositories.com/f/graphics-multimedia/asset-bundles.md) — Supports background loading of asset groups to ensure resources are available without blocking the main thread. ([source](https://pixijs.com/8.x/guides/components/assets/background-loader.md))
- [Compressed Textures](https://awesome-repositories.com/f/graphics-multimedia/compressed-textures.md) — Enables loading compressed textures with automatic selection of optimal transcoding paths based on hardware. ([source](https://pixijs.com/8.x/guides/components/assets/compressed-textures.md))
- [Object Transformations](https://awesome-repositories.com/f/graphics-multimedia/object-transformations.md) — PixiJS applies transformations like position, rotation, scale, and skew to scene objects, using pivot points or anchors to define the origin. ([source](https://pixijs.com/8.x/guides/components/scene-objects.md))
- [Rendering Optimizations](https://awesome-repositories.com/f/graphics-multimedia/rendering-optimizations.md) — Improves graphics performance by batching objects and converting complex graphics into textures. ([source](https://pixijs.com/8.x/guides/concepts/performance-tips.md))
- [Shader Filters](https://awesome-repositories.com/f/graphics-multimedia/shader-filters.md) — PixiJS defines custom visual effects by creating filter instances with custom shader programs and GPU resources, enabling unique rendering logic. ([source](https://pixijs.com/8.x/guides/components/filters.md))
- [Sprite Optimizations](https://awesome-repositories.com/f/graphics-multimedia/sprite-optimizations.md) — Minimizes texture swaps by using spritesheets and batching multiple textures together. ([source](https://pixijs.com/8.x/guides/concepts/performance-tips.md))
- [Ticker Lifecycle Controls](https://awesome-repositories.com/f/graphics-multimedia/ticker-lifecycle-controls.md) — Provides granular control over the render loop to pause or throttle animations based on application state. ([source](https://pixijs.com/8.x/guides/components/application/ticker-plugin.md))
- [Asset Caches](https://awesome-repositories.com/f/graphics-multimedia/asset-caches.md) — Enables efficient retrieval of loaded assets from an internal cache using URLs or aliases. ([source](https://pixijs.com/8.x/guides/components/assets.md))
- [Coordinate Space Transformations](https://awesome-repositories.com/f/graphics-multimedia/coordinate-space-transformations.md) — PixiJS converts object positions between local coordinate spaces relative to a parent and the global coordinate space of the application stage. ([source](https://pixijs.com/8.x/guides/concepts/scene-graph.md))
- [Culling Systems](https://awesome-repositories.com/f/graphics-multimedia/culling-systems.md) — Optimizes rendering performance by automatically skipping draw calls for objects outside the current view. ([source](https://pixijs.com/8.x/guides/components/application/culler-plugin.md))
- [Dynamic Text Rendering](https://awesome-repositories.com/f/graphics-multimedia/dynamic-text-rendering.md) — PixiJS updates the text content or styling properties at runtime to trigger a re-rasterization of the text object for dynamic display changes. ([source](https://pixijs.com/8.x/guides/components/scene-objects/text/canvas.md))
- [Graphics Styling Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-styling-engines.md) — PixiJS applies advanced fill styles to graphics objects, such as setting opacity levels, by passing a configuration object to the fill method. ([source](https://pixijs.com/8.x/guides/components/scene-objects/graphics/graphics-fill.md))
- [Particle Systems](https://awesome-repositories.com/f/graphics-multimedia/particle-systems.md) — PixiJS creates lightweight particle objects with essential display properties like position, scale, rotation, and tint for efficient rendering in high-density scenes. ([source](https://pixijs.com/8.x/guides/components/scene-objects/particle-container.md))
- [Rendering Layers](https://awesome-repositories.com/f/graphics-multimedia/rendering-layers.md) — PixiJS manages the visual draw order of objects independently of their logical scene hierarchy by attaching them to specific rendering layers. ([source](https://pixijs.com/8.x/guides/concepts/render-layers.md))
- [Resource Loading Strategies](https://awesome-repositories.com/f/graphics-multimedia/resource-loading-strategies.md) — Groups assets into bundles to enable lazy-loading and efficient resource management. ([source](https://pixijs.com/8.x/guides/components/assets/manifest.md))
- [Scene Optimizations](https://awesome-repositories.com/f/graphics-multimedia/scene-optimizations.md) — Optimizes rendering performance by grouping objects and configuring renderer settings like culling. ([source](https://pixijs.com/8.x/guides/concepts/performance-tips.md))
- [Tiling and Pattern Renderers](https://awesome-repositories.com/f/graphics-multimedia/tiling-and-pattern-renderers.md) — PixiJS renders a texture repeatedly across a defined area, controlling the pattern's offset, scale, and rotation independently of the object's own transform. ([source](https://pixijs.com/8.x/guides/components/scene-objects/tiling-sprite.md))
- [Visual Effects Toolkits](https://awesome-repositories.com/f/graphics-multimedia/visual-effects-toolkits.md) — Offers a modular suite for applying filters, masks, and custom shaders to rendered elements.
- [Visual Filtering](https://awesome-repositories.com/f/graphics-multimedia/visual-filtering.md) — Allows applying visual filters to scene objects to process multiple effects in sequence. ([source](https://pixijs.com/8.x/guides/getting-started/ecosystem.md))
- [Anti-Aliasing and Stroke Utilities](https://awesome-repositories.com/f/graphics-multimedia/anti-aliasing-and-stroke-utilities.md) — PixiJS renders lines that maintain a constant one-pixel thickness on screen regardless of object scaling or transformations, ensuring crisp visuals. ([source](https://pixijs.com/8.x/guides/components/scene-objects/graphics/graphics-pixel-line.md))
- [Asset Loading Configurations](https://awesome-repositories.com/f/graphics-multimedia/asset-loading-configurations.md) — Provides global configuration for base paths and manifest-based bundles to streamline resource management. ([source](https://pixijs.com/8.x/guides/components/assets.md))
- [Asset Pipelines](https://awesome-repositories.com/f/graphics-multimedia/asset-pipelines.md) — Supports build-time pipelines to generate and select compressed texture variants for target devices. ([source](https://pixijs.com/8.x/guides/components/assets/compressed-textures.md))
- [Bitmap Font Systems](https://awesome-repositories.com/f/graphics-multimedia/bitmap-font-systems.md) — PixiJS loads and displays bitmap fonts in standard or MSDF/SDF formats to achieve crisp, resolution-independent text scaling across various display sizes. ([source](https://pixijs.com/8.x/guides/components/scene-objects/text/bitmap.md))
- [Geometry Manipulation](https://awesome-repositories.com/f/graphics-multimedia/geometry-manipulation.md) — PixiJS calculates the local or global bounding box of scene objects and adjusts their dimensions efficiently using combined size setting methods. ([source](https://pixijs.com/8.x/guides/components/scene-objects.md))
- [Geometry Systems](https://awesome-repositories.com/f/graphics-multimedia/geometry-systems.md) — PixiJS defines custom mesh shapes by specifying vertex positions, UV coordinates, and indices to control how textures map onto geometry for rendering. ([source](https://pixijs.com/8.x/guides/components/scene-objects/mesh.md))
- [Rendering Synchronization](https://awesome-repositories.com/f/graphics-multimedia/rendering-synchronization.md) — Synchronizes rendering loops by resetting renderer states to ensure smooth transitions. ([source](https://pixijs.com/8.x/guides/third-party/mixing-three-and-pixi.md))
- [Shape Drawing](https://awesome-repositories.com/f/graphics-multimedia/shape-drawing.md) — Provides methods for defining and rendering geometric shapes with custom fill and stroke styles. ([source](https://pixijs.com/8.x/guides/migrations/v8.md))
- [Skeletal Animation](https://awesome-repositories.com/f/graphics-multimedia/skeletal-animation.md) — Renders skeletal-based animations by importing professional animation data into the graphics pipeline. ([source](https://pixijs.com/8.x/guides/getting-started/ecosystem.md))
- [Sprite Scaling](https://awesome-repositories.com/f/graphics-multimedia/sprite-scaling.md) — PixiJS renders a texture using nine-slice scaling to preserve corner proportions while stretching center and edge regions to fit arbitrary dimensions. ([source](https://pixijs.com/8.x/guides/components/scene-objects/nine-slice-sprite.md))
- [Text Layout Engines](https://awesome-repositories.com/f/graphics-multimedia/text-layout-engines.md) — PixiJS generates nested display objects for lines, words, and characters from text strings to enable per-character animations and complex layout effects. ([source](https://pixijs.com/8.x/guides/components/scene-objects/text/split-text.md))
- [Texture Sources](https://awesome-repositories.com/f/graphics-multimedia/texture-sources.md) — Supports diverse input formats including images, videos, canvases, and raw buffers for rendering. ([source](https://pixijs.com/8.x/guides/components/textures.md))
- [Vector Graphics Rendering](https://awesome-repositories.com/f/graphics-multimedia/vector-graphics-rendering.md) — Renders SVGs as scalable graphics allowing for dynamic modifications and crisp scaling. ([source](https://pixijs.com/8.x/guides/components/assets/svg.md))
- [Visual Masking Systems](https://awesome-repositories.com/f/graphics-multimedia/visual-masking-systems.md) — PixiJS restricts the visible area of scene objects using graphics or sprites as masks, including support for inverse masking to hide content. ([source](https://pixijs.com/8.x/guides/components/scene-objects.md))

### Game Development

- [Game Engines](https://awesome-repositories.com/f/game-development/game-engines.md) — Provides a core framework for managing scene graphs, asset loading, and update loops for interactive games.

### Software Engineering & Architecture

- [Scene Graph Frameworks](https://awesome-repositories.com/f/software-engineering-architecture/scene-graph-frameworks.md) — Organizes visual elements into a hierarchical structure for efficient layout and transformation management.
- [Extension Systems](https://awesome-repositories.com/f/software-engineering-architecture/extension-systems.md) — Extends core functionality by registering modular components with a global registry. ([source](https://pixijs.com/8.x/guides/concepts/architecture.md))
- [Reactive Property Systems](https://awesome-repositories.com/f/software-engineering-architecture/reactive-property-systems.md) — Tracks object state changes to trigger efficient updates within the rendering pipeline.
- [Lifecycle Management](https://awesome-repositories.com/f/software-engineering-architecture/lifecycle-management.md) — Extends core functionality through modular hooks that integrate into initialization and destruction phases.
- [Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/plugin-architectures.md) — Enables modular extension of application functionality through lifecycle-aware plugin hooks. ([source](https://pixijs.com/8.x/guides/components/application.md))

### User Interface & Experience

- [Pointer Event Handlers](https://awesome-repositories.com/f/user-interface-experience/pointer-event-handlers.md) — Handles pointer-based input events including taps, moves, and clicks with bubbling support. ([source](https://pixijs.com/8.x/guides/components/events.md))
- [Interactive UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-frameworks.md) — Facilitates the creation of complex, responsive interfaces with precise pointer event handling.
- [Accessible Components](https://awesome-repositories.com/f/user-interface-experience/accessible-components.md) — Marks display objects as accessible to generate interactive overlays supporting keyboard focus and screen readers. ([source](https://pixijs.com/8.x/guides/components/accessibility.md))
- [Interaction Systems](https://awesome-repositories.com/f/user-interface-experience/interaction-systems.md) — Enables pointer-based interactions and keyboard accessibility for rendered graphical objects. ([source](https://pixijs.com/8.x/guides/concepts/architecture.md))
- [UI Components](https://awesome-repositories.com/f/user-interface-experience/ui-components.md) — Provides pre-built UI components like buttons and sliders for building interactive interfaces. ([source](https://pixijs.com/8.x/guides/getting-started/ecosystem.md))
- [Accessibility Configuration](https://awesome-repositories.com/f/user-interface-experience/accessibility-configuration.md) — Allows configuring accessibility behavior including keyboard activation and mouse interaction. ([source](https://pixijs.com/8.x/guides/components/accessibility.md))
- [Framework Bindings](https://awesome-repositories.com/f/user-interface-experience/framework-bindings.md) — PixiJS manages graphics components as declarative elements within a component-based user interface framework using official bindings. ([source](https://pixijs.com/8.x/guides/getting-started/ecosystem.md))
- [Hit Testing Systems](https://awesome-repositories.com/f/user-interface-experience/hit-testing-systems.md) — Enables custom hit area definitions for precise interaction detection beyond simple bounding boxes. ([source](https://pixijs.com/8.x/guides/components/events.md))
- [Layout Engines](https://awesome-repositories.com/f/user-interface-experience/layout-engines.md) — Applies flexbox-style layout rules to display objects to control positioning and alignment. ([source](https://pixijs.com/8.x/guides/getting-started/ecosystem.md))

### Data & Databases

- [Asset Management](https://awesome-repositories.com/f/data-databases/asset-management.md) — Streamlines the loading, caching, and optimization of diverse media assets across different hardware environments.

### Development Tools & Productivity

- [Asset Loaders](https://awesome-repositories.com/f/development-tools-productivity/asset-loaders.md) — Implements a comprehensive pipeline for loading and caching external media resources.
- [Build Optimization](https://awesome-repositories.com/f/development-tools-productivity/build-optimization.md) — Supports custom builds by manually importing renderer extensions to optimize bundle size. ([source](https://pixijs.com/8.x/guides/migrations/v8.md))

### Programming Languages & Runtimes

- [Parallel Rendering](https://awesome-repositories.com/f/programming-languages-runtimes/parallel-rendering.md) — Offloads rendering tasks to parallel execution threads using offscreen canvas adapters. ([source](https://pixijs.com/8.x/guides/concepts/environments.md))
- [Environment Adapters](https://awesome-repositories.com/f/programming-languages-runtimes/environment-adapters.md) — Implements custom adapters to render in non-standard setups like server-side environments. ([source](https://pixijs.com/8.x/guides/concepts/environments.md))

### System Administration & Monitoring

- [Frame Rate Controllers](https://awesome-repositories.com/f/system-administration-monitoring/frame-rate-controllers.md) — Configures frame rates and delta time clamping to maintain consistent simulation speed. ([source](https://pixijs.com/8.x/guides/components/ticker.md))