@number10/jsx-pixi

PixiJS 8 renderer adapter for the PhaserJSX framework — provides Pixi-specific runtime, mounting, backgrounds, gestures, and effects.

Status

✅ Full implementation — HostAdapter, SurfaceAdapter, VDOM runtime, overlays, gestures, effects, backgrounds, vector draw, particles.

Usage

/** @jsxImportSource @number10/jsx-pixi */
import { View, Text, Button } from '@number10/jsx-components'
import { useState } from '@number10/jsx-core'
import { mountPixiJSX } from '@number10/jsx-pixi'

await mountPixiJSX({
  component: App,
  target: document.getElementById('app')!,
  width: 800,
  height: 600,
  backgroundColor: '#f0f0f0',
})

What's included

• Pixi mount helper (mountPixiJSX, VDOM reconciliation)
• Pixi adapters (PixiHostAdapter, PixiSurfaceAdapter)
• Debug snapshot hook (usePixiDebugSnapshot)
• Scene backgrounds (addPixiSceneBackground)
• Vector drawing (PixiVectorDrawContext)
• Re-exports from @number10/jsx-components and @number10/jsx-core

Import from the right package

| Need | Import from | | ---------------------- | -------------------------- | | Portable UI components | @number10/jsx-components | | Pixi mount + adapters | @number10/jsx-pixi | | Phaser runtime | @number10/jsx-phaser | | Legacy all-in-one | @number10/phaserjsx |

License

GPL-3.0-only