p5-svelte

⫸ Get Started

Trying to get p5 up and running in Svelte can be a pain. So here's an absolutely dead simple way of tossing it into your project.

The API is super simple; you get a P5 component which accepts a sketch prop. You can make use of Svelte's reactivity system to bind props or params within your p5 sketch just as you would with regular Svelte! You can even have multiple p5 components per page without any scoping issues!

Installation

pnpm i p5-svelte

Depending on your environment, you may be alerted upon installing p5-svelte that p5 is a required peer dependency which you must install yourself. Thus do:

pnpm i -D p5

Then import the exported P5 component from p5-svelte into your desired component.

Example

<script>
  import P5 from 'p5-svelte';
  let width = 55;
  let height = 55;

  const sketch = (p5) => {
    p5.setup = () => {
      p5.createCanvas(400, 400);
    };

    p5.draw = () => {
      p5.ellipse(p5.width / 2, p5.height / 2, width, height);
    };
  };
</script>

<label>
  Width
  <input type="range" bind:value={width} min="100" max="1000" step="0.01" />
  {width}
</label>

<label>
  Height
  <input type="range" bind:value={height} min="100" max="1000" step="0.01" />
  {height}
</label>

<P5 {sketch} />

Output

180 130

100 200 300 400 500 600 700 800 900 1000