From c38d16ef3a1da6623234f86691325812cee4bbac Mon Sep 17 00:00:00 2001 From: creativoma Date: Fri, 15 Aug 2025 13:56:11 +0200 Subject: [PATCH 01/10] fix(docs-v7): update image source path for Pixi React logo --- docs/versioned_docs/version-7.x/about.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/versioned_docs/version-7.x/about.mdx b/docs/versioned_docs/version-7.x/about.mdx index eda8f21c..eb4dfcbd 100644 --- a/docs/versioned_docs/version-7.x/about.mdx +++ b/docs/versioned_docs/version-7.x/about.mdx @@ -13,7 +13,7 @@ import IndexFile from '!!raw-loader!./about'; Pixi React pixi-react From f9e2307b19bd86d872166837db7bd330d5e3f560 Mon Sep 17 00:00:00 2001 From: creativoma Date: Fri, 15 Aug 2025 13:57:14 +0200 Subject: [PATCH 02/10] fix(home): adjust margin-bottom for better layout spacing --- docs/src/pages/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 1d12737f..622d156d 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -40,6 +40,7 @@ export default function Home(): JSX.Element flexDirection: 'column', alignItems: 'center', marginTop: -60, + marginBottom: 60, }}>
Date: Fri, 15 Aug 2025 13:57:21 +0200 Subject: [PATCH 03/10] feat(docs): add DocSidebarItemWrapper component for enhanced sidebar functionality --- docs/src/theme/DocSidebarItem/index.tsx | 32 +++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 docs/src/theme/DocSidebarItem/index.tsx diff --git a/docs/src/theme/DocSidebarItem/index.tsx b/docs/src/theme/DocSidebarItem/index.tsx new file mode 100644 index 00000000..a17fb302 --- /dev/null +++ b/docs/src/theme/DocSidebarItem/index.tsx @@ -0,0 +1,32 @@ +import DocSidebarItem from '@theme-original/DocSidebarItem'; + +interface DocSidebarItemProps +{ + item: { + type: string; + href: string; + }; + level: number; + activePath: string; +} + +/** + * DocSidebarItemWrapper component + * @param {DocSidebarItemProps} props - The properties for the component. + * @returns {JSX.Element} The rendered component. + */ +export default function DocSidebarItemWrapper(props: DocSidebarItemProps): JSX.Element +{ + let color = props.item.type === 'category' && props.level === 1 ? 'var(--sidebar-category-color)' : 'grey'; + + if (props.activePath === props.item.href) + { + color = 'var(--ifm-color-primary)'; + } + + return ( + <> + + + ); +} From a01b5d0775740bec484306b659973d5e053d3a88 Mon Sep 17 00:00:00 2001 From: creativoma Date: Fri, 15 Aug 2025 13:57:27 +0200 Subject: [PATCH 04/10] feat(docs): add 'Guides' section to sidebar for improved navigation --- docs/docusaurus.config.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index c3155774..db9a476c 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -93,7 +93,15 @@ const config: Config = { sidebarId: 'docs', position: 'left', label: 'Docs', + items: [ + { + type: 'doc', + docId: 'getting-started/intro', + position: 'left', + label: 'Guides', + }] }, + { type: 'docsVersionDropdown', position: 'right', From 2b560b86af24bb00a8a30d95e3548a0fd6ed1826 Mon Sep 17 00:00:00 2001 From: creativoma Date: Fri, 15 Aug 2025 13:57:44 +0200 Subject: [PATCH 05/10] feat(docs): recreate Hooks category in YAML format for improved documentation structure --- docs/docs/hooks/_category_.json | 4 ---- docs/docs/hooks/_category_.yml | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 docs/docs/hooks/_category_.json create mode 100644 docs/docs/hooks/_category_.yml diff --git a/docs/docs/hooks/_category_.json b/docs/docs/hooks/_category_.json deleted file mode 100644 index 50802064..00000000 --- a/docs/docs/hooks/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Hooks", - "position": 3 -} diff --git a/docs/docs/hooks/_category_.yml b/docs/docs/hooks/_category_.yml new file mode 100644 index 00000000..0f01fe51 --- /dev/null +++ b/docs/docs/hooks/_category_.yml @@ -0,0 +1,4 @@ +label: Hooks +position: 2 +collapsed: true +collapsible: true From 6c7e1e7a3dd084fb74a25b68ff2b003fcac4fa08 Mon Sep 17 00:00:00 2001 From: creativoma Date: Fri, 15 Aug 2025 13:58:48 +0200 Subject: [PATCH 06/10] refactor(docs): move Extend and TypeScript guides to dedicated folders --- docs/docs/{ => extend}/extend.mdx | 4 +++- docs/docs/{ => typescript}/typescript.mdx | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) rename docs/docs/{ => extend}/extend.mdx (80%) rename docs/docs/{ => typescript}/typescript.mdx (92%) diff --git a/docs/docs/extend.mdx b/docs/docs/extend/extend.mdx similarity index 80% rename from docs/docs/extend.mdx rename to docs/docs/extend/extend.mdx index 7d4c6812..2d6494c7 100644 --- a/docs/docs/extend.mdx +++ b/docs/docs/extend/extend.mdx @@ -1,5 +1,7 @@ --- -sidebar_position: 4 +sidebar_position: 3 +title: Extend +description: Learn how to extend @pixi/react with custom PixiJS components and use the extend API to keep your bundle size small. --- One of the most important concepts to understand with v8 is `extend`. Normally `@pixi/react` would have to import all of Pixi.js to be able to provide the full library as JSX components. Instead, we use an internal catalogue of components populated by the `extend` API. This allows you to define exactly which parts of Pixi.js you want to import, keeping your bundle sizes small. diff --git a/docs/docs/typescript.mdx b/docs/docs/typescript/typescript.mdx similarity index 92% rename from docs/docs/typescript.mdx rename to docs/docs/typescript/typescript.mdx index 61d9dc6e..de738ad6 100644 --- a/docs/docs/typescript.mdx +++ b/docs/docs/typescript/typescript.mdx @@ -1,5 +1,7 @@ --- +sidebar_position: 4 title: Typescript +description: Explore how to use TypeScript with @pixi/react, including type definitions for built-in components and extending the library with custom components. --- ## Extending Built-in Components From 1ae889959b33cb19e9619e4dbe01da549f770955 Mon Sep 17 00:00:00 2001 From: creativoma Date: Fri, 15 Aug 2025 13:59:10 +0200 Subject: [PATCH 07/10] feat(docs): add Getting Started section with ecosystem, intro, and quick start guides --- docs/docs/getting-started/_category_.yml | 4 + docs/docs/getting-started/ecosystem.mdx | 274 ++++++++++++++++++ docs/docs/getting-started/intro.mdx | 97 +++++++ .../quick-start.mdx} | 9 +- 4 files changed, 380 insertions(+), 4 deletions(-) create mode 100644 docs/docs/getting-started/_category_.yml create mode 100644 docs/docs/getting-started/ecosystem.mdx create mode 100644 docs/docs/getting-started/intro.mdx rename docs/docs/{getting-started.mdx => getting-started/quick-start.mdx} (77%) diff --git a/docs/docs/getting-started/_category_.yml b/docs/docs/getting-started/_category_.yml new file mode 100644 index 00000000..325fb57b --- /dev/null +++ b/docs/docs/getting-started/_category_.yml @@ -0,0 +1,4 @@ +label: Getting Started +position: 0 +collapsed: false +collapsible: true diff --git a/docs/docs/getting-started/ecosystem.mdx b/docs/docs/getting-started/ecosystem.mdx new file mode 100644 index 00000000..a16f13d0 --- /dev/null +++ b/docs/docs/getting-started/ecosystem.mdx @@ -0,0 +1,274 @@ +--- +sidebar_position: 2 +title: Ecosystem +description: Explore the @pixi/react ecosystem, including React-specific tools, PixiJS integration, and community resources. +--- + +`@pixi/react` is designed to work seamlessly with both the React and PixiJS ecosystems. This integration allows you to leverage the best tools and libraries from both worlds to create powerful, interactive applications. + +## React Integration + +### React DevTools + +Since `@pixi/react` components are real React components, you can use [React DevTools](https://react.dev/learn/react-developer-tools) to inspect component hierarchies, props, and state just like any other React application. + +### State Management + +Use any React state management solution with `@pixi/react`: + +#### Redux Toolkit + +```jsx +import { useSelector, useDispatch } from 'react-redux' +import { Application, extend } from '@pixi/react' +import { Sprite } from 'pixi.js' + +extend({ Sprite }) + +function GameSprite() { + const player = useSelector(state => state.player) + const dispatch = useDispatch() + + return ( + + dispatch(movePlayer())} + /> + + ) +} +``` + +#### Zustand + +```jsx +import { usePlayerStore } from './store' + +function PlayerSprite() { + const { x, y, texture, move } = usePlayerStore() + + return ( + + ) +} +``` + +### Custom Hooks + +Create reusable game logic with React hooks: + +```jsx +import { useTick } from '@pixi/react' +import { useCallback, useMemo } from 'react' + +function useGameLoop(callback, enabled = true) { + const memoizedCallback = useCallback(callback, [callback]) + + useTick(memoizedCallback, { isEnabled: enabled }) +} + +function useCollision(sprite1, sprite2) { + return useMemo(() => { + // collision detection logic + return checkCollision(sprite1, sprite2) + }, [sprite1, sprite2]) +} +``` + +### Context Providers + +Share game state across components: + +```jsx +import { createContext, useState } from 'react' +import { Application } from '@pixi/react' + +const GameContext = createContext() + +function GameProvider({ children }) { + const [gameState, setGameState] = useState(initialState) + + return ( + + + {children} + + + ) +} +``` + +--- + +## PixiJS Integration + +Since `@pixi/react` is a thin wrapper around PixiJS, you can use any PixiJS features directly: + +### Filters + +Apply visual effects using PixiJS filters: + +```jsx +import { BlurFilter } from 'pixi.js' +import { useMemo } from 'react' + +function FilteredSprite() { + const filters = useMemo(() => [ + new BlurFilter(4) + ], []) + + return ( + + ) +} +``` + +### Custom Components with Third-Party Libraries + +Use the `extend` API to integrate third-party PixiJS libraries: + +#### [pixi-viewport](https://github.com/davidfig/pixi-viewport) + +Create interactive, zoomable viewports: + +```jsx +import { extend } from '@pixi/react' +import { Viewport } from 'pixi-viewport' + +extend({ Viewport }) + +function GameViewport() { + return ( + + + {/* Your game objects */} + + + ) +} +``` + +> **Note**: Third-party libraries compatibility may vary. Always test thoroughly and check library documentation for PixiJS v8 compatibility. + +--- + +## Development Tools + +### TypeScript Support + +`@pixi/react` provides full TypeScript support. For custom components, extend the type definitions: + +```typescript +// global.d.ts +import { PixiReactElementProps } from '@pixi/react' +import { Viewport } from 'pixi-viewport' + +declare module '@pixi/react' { + interface PixiElements { + viewport: PixiReactElementProps + } +} +``` + +### Testing + +Test your `@pixi/react` components with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/): + +```jsx +import { render } from '@testing-library/react' +import { Application } from '@pixi/react' +import MyGameComponent from './MyGameComponent' + +test('renders game component', () => { + render( + + + + ) + // Test your component logic +}) +``` + +### Storybook + +Document your graphics components with [Storybook](https://storybook.js.org/): + +```jsx +export default { + title: 'Game/PlayerSprite', + component: PlayerSprite, +} + +export const Default = () => ( + + + +) +``` + +--- + +## React Framework Integration + +### Next.js + +`@pixi/react` works seamlessly with Next.js. For server-side rendering, make sure to import PixiJS components dynamically: + +```jsx +import dynamic from 'next/dynamic' + +const GameComponent = dynamic( + () => import('../components/GameComponent'), + { ssr: false } +) + +export default function GamePage() { + return +} +``` + +### Create React App + +`@pixi/react` works out of the box with Create React App. Just install the dependencies and start building: + +```bash +npm install pixi.js@^8.2.6 @pixi/react +``` + +### Vite + +Perfect compatibility with Vite's fast development experience: + +```bash +npm create vite@latest my-pixi-app -- --template react +npm install pixi.js@^8.2.6 @pixi/react +``` + +--- + +## Community Resources + +- **[GitHub Repository](https://github.com/pixijs/pixi-react)** - Source code, issues, and discussions +- **[GitHub Discussions](https://github.com/pixijs/pixi-react/discussions)** - Ask questions and share ideas +- **[PixiJS Discord](https://discord.gg/QrnxmQUPGV)** - Get help from the community +- **[Examples](https://github.com/pixijs/pixi-react/tree/main/docs/src/examples)** - Browse code examples + +The combination of React's declarative component model with PixiJS's high-performance rendering provides everything you need to build incredible interactive experiences. diff --git a/docs/docs/getting-started/intro.mdx b/docs/docs/getting-started/intro.mdx new file mode 100644 index 00000000..ef78fda9 --- /dev/null +++ b/docs/docs/getting-started/intro.mdx @@ -0,0 +1,97 @@ +--- +title: Introduction +sidebar_position: 0 +hide_title: true +description: Overview of @pixi/react, its features, and what makes it the best way to write PixiJS applications in React. +--- + +
+ Logo +
+
+ + +
+ Simply the best way to write PixiJS applications in React +
+ + Write PixiJS applications using React declarative style 👌 + +
+ +## Features ⚡️ + +> `@pixi/react` is an open-source, production-ready library to render high performant PixiJS applications in React. + +- ⚛️ **React v19 Support** - Built for the latest React features +- 🏎️ **PixiJS v8 Compatible** - Latest PixiJS performance and features +- 📦 **Tree-shakeable** - Only import what you need with the `extend` API +- 🎯 **Type-safe** - Full TypeScript support with intelligent autocomplete +- � **Declarative** - Write PixiJS code using familiar React patterns +- 🪝 **React Hooks** - Built-in hooks for animations, tickers, and more +- � **No Overhead** - Components render outside of React for maximum performance +- 🛠️ **Extensible** - Easy integration with custom PixiJS components + +## What Is @pixi/react? + +`@pixi/react` is an open-source, production-ready library to render high performant PixiJS applications in React. It provides a declarative way to build high-performance 2D graphics and interactive experiences using familiar React patterns. + +Write [PixiJS](http://www.pixijs.com/) applications using React declarative style and harness the power of PixiJS within React's paradigm. By combining PixiJS's rendering capabilities with React's component model, you can create stunning visual applications while maintaining clean, maintainable code. + +## What Makes @pixi/react Special + +At its core, `@pixi/react` offers: + +- **Declarative Rendering**: Write PixiJS applications using JSX, making complex scenes easy to understand and maintain. +- **React Integration**: Seamless integration with React's lifecycle, hooks, and state management. +- **Performance Focused**: Components render outside of React's reconciliation loop for maximum performance. +- **Tree Shaking**: Import only the PixiJS components you need using the `extend` API. +- **Type Safety**: Full TypeScript support with intelligent autocomplete for all PixiJS properties. + +## Why Choose @pixi/react? + +`@pixi/react` bridges the gap between PixiJS's performance and React's developer experience. You get: + +- **Familiar Patterns**: Use React concepts like props, state, and hooks to control PixiJS objects. +- **Component Reusability**: Create reusable graphics components that can be shared across projects. +- **Developer Experience**: Benefit from React DevTools, hot reloading, and the entire React ecosystem. +- **No Compromises**: Everything that works in PixiJS works in `@pixi/react` without limitations. + +## Who Is @pixi/react For? + +`@pixi/react` is perfect for React developers who want to: + +- Build interactive games and animations within React applications +- Create data visualizations with complex graphics and animations +- Develop creative web experiences without leaving the React ecosystem +- Migrate existing PixiJS applications to a more maintainable React architecture +- Learn PixiJS while leveraging existing React knowledge + +## Does it have limitations? + +None. Everything that works in PixiJS will work here without exception. + +## Get Started + +Ready to dive in? Check out our [Quick Start](/getting-started/quick-start) guide to create your first `@pixi/react` application! + +PixiJS is more than just a rendering engine; it’s a gateway to creative freedom. Dive into our comprehensive [documentation](./quick-start.mdx) or join the [community](https://discord.gg/CPTjeb28nH) to start your journey with PixiJS today. diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started/quick-start.mdx similarity index 77% rename from docs/docs/getting-started.mdx rename to docs/docs/getting-started/quick-start.mdx index 8a2c7612..31f34950 100644 --- a/docs/docs/getting-started.mdx +++ b/docs/docs/getting-started/quick-start.mdx @@ -1,16 +1,17 @@ --- sidebar_position: 1 -title: Getting Started +title: Quick Start +description: Get started with @pixi/react by integrating it into your existing React application and creating interactive PixiJS components. --- import { EmbeddedEditor } from '@site/src/components/Editor/EmbeddedEditor'; -import ExampleApp from '!!raw-loader!../src/examples/basic/App'; -import ExampleBunnySprite from '!!raw-loader!../src/examples/basic/BunnySprite'; +import ExampleApp from '!!raw-loader!../../src/examples/basic/App.jsx'; +import ExampleBunnySprite from '!!raw-loader!../../src/examples/basic/BunnySprite.jsx'; To add `@pixi/react` to an existing React application, install the necessary dependencies: ```bash -npm install pixi.js@^8.2.6 @pixi/react@beta +npm install pixi.js@^8.2.6 @pixi/react ``` ## Does it have limitations? From c1fdf024ca3211a966d9bb8c2f14c265a98a4a8a Mon Sep 17 00:00:00 2001 From: creativoma Date: Fri, 15 Aug 2025 13:59:17 +0200 Subject: [PATCH 08/10] feat(docs): migrate Components category from JSON to YAML format for consistency --- docs/docs/components/_category_.json | 4 ---- docs/docs/components/_category_.yml | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) delete mode 100644 docs/docs/components/_category_.json create mode 100644 docs/docs/components/_category_.yml diff --git a/docs/docs/components/_category_.json b/docs/docs/components/_category_.json deleted file mode 100644 index 57bbce61..00000000 --- a/docs/docs/components/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Components", - "position": 2 -} diff --git a/docs/docs/components/_category_.yml b/docs/docs/components/_category_.yml new file mode 100644 index 00000000..f3bb17cf --- /dev/null +++ b/docs/docs/components/_category_.yml @@ -0,0 +1,4 @@ +label: Components +position: 1 +collapsed: true +collapsible: true From b92ef017d283dcf7c40ee2c03d7712f9e5bc82e0 Mon Sep 17 00:00:00 2001 From: creativoma Date: Thu, 27 Nov 2025 23:13:01 +0100 Subject: [PATCH 09/10] fix(docs): update Discord link and improve documentation clarity --- docs/docs/getting-started/intro.mdx | 8 ++++---- docs/docusaurus.config.ts | 2 +- docs/src/pages/index.tsx | 3 ++- docs/src/theme/DocSidebarItem/index.tsx | 7 +++---- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/docs/getting-started/intro.mdx b/docs/docs/getting-started/intro.mdx index ef78fda9..aac06362 100644 --- a/docs/docs/getting-started/intro.mdx +++ b/docs/docs/getting-started/intro.mdx @@ -25,7 +25,7 @@ description: Overview of @pixi/react, its features, and what makes it the best w license - + discord chat @@ -46,9 +46,9 @@ description: Overview of @pixi/react, its features, and what makes it the best w - 🏎️ **PixiJS v8 Compatible** - Latest PixiJS performance and features - 📦 **Tree-shakeable** - Only import what you need with the `extend` API - 🎯 **Type-safe** - Full TypeScript support with intelligent autocomplete -- � **Declarative** - Write PixiJS code using familiar React patterns +- 📝 **Declarative** - Write PixiJS code using familiar React patterns - 🪝 **React Hooks** - Built-in hooks for animations, tickers, and more -- � **No Overhead** - Components render outside of React for maximum performance +- ⚡ **No Overhead** - Components render outside of React for maximum performance - 🛠️ **Extensible** - Easy integration with custom PixiJS components ## What Is @pixi/react? @@ -94,4 +94,4 @@ None. Everything that works in PixiJS will work here without exception. Ready to dive in? Check out our [Quick Start](/getting-started/quick-start) guide to create your first `@pixi/react` application! -PixiJS is more than just a rendering engine; it’s a gateway to creative freedom. Dive into our comprehensive [documentation](./quick-start.mdx) or join the [community](https://discord.gg/CPTjeb28nH) to start your journey with PixiJS today. +PixiJS is more than just a rendering engine; it's a gateway to creative freedom. Dive into our comprehensive [documentation](./quick-start.mdx) or join the [community](https://discord.gg/zqbXQAADuM) to start your journey with PixiJS today. diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index db9a476c..cef17b4c 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -120,7 +120,7 @@ const config: Config = { 'aria-label': 'Twitter account', }, { - href: 'https://discord.gg/CPTjeb28nH', + href: 'https://discord.gg/zqbXQAADuM', position: 'right', className: 'header-link header-discord-link', 'aria-label': 'Discord server', diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 622d156d..293cdc58 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -1,4 +1,5 @@ import clsx from 'clsx'; +import { type JSX } from 'react'; import CTA from './CTA'; import styles from './index.module.css'; import ExampleApp from '!!raw-loader!../examples/basic/App'; @@ -65,7 +66,7 @@ export default function Home(): JSX.Element viewType={'both'} width={'100%'} /> - +
diff --git a/docs/src/theme/DocSidebarItem/index.tsx b/docs/src/theme/DocSidebarItem/index.tsx index a17fb302..5e8ab663 100644 --- a/docs/src/theme/DocSidebarItem/index.tsx +++ b/docs/src/theme/DocSidebarItem/index.tsx @@ -1,10 +1,11 @@ +import { type JSX } from 'react'; import DocSidebarItem from '@theme-original/DocSidebarItem'; interface DocSidebarItemProps { item: { type: string; - href: string; + href?: string; }; level: number; activePath: string; @@ -25,8 +26,6 @@ export default function DocSidebarItemWrapper(props: DocSidebarItemProps): JSX.E } return ( - <> - - + ); } From 340b0c01bf096fa3e1520b1bf77033e2444c8da9 Mon Sep 17 00:00:00 2001 From: creativoma Date: Thu, 27 Nov 2025 23:13:18 +0100 Subject: [PATCH 10/10] fix(docs): remove Create React App section and update Discord link --- docs/docs/getting-started/ecosystem.mdx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/docs/getting-started/ecosystem.mdx b/docs/docs/getting-started/ecosystem.mdx index a16f13d0..fe1722f2 100644 --- a/docs/docs/getting-started/ecosystem.mdx +++ b/docs/docs/getting-started/ecosystem.mdx @@ -245,14 +245,6 @@ export default function GamePage() { } ``` -### Create React App - -`@pixi/react` works out of the box with Create React App. Just install the dependencies and start building: - -```bash -npm install pixi.js@^8.2.6 @pixi/react -``` - ### Vite Perfect compatibility with Vite's fast development experience: @@ -268,7 +260,7 @@ npm install pixi.js@^8.2.6 @pixi/react - **[GitHub Repository](https://github.com/pixijs/pixi-react)** - Source code, issues, and discussions - **[GitHub Discussions](https://github.com/pixijs/pixi-react/discussions)** - Ask questions and share ideas -- **[PixiJS Discord](https://discord.gg/QrnxmQUPGV)** - Get help from the community +- **[PixiJS Discord](https://discord.gg/zqbXQAADuM)** - Get help from the community - **[Examples](https://github.com/pixijs/pixi-react/tree/main/docs/src/examples)** - Browse code examples The combination of React's declarative component model with PixiJS's high-performance rendering provides everything you need to build incredible interactive experiences.