Pixi-svelte NPM

pixi-svelte

Use PixiJS in a declarative way with Svelte.

Example of usage

Text

<script lang="ts">
    import { createApp, setAppContext, App, Text } from "pixi-svelte";
    const context = createApp();
    setAppContext(context);
</script>

<App> 
    <Text value="Hello world!" style={{ fill: 0xff1010 }} />
</App>

Graphics

<script lang="ts">
    import { createApp, setAppContext, App, Graphics } from "pixi-svelte";
    const context = createApp();
    setAppContext(context);
</script>

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

Rectangle

<script lang="ts">
    import { createApp, setAppContext, App, Rectangle } from "pixi-svelte";
    const context = createApp();
    setAppContext(context);
</script>

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

Storybook

Check out the storybook repo for pixi-svelte for more information: https://github.com/qk0106/pixi-svelte-storybook

SSR

"window" is required for this package, so if SvelteKit is used, there are some options to make it work:

Turn off SSR

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

Dynamic import

<script lang="ts">
    import { browser } from "$app/environment";
    let component = undefined;

    $: if(browser) {
        import("./PixiSvelteApp.svelte").then(data => {
        component = data.default
        });
    }
</script>

{#if browser && component}
    <svelte:component this={component} />
{/if}