p5.js › Starter › Article 2

Setting Up Your Environment

Three ways to start coding with p5.js — pick the one that suits you.

⏱ 15 min read setup tools editor

Three paths to get started

There is no single correct setup. Here are your options, from quickest to most capable:

  1. p5.js Web Editor — zero installation, works in any browser
  2. CDN in a local HTML file — one HTML file, any text editor
  3. VS Code + Live Server — the full local development experience

Start with option 1 if you just want to try things out. Move to option 3 when you want version control, multiple files, or offline work.

Option 1: The p5.js Web Editor

Go to editor.p5js.org. You’ll see a split-screen editor with a code panel on the left and a canvas preview on the right.

The default sketch is already there:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Click the ▶ Play button (or press Ctrl+Enter / Cmd+Enter). The canvas fills with a grey background. You’re running p5.js.

Creating an account

You don’t need an account to write code, but you do need one to save sketches. Sign up at the top right — it’s free. Once logged in, your sketches are saved automatically and each gets a shareable URL.

Option 2: CDN in a local HTML file

Create a folder somewhere on your computer. Inside it, create a file called index.html and paste this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My p5 Sketch</title>
  <style>
    body { margin: 0; background: #000; display: flex; justify-content: center; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.min.js"></script>
  <script>
    function setup() {
      createCanvas(800, 600);
    }

    function draw() {
      background(20);
      fill(200, 100, 255);
      circle(mouseX, mouseY, 40);
    }
  </script>
</body>
</html>

Open this file in your browser. A purple circle follows your cursor.

Check the CDN version number. The 1.11.0 in the URL above may not be the latest. Visit p5js.org/download to find the current release and update accordingly.

Option 3: VS Code + Live Server

This setup gives you a proper editor with autocompletion, syntax highlighting, and a development server that auto-reloads when you save.

Step 1: Install VS Code

Download from code.visualstudio.com and install it.

Step 2: Install the Live Server extension

Open VS Code, go to the Extensions panel (Ctrl+Shift+X), search for Live Server by Ritwick Dey, and install it.

Step 3: Download p5.js

Go to p5js.org/download and download the complete library (the .zip file). Extract it.

Step 4: Project structure

Create this folder structure:

my-sketch/
├── index.html
├── sketch.js
└── libraries/
    └── p5.min.js   ← copied from the download

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Sketch</title>
  <style> body { margin: 0; } </style>
</head>
<body>
  <script src="libraries/p5.min.js"></script>
  <script src="sketch.js"></script>
</body>
</html>

sketch.js:

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(20);
}

function draw() {
  background(20, 20, 20, 10);
  stroke(100, 200, 255);
  strokeWeight(2);
  line(pmouseX, pmouseY, mouseX, mouseY);
}

Open the my-sketch folder in VS Code, right-click index.html, and choose Open with Live Server. Your browser opens and the sketch runs. Any time you save sketch.js, the browser reloads automatically.

Choosing a code editor

If you stick with local development, a few editors worth knowing:

Editor Cost Why use it
VS Code Free Best extensions, most widely used
Cursor Free/Paid VS Code + AI code completion
Zed Free Very fast, macOS/Linux
Sublime Text Free/Paid Lightweight, fast startup

For this tutorial series, the examples all work in any of the above, or in the web editor.

Key takeaways

  • The p5.js web editor is the fastest way to start — nothing to install
  • A single HTML file with a CDN link works for simple local sketches
  • VS Code + Live Server is the recommended setup for serious projects
  • Always pin a specific p5.js version to avoid unexpected breaking changes