library/p5.js
A p5.js Online Editor for Sketches, with a Live Canvas
Write a p5.js sketch with setup and draw and watch the canvas animate as you type — shapes, motion, input and sound, with npm and multi-file projects, nothing to install.
function setup() {
createCanvas(400, 400);
}
function draw() {
background(20);
const r = 80 + 40 * sin(frameCount * 0.05);
fill(244, 69, 122);
circle(width / 2, height / 2, r);
}01 platform
What p5.js is for, and why it starts fast
p5.js exists to get a shape on a canvas in the fewest lines possible, so the first thing you do is draw rather than configure. This editor keeps that immediacy and adds the project tooling the beloved official web editor deliberately leaves out.
-
Draw in two functions
setupruns once,drawruns every frame. That is the whole model, and it is why a beginner can make something move in ten lines — the reason p5 is taught so widely. -
A live canvas
The canvas re-runs on save, so a changed color, a new shape or a tweaked motion shows up immediately. Creative coding is a feedback loop, and the loop is fast here.
-
Real project tooling
Where the official editor keeps things deliberately minimal, this adds a file tree, npm, TypeScript and Git — for when a sketch grows into something with modules and dependencies.
-
Private and installable
The sketch lives in your browser, never on a server, and XCODX installs as a PWA — so an experiment keeps working offline and stays yours.
02 deep dive
setup runs once, draw runs every frame
The two-function model is the whole of p5's structure, and understanding it is most of understanding p5.
setup prepares the canvas. It runs a single time — create the canvas, set a frame rate, load a starting state. Anything that should happen once goes here.
draw is the loop. It runs about sixty times a second, clearing and repainting the canvas each frame. frameCount and functions like sin turn that loop into motion without you writing a timer.
Input is built in. mouseX, mouseY, keyIsPressed and event functions like mousePressed are available with no wiring, so a sketch reacts to the user as easily as it animates.
- setup()
- runs once
- draw()
- ~60 fps loop
- input
- mouseX, keyIsPressed
- time
- frameCount
function draw() {
background(20, 20); // slight trail
fill(244, 69, 122);
circle(mouseX, mouseY, 40);
}03 features
What ships with a p5.js sketch
Everything below is on the moment you open the p5.js editor, which starts with an animated flow-field sketch you can pull apart.
-
Live canvas preview
Full width, split beside the code, in device frames, or its own tab — so a sketch can take the whole viewport while you tune it.
-
npm for add-ons
p5.sound, p5.dom-style helpers and other libraries install from the npm panel and resolve through esm.sh, so a sketch can reach beyond the core.
-
Multi-file sketches
Split a large sketch across modules — a particle class here, helpers there — with a real file tree, rather than scrolling one enormous file.
-
TypeScript if you want it
Write
.tswith p5's type definitions for autocomplete and checking; types are stripped on the fast path, so it costs nothing at runtime. -
Assets in the tree
Keep images, fonts and sound files in the project and load them in
preload, the same way a local sketch would. -
Git and export
Commit history in the browser through isomorphic-git, and export the sketch as a zip that runs anywhere — no lock-in to this editor.
04 deep dive
Global mode, instance mode and sound
p5 has a couple of structural choices worth knowing, and the editor supports both plus the add-ons that make a sketch more than shapes.
Global mode is the default. setup, draw and functions like circle are available directly, which is why introductory sketches read so cleanly and why it is the mode the starter uses.
Instance mode scales up. Wrapping a sketch in new p5(sketch) namespaces it, so you can run more than one sketch on a page or embed p5 inside a larger app without leaking globals — the mode a real project reaches for.
Sound and media are add-ons. Install p5.sound for audio input, playback and analysis, and load images, fonts and video as assets — the pieces that turn a visual sketch into an audiovisual one.
- global
- setup/draw direct
- instance
- new p5(sketch)
- sound
- p5.sound add-on
- media
- images, fonts, video
new p5((p) => {
p.setup = () => p.createCanvas(300, 300);
p.draw = () => {
p.background(20);
p.circle(p.width / 2, p.height / 2, 120);
};
});05 workflow
From a blank sketch to a running canvas
No install, no build, no dev server — the whole loop from an empty sketch to something moving on the canvas.
- new project → p5.js
- created sketch.js · canvas 400×400
- add motion with frameCount + sin
- canvas animating · circle pulses
- install p5.sound
- resolved via esm.sh · mic input ready
- git commit -m "audio-reactive circle"
- [main 6e0a4c3] audio-reactive circle · 2 files
-
Draw first, configure never
There is no project setup between you and the canvas — open the editor and the first thing you do is draw.
-
The same loop on a tablet
The sketch runs client-side, so an iPad animates it the same way a laptop does, with nothing installed.
-
Share the running sketch
Send a live preview URL and the other person sees it animating, which is how creative coding is meant to be shared.
06 ecosystem
p5.js beside the rest of the toolkit
p5.js is one of many things the editor runs — the same tab compiles a framework, runs a language and animates a canvas, per file.
07 languages
What the editor runs beside p5.js
A p5.js sketch sits beside everything else the editor compiles in the browser, renders natively, or executes on demand.
Compiled in your browser11
Zero build step. Transform runs on a Web Worker, so typing never blocks.
- JSX
- TSX
- TypeScript
- Vue SFC
- Svelte
- Angular (JIT)
- SolidJS
- SCSS
- Sass
- Less
- Pug
Rendered natively8
Straight to the live preview, no transform in the way.
- HTML
- CSS
- JavaScript
- JSON
- Markdown
- Jupyter (.ipynb)
- SVG
- YAML
Executed on demand22
70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.
- Python
- Java
- C
- C++
- C#
- Go
- Rust
- Ruby
- PHP
- Kotlin
- Swift
- Lua
- Scala
- Perl
- Haskell
- Elixir
- Dart
- R
- Julia
- SQLite
- Bash
- PowerShell
08 questions
p5.js in the browser — common questions
How is this different from the official p5.js Web Editor?
The official editor at editor.p5js.org is deliberately minimal and beginner-focused, and it is excellent for that. This one keeps the same instant sketch loop but adds a real file tree, npm packages, TypeScript and Git — for when a sketch grows into a project with modules and dependencies.
Do I need to install anything to run p5.js?
No. p5 loads in the browser and the sketch runs the moment you save, with no build, no dev server and no node_modules. Opening the editor is the whole setup, and it works offline once loaded as a PWA.
Does the canvas update live as I edit?
Yes. The sketch re-runs on save, so a changed color, a new shape or tweaked motion appears immediately — the fast feedback loop that creative coding depends on.
Can I use p5.sound and load images or fonts?
Yes. Install p5.sound from the npm panel for audio input, playback and analysis, and keep images, fonts and video as assets in the project to load in preload — the same as a local sketch.
Does it support instance mode as well as global mode?
Yes. Global mode — setup and draw available directly — is the default and what the starter uses; instance mode with new p5(sketch) namespaces a sketch so you can run several at once or embed p5 in a larger app.
Can I write sketches in TypeScript?
Yes. Use .ts with p5's type definitions for autocomplete and type-checking, and the types are stripped on the same fast pass that compiles the sketch, so there is no extra step at runtime.
Can I split a big sketch into multiple files?
Yes. Projects are multi-file, so a particle class, helpers and the main sketch can live in separate modules with a file tree and tabs, instead of one long scroll — and the whole thing commits with Git.
Do I need to install anything to use XCODX Studio?
No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.
Where is my code stored?
In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.
Is XCODX Studio free?
Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
Nothing to install
Open the p5.js editor now
A sketch animating on screen in under a minute — a live canvas, npm add-ons, with no account wall and nothing to install.