How to Download and Use the p5.js Library

p5.js is a JavaScript library for creative coding, and you can get it in two ways: download the library files from the official site, or link to a hosted copy (CDN) in your HTML. For most beginners and quick sketches, the CDN route is fastest because there is nothing to manage locally. Downloading is useful when you want an offline copy, a fixed version, or to work without an internet connection. Either way, you end up with a p5.js file loaded into an HTML page, and then you write your sketch in JavaScript.

Getting p5.js

The official site, p5js.org, provides a Download entry on its homepage. From there you obtain the library file you will include in your project.

You have two practical options:

The site also links to the library reference and examples, which are the two resources you will use most once the library is loaded.

Using p5.js in an HTML page

A p5.js project is just an HTML file plus your sketch code. The library must be loaded before your sketch runs.

Step 1: Create an HTML file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My p5.js sketch</title>
    <!-- Load p5.js here -->
  </head>
  <body>
    <!-- Your sketch code goes here -->
  </body>
</html>

Step 2: Load the library

If you downloaded p5.js, reference the local file:

<script src="p5.js"></script>

If you are using a CDN, reference the hosted URL instead. The exact URL depends on the version you choose, so copy the current link from the official site rather than guessing it.

Step 3: Write your sketch

p5.js sketches define two functions: setup() runs once, and draw() runs repeatedly.

<script>
  function setup() {
    createCanvas(400, 400);
  }

  function draw() {
    background(220);
    circle(200, 200, 100);
  }
</script>

Expected result: opening the HTML file in a browser shows a 400×400 canvas with a gray background and a circle drawn in the center.

Verifying it works

• The canvas appears in the page at the size you passed to createCanvas().
• draw() runs continuously, so anything you animate updates frame by frame.
• If nothing appears, check the browser console: a failed script load or a typo in a function name will show up there.

Common sticking points

• Script order. Your sketch code must come after the p5.js <script> tag, or createCanvas and the other p5.js functions will not exist yet.
• File path. If you downloaded p5.js, the src path must match where the file actually sits relative to your HTML file.
• One canvas per sketch. Calling createCanvas() more than once creates multiple canvases; keep it in setup().
• Version drift. A CDN link points at whatever version that URL serves. If you need reproducible behavior, download a specific version instead.

Where to go next

Once the library loads, the official reference documents every function, and the examples show complete working sketches you can read and modify. Starting from a small example and changing one value at a time is the quickest way to confirm your setup is correct before writing a sketch from scratch.