🎮ArcadeLab
🎨May 13, 2026

How do I share a p5.js sketch as a playable URL?

💡

Quick answer

Wrap your p5 sketch in a single HTML file with the sketch JS inline. Add an ARCADELAB header with libraries: p5. Paste at arcadelab.ai/publish and you get a permanent URL. No p5.js editor account needed.

p5.js sketches are pure single-file HTML by nature — the entire sketch lives in a setup() and draw() function inside a script tag. That makes them a perfect fit for ArcadeLab.

What does a minimal p5 sketch on ArcadeLab look like?

<!--ARCADELAB
title: My Sketch
description: An interactive p5.js sketch
libraries: p5
emoji: 🎨
color: pink
-->
<!DOCTYPE html>
<html>
<head>
  <style>body { margin: 0; }</style>
</head>
<body>
  <script>
    function setup() { createCanvas(800, 600); }
    function draw() {
      background(20);
      fill(255, 100, 150);
      circle(mouseX, mouseY, 50);
    }
  </script>
</body>
</html>

That's it. Note there is no <script src="p5.min.js"> — ArcadeLab loads it because you listed p5 in the header.

How do I convert an existing p5 editor sketch?

In the p5 editor, your sketch is split into index.html, sketch.js, and sometimes style.css. Inline all of them:

  1. Copy the contents of sketch.js into a <script> tag
  2. Copy style.css into a <style> tag
  3. Remove the <script src="p5.min.js"> line
  4. Remove the <script src="sketch.js"> line
  5. Add the ARCADELAB header with libraries: p5

If you have any asset files (images, fonts), those would need to be base64-encoded inline.

Can I ask Claude or ChatGPT to make a p5 sketch for ArcadeLab?

Yes. Try this prompt:

"Make a p5.js sketch as a single self-contained HTML file. Don't include the p5 CDN — ArcadeLab loads it. Put an <!--ARCADELAB> header at the top with libraries: p5. All JS inline. No fetch, no external files. Generate any visuals procedurally."

Or just share arcadelab.ai/for-ai with your AI and tell it "make a p5 sketch."

Why use ArcadeLab instead of OpenProcessing or the p5 editor?

Both are excellent. OpenProcessing has a great community for p5 sketches specifically. The p5 editor is unbeatable for live editing. ArcadeLab's strength is friction: no account, no editor, just paste and share. Use whichever fits the moment — they aren't mutually exclusive.

Prompt template

🎨How do I prompt Claude or ChatGPT to make a p5.js sketch?

Library hub

🎨p5.js (creative coding) on ArcadeLab

Ready to publish? Paste your HTML file and get a URL.

🚀Publish your thing

Related guides