PixiUI

Here are some useful resources:

• Full docs
• Github Repo
• Sandbox

We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!

Compatibility

Depending on your version of PixiJS, you'll need to figure out which major version of PixiUI to use.

PixiJS	PixiUI
v7.x	v1.x
v8.x	v2.x

Install

npm install @pixi/ui

There is no default export. The correct way to import pixi-ui is:

Usage

import { Button } from '@pixi/ui';

const button = new Button();

button.onPress.connect(() => console.log('Button pressed!'));

Importing a single component

The package is side-effect free ("sideEffects": false), so a bundler only includes the components you actually import from @pixi/ui. You can also import a component from its own entry point:

import { Button } from '@pixi/ui/Button';
import { ScrollBox } from '@pixi/ui/ScrollBox';
import { Input } from '@pixi/ui/input';
import { Signal } from '@pixi/ui/utils/Signal';

Subpath imports need a module resolution that understands package exports (node16, nodenext or bundler in TypeScript). With the legacy node (node10) resolution, import from @pixi/ui instead.

Without a bundler

Every component is a separate ES module, so a browser can load just the ones you need with an import map:

<script type="importmap">
    {
        "imports": {
            "pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8/dist/pixi.min.mjs",
            "tweedle.js": "https://cdn.jsdelivr.net/npm/tweedle.js@2/dist/tweedle.es.js",
            "@pixi/ui/": "https://cdn.jsdelivr.net/npm/@pixi/ui@2/lib/"
        }
    }
</script>
<script type="module">
    import { Input } from '@pixi/ui/input/Input.mjs';
</script>

For a classic <script> tag, dist/pixi-ui.js contains the whole library and only needs the PIXI global.

To use any of the components you can go to it's page in the sandbox, and copy/paste the example code to your project (check the Code tab):

Components

• Switcher
• Button
• CheckBox
• FancyButton
• Input
• List
• MaskedFrame
• ProgressBar
• RadioGroup
• ScrollBox
• Select
• Slider

Contribute

Want to be part of the PixiUI project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request, or you fancy owning a task from the road map above, feel free to get in touch.

Make sure to read the Contributing Guide before submitting changes.

License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.

Known Issues

This library requires Pixi v7.1.1 or higher as this is when the globalpointermove event was added See here for details