User Interface (UI)

Pixi’VN does not provide built-in components to create the game UI, and it does not reinvent what already exists in the JavaScript ecosystem. Instead of locking you into a specific framework, it lets you use any external JavaScript framework you prefer to build your UI, so you can leverage systems such as React, Vue, etc., to create complex and high-performance UI screens.

This flexibility also makes Pixi’VN a great fit for AI-assisted development: because the UI is built with standard, widely-used frameworks rather than a proprietary system, AI coding assistants already know these tools well and can generate, understand, and modify UI code very effectively.

Pixi’VN offers features to improve compatibility with other JavaScript frameworks:

Differences between the UI and the canvas

As Pixi’VN was designed and conceived, the UI and the canvas are two distinct and independent elements. The UI is above the canvas and is used to create buttons, forms, etc. The canvas is used to display images, videos, etc.

All information about the current state of the canvas is included in the save and it is possible to restore the state of a previous step. The current state of the UI will not be included in the saves. So you have to manage it yourself by saving the information you need to game storage or browser storage.

In the canvas you can add components during each step. In the UI you can't do that, you can create several "screens" and navigate between them.

In the canvas you can only add Pixi’VN components. In the UI you can add any HTML/PixiJS component or use any UI component library, so you can create much more complex interfaces.