# pixidom.js

> Library pixi containers extended with specific functionality somewhat mimicking the DOM

Latest version **0.1.2** (published 2025-04-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install pixidom.js
pnpm add pixidom.js
yarn add pixidom.js
bun add pixidom.js
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2025-04-27 |
| First published | 2019-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 573.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | visgotti |
| Maintainers | jvisgotti |
| Keywords | pixi, pixijs, pixi.js, pixi-dom, pixidom, dom, canvas, graphics |

## Links

- npm: https://www.npmjs.com/package/pixidom.js
- Repository: https://github.com/visgotti/PixiDom
- Homepage: https://github.com/visgotti/PixiDom#readme
- Issues: https://github.com/visgotti/PixiDom/issues
- npm.io page: https://npm.io/package/pixidom.js

## Dependencies (1)

- [tween-functions](https://npm.io/package/tween-functions.md) ^1.2.0

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2025-04-27
- 0.1.1 — 2025-04-26
- 0.1.0 — 2025-04-26
- 0.0.9 — 2025-01-24
- 0.0.8 — 2025-01-24
- 0.0.7 — 2020-03-29
- 0.0.6 — 2019-10-01
- 0.0.5 — 2019-09-21
- 0.0.4 — 2019-09-02
- 0.0.3 — 2019-09-02
- 0.0.2 — 2019-09-02
- 0.0.1 — 2019-09-02

## README

# Pixi Dom
Library pixi containers extended with specific functionality somewhat mimicking the DOM

# examples folder is best place to look

## ScrollList
```js
const scrollList = new PIXI.ScrollList({
  width: 300,
  height: 100,
  backgroundColor: 0xFF0000,
  dividerColor: 0xFF0000,
  dividerPixelHeight: 1,
  dividerPercentWidth: 0.1,
  dividerTopPadding: 0,
  dividerBottomPadding: 0,
  borderOpacity: 0.5,
  xPadding: 0,
  yPadding: 0,
}, []);

for(let i = 0; i < 100; i++) {
  scrollList.addScrollItem(new PIXI.Text(`item_${i}_a`, { font: '24px Arial', fill: 0xffffff, align: 'center' })); 
    // or can do addScrollItems and pass in an array.
  scrollList.addScrollItems([
    new PIXI.Text(`item_${i}_b1`, { font: '24px Arial', fill: 0xffffff, align: 'center' }),
    new PIXI.Text(`item_${i}_b2`, { font: '24px Arial', fill: 0xffffff, align: 'center' }),  
  ]); 
}
```

## Bitmap Font Textfields
```js
PIXI.loader.add('./fonts/small.fnt');
PIXI.loader.load(() => {
   const textInput = new PIXI_DOM.TextField('small');
   
   // define which keys can fire off the "onSubmit" event, by default its just 13 (enter key)
   textInput.submitKeyCodes = ([13]);
   
    // can define keys to ignore, this would ignore all tab presses as input
    textInput.ignoreKeys = ([9]) 

   // manually focus
   textInput.focus();
   // manually blur
   textInput.blur();
   // manually clear text
   textInput.clear();
   // manually trigger submit
   textInput.submit();
   // manually change
   textInput.change("Text to change to");
   
   // fired off when focused
   textInput.onFocus(() => {});
   // fired off when blurred
   textInput.onBlur(() => {});
   // fired off when text changes
   textInput.onChange((text) => {});
   // fired off when hit submit button
   textInput.onSubmit(() => {});
})
```

```js

```

---
_Source: https://npm.io/package/pixidom.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._