@number10/phaserjsx

> Declarative Phaser3 UI framework with React-like components and TypeScript

A modern, type-safe framework for building game UIs in Phaser3 using JSX components, hooks, and a powerful theme system.


✨ Features

- 🎨 React-like API - Familiar JSX syntax with hooks (useState, useEffect, useMemo, etc.)
- 🎯 Type-Safe - Full TypeScript support with strict type checking
- 🎨 Powerful Theme System - Global and component-level theming with runtime switching
- 📦 Rich Component Library - Button, Text, Icon, Accordion, Dropdown, CharTextInput, and more
- 🎭 Built-in Effects - 23+ animation effects (pulse, shake, fade, bounce, etc.)
- 📱 Responsive Design - Flexible layout with multiple size value formats (px, %, vw/vh, fill, auto, calc)
- 🔧 Custom Components - Easy to create and integrate custom components
- 🎮 Phaser Integration - Seamless integration with Phaser3 game objects and scenes
- 📊 SVG Support - Convert SVG to Phaser textures with caching
- 🚀 Performance - Optimized VDOM reconciliation with smart dirty checking

📦 Installation

``bash
npm install @number10/phaserjsx phaser


or

yarn add @number10/phaserjsx phaser

or

pnpm add @number10/phaserjsx phaser
`

🚀 Quick Start

$3

`json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@number10/phaserjsx"
}
}
`

$3

`tsx
import { useState, View, Button, Text } from '@number10/phaserjsx'

function Counter() {
const [count, setCount] = useState(0)

return (

Count: ${count}} fontSize={32} color={0xffffff} />
setCount(count + 1)}>



)
}
`

$3

`tsx
import * as Phaser from 'phaser'
import { mountJSX } from '@number10/phaserjsx'

class GameScene extends Phaser.Scene {
create() {
mountJSX(this, Counter, {
width: this.scale.width,
height: this.scale.height,
})
}
}

const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: [GameScene],
}

new Phaser.Game(config)
`

📖 Documentation

📖 Full Documentation

🎮 Live Examples on StackBlitz

See usage examples below for quick reference.

🎯 Examples

$3

`tsx
import { useState, View, CharTextInput, Button, Text } from '@number10/phaserjsx'

function LoginForm() {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')

const handleLogin = () => {
console.log('Login:', username, password)
}

return (

value={username}
onChange={setUsername}
placeholder="Username"
maxLength={20}
/>
value={password}
onChange={setPassword}
placeholder="Password"
isPassword
maxLength={20}
/>




)
}
`

$3

`tsx
import { View, Button, Text } from '@number10/phaserjsx'
import type { Theme } from '@number10/phaserjsx'

const customTheme: Theme = {
Button: {
backgroundColor: 0x4caf50,
cornerRadius: 8,
padding: { x: 24, y: 12 },
Text: {
fontSize: 18,
color: 0xffffff,
},
},
}

function ThemedButton() {
return (

console.log('Clicked')}>



)
}
`

$3

`tsx
import { Button, Text } from '@number10/phaserjsx'

function AnimatedButton() {
return (
effect="pulse"
effectConfig={{ intensity: 1.1, time: 800, repeat: -1, yoyo: true }}
onPress={() => console.log('Pressed')}
>


)
}
`

🔌 Icon Generator

Generate custom icon components from SVG files:

`bash


Generate icon components

npx generate-icons

Generate TypeScript types

npx generate-icon-types
`

Configuration in icon-generator.config.ts:

`typescript
import type { IconGeneratorConfig } from '@number10/phaserjsx/scripts/icon-generator-config'

export default {
inputDir: './src/assets/icons',
outputFile: './src/custom-icons/generated-icons.tsx',
typesFile: './src/custom-icons/icon-types.ts',
componentName: 'CustomIcon',
defaultSize: 24,
} satisfies IconGeneratorConfig
`

🎨 Vite Plugin

Automatic icon generation during development:

`typescript
import { defineConfig } from 'vite'
import { phaserjsxIconsPlugin } from '@number10/phaserjsx/vite-plugin-icons'

export default defineConfig({
plugins: [
phaserjsxIconsPlugin({
inputDir: './src/assets/icons',
outputFile: './src/custom-icons/generated-icons.tsx',
}),
],
})
``

🤝 Contributing

Contributions are welcome! Please visit the main repository for contribution guidelines.

📝 License

GPL-3.0-only. Commercial licensing available—contact Michael Rieck (Michael--) at mr@number10.de.

🔗 Links

- 📖 Documentation
- GitHub Repository
- npm Package
- Issue Tracker