pixi-svelte

Use PixiJS in a declarative way with Svelte5.

Documentation

Check out the github repo for pixi-svelte usage and for more information in https://github.com/StakeEngine/web-sdk/tree/main/packages/pixi-svelte

For more usage please checkout storybook: https://github.com/StakeEngine/web-sdk/tree/main/packages/pixi-svelte-storybook

Examples of usage

$3

``ts





`

$3

`ts



draw={(graphics) => {
graphics.beginFill(0xde3249);
graphics.drawRect(0, 0, 150, 150);
graphics.endFill();
}}
/>


`

$3

`ts



width={100}
height={100}
alpha={1}
borderWidth={2}
backgroundColor={0x522000}
borderColor={0x1dc000}
borderRadius={0.5}
x={50}
y={50}
zIndex={1}
isMask={false}
/>

`

SSR

"window" is required for this package, so if SvelteKit is used, there is an option to make it work:

- Turn off SSR

`ts
// src/routes/+layout.ts
export const ssr = false;
``

Reference

- Pixi Text: https://pixijs.download/dev/docs/PIXI.Text.html
- Pixi Graphics Example: https://pixijs.io/examples-v4/#/graphics/simple.js
- SvelteKit SSR: https://kit.svelte.dev/docs/page-options#ssr
- Create a SvelteKit app: https://kit.svelte.dev/docs/creating-a-project