svelte-paperscript

Ever wanted the ability to write PaperScript code directly in your Svelte components? No? Well, too bad. You can do it anyway.

It makes linters (and other static analysis tools) very angry.

I wrote a Svelte preprocessor to automatically compile your PaperScript code into JavaScript, so you can use it in your Svelte components. This contrasts with the usual Paper.js way of doing it all on the client side. This way, Vite can optimise everything at build time with tree-shaking!

Much faster. Much better.

Here’s a simple demo:

<script lang="​paperscript">
    const rect = new Path.Rectangle({
        size: view.size / 5,
        point: view.center,
        fillColor: 'orange'
    });
    function onFrame() {
        rect.rotate(5, (
            view.center + rect.bounds.center
        ) / 2);
    }
</script>

<canvas class="h-1/2 w-full" resize></canvas>

Wiggle your mouse below to see something more complex:

Isn’t that cool? Check out the package on npm or the source code on GitHub!