Interactive p5.js example

The block below is a real p5.js canvas, mounted by a React wrapper component. It runs entirely client-side and cleans itself up on navigation.

How it works

In the MDX file, embedding a sketch is one line:

<P5Canvas sketch="flow-field" />

P5Canvas is a client component that dynamically imports p5 (so it never runs on the server) and instantiates the named sketch from src/sketches/.

Here's another one — try clicking and dragging on the canvas to push the ball:

Adding your own sketch

1. Create a new file in src/sketches/, e.g. my-sketch.ts
2. Export a function (p: p5) => void that defines setup and draw
3. Register it in src/sketches/index.ts
4. Use it from any post: <P5Canvas sketch="my-sketch" />