PixiConsole

4.0.0 verified Sat Apr 25 auth: no javascript

Pixi-console is a console overlay class for Pixi.js v6/v7 (peer dep) that displays log and error messages on screen, primarily for mobile game debugging. Current stable version is 4.0.0, with support for Pixi v7 added in December 2023. It automatically hooks into console.log and console.error, showing on error, and maintains a singleton pattern. Differentiators: no external dependencies besides Pixi.js, simple API with customizable configuration, and typed via included TypeScript definitions.

Common errors

error TypeError: PixiConsole is not a constructor ↓

cause Using require() instead of import; package is ESM-only.

fix

Use 'import { PixiConsole } from "pixi-console";' or use dynamic import().

error Error: PixiConsole is singleton.. ↓

cause Attempting to create more than one instance via 'new PixiConsole()'.

fix

Use PixiConsole.getInstance() to get the existing instance.

error Module not found: Can't resolve 'pixi-console' ↓

cause Missing peer dependency pixi.js or PixiConsoleConfig not installed correctly.

fix

Run 'npm install pixi.js pixi-console'.

Warnings

gotcha PixiConsole is a singleton; calling new PixiConsole() more than once throws an error. ↓

fix Use PixiConsole.getInstance() to get the existing instance, or ensure constructor is called only once.

breaking Peer dependency requires Pixi.js v6 or v7. Not compatible with Pixi v5 or v4 in v4.0.0. ↓

fix Use pixi-console v3.0.0 for Pixi v5, v2.5.0 for Pixi v4.

deprecated PixiConsoleConfig has no named exports; must be imported via named import. No deprecation but may cause confusion. ↓

fix Ensure import { PixiConsoleConfig } from 'pixi-console'.

gotcha Package does not provide a CommonJS entry; require() will fail. Only ESM import works. ↓

fix Use ESM import syntax in Node.js or bundler with ES module resolution.

Install

npm install pixi-console

yarn add pixi-console

pnpm add pixi-console

Imports

PixiConsole
wrong
```
const PixiConsole = require('pixi-console')
```
correct
```
import { PixiConsole } from 'pixi-console'
```
ESM-only; package does not provide a CommonJS dist. Use named import.

PixiConsoleConfig

wrong

import PixiConsoleConfig from 'pixi-console'

correct

import { PixiConsoleConfig } from 'pixi-console'

Named export, not default.

PixiConsole.getInstance

wrong

import PixiConsole from 'pixi-console'; const instance = new PixiConsole();

correct

import { PixiConsole } from 'pixi-console'; const instance = PixiConsole.getInstance();

PixiConsole is a singleton; use getInstance() to access the existing instance or create first via new. Constructing again throws.

Quickstart

Shows how to import, configure, and attach PixiConsole to a Pixi app stage. Also demonstrates automatic log/error interception.

import { PixiConsole, PixiConsoleConfig } from 'pixi-console';
import * as PIXI from 'pixi.js';

// Create a Pixi application
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

// Configure console
const config = new PixiConsoleConfig();
config.consoleWidth = 400;
config.consoleHeight = 300;
config.fontSize = 14;

// Create and add to stage
const console = new PixiConsole(config);
app.stage.addChild(console);

// Now console.log and console.error will show on screen
globalThis.__PIXI_APP__ = app;
console.log('Debug message');
console.error('Error message');