Code mode

A spec is data. Sometimes a picture needs a program: an animation, a simulation, a sketch you wrote by hand. Code mode runs a p5.js sketch in a sandboxed frame, so the page that hosts it stays in control.

Try itMove the pointer over the frame

A sketch in a sandboxed frame. It follows the pointer inside the frame only.

function setup() {
  createCanvas(320, 180);
  noStroke();
}

function draw() {
  background(0);
  fill(255, 176, 32);
  circle(mouseX, height / 2, 60);
}

What the frame cannot doThe sandbox and the policy

It has an opaque origin: sandbox="allow-scripts" and nothing else. It cannot read the host page, its cookies or storage.
It makes no network requests (connect-src 'none'), opens no popups, and submits no forms.
Its one inline script carries a per-frame nonce. Scripts come only from the pinned p5.js build.
The text </script is refused in the sketch, so the sketch cannot end its own script early.
The sketch is limited to 32 KB.

Use it for code you wroteNot for visitors' code

The sandbox protects the page that hosts a sketch. It does not protect against a sketch that loops forever, which freezes its own frame and nothing else. Run code mode for sketches the page's author wrote. Do not run code that a visitor typed in, unless you have decided that is a product you want to run.