astro-p5js-sketch

astro-p5js-sketch runs a p5.js sketch given as a code string, in a centered container. p5 is imported dynamically in the browser only, so the component is safe to render on the server (including Cloudflare Workers and other SSR runtimes).

One use case is a blog post (Markdown or MDX) where the same sketch source is both executed and shown as a code listing.

Installation

npm install @rgglez/astro-p5js-sketch p5

p5 is a peer dependency, install it in your project.

Usage

import P5Sketch from "@rgglez/astro-p5js-sketch";

Instance mode (default)

The code receives the p5 instance as p and assigns its hooks on it:

<P5Sketch
  code={`
p.setup = () => {
  p.createCanvas(400, 400);
};
p.draw = () => {
  p.background(20);
  p.ellipse(p.width / 2, p.height / 2, 100 + p.sin(p.frameCount * 0.05) * 50);
};
`}
/>

Global mode

For sketches written in the classic Processing style (bare setup/draw, no p. prefix), pass global:

<P5Sketch
  global
  code={`
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(20);
  circle(mouseX, mouseY, 40);
}
`}
/>

Usage in .mdx files

Keeping the sketches in a separate .ts file avoids escaping problems and lets you reuse the same string in a code listing:

// src/data/sketches.ts
export const demoCircles = `
p.setup = () => { p.createCanvas(400, 400); };
p.draw = () => { p.background(20); p.circle(p.mouseX, p.mouseY, 40); };
`;

import P5Sketch from "@rgglez/astro-p5js-sketch";
import { demoCircles } from "@/data/sketches";

<P5Sketch code={demoCircles} />

Props

| Prop | Type | Default | Description | |----------|-----------|---------|--------------------------------------------------------------------------| | code | string | — | Sketch source. Required | | global | boolean | false | Run the code in global mode (bare setup/draw) instead of instance mode | | class | string | "" | Extra classes for the wrapper div |

Notes and limitations

• This is an Astro component (.astro). It cannot be imported into React, Vue, Svelte or other framework components. Use it from .astro or .mdx files.
• The code string is evaluated with new Function. Only use sketch code you control, never user input.
• Global mode uses with (p), so undeclared variables in the sketch land on window. Two global sketches on the same page can clobber each other. Prefer instance mode when a page has more than one sketch.
• Sketches are removed on astro:before-swap, so they do not keep running after a ClientRouter navigation.
• Styling is a plain scoped <style> block, no Tailwind or other CSS framework is required.

Development

| Target | Description | |--------|-------------| | make tags | List git tags sorted by semver (descending) | | make patch | Bump PATCH version in package.json, commit, tag, and push | | make publish | Publish current version to npm |

Typical release flow: make patch → make publish.

License

Copyright (C) 2026 Rodolfo González González.

Licensed under the Apache v2.0 license. Read the LICENSE file.