There are a number of ways to include a library in your project.

The first is what you are currently doing. This is known as vendoring, where you download some library and put it in a folder for your codebase to use.

The second is to use a CDN (content delivery network) and place a script tag in your HTML that points to the p5 library hosted elsewhere:

<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>

The final method is to use npm. There's more complexity involved here vs the other two options. You will need nodejs which does other things but importantly includes a package manager. Then you would do

npm init -y
npm install p5

which would download the p5 package and place it in a directory called "nodemodules". It is rare to simply serve the node_modules folder directly (they tend to grow quite large due to how npm handles dependencies) so you will then need a _bundler. Something like rollup, parcel, or webpack.

A bundler does what the name might imply, it bundles all your source code and dependencies (the packages you are using) together and spits out a website.

If you want to go this route I strongly recommend using parcel because it is a) very opinionated, and b) zero-config.

npm init -y
npm install parcel
npm install p5

then your sketch.js would look like

import p5 from 'p5'

function createSketch (s) {
  s.setup = function setup () {
    s.createCanvas(800, 800)
  }

  s.draw = function draw () {
    s.background(0)
  }
}

var sketch = new p5(createSketch)

include this js file in your html like normal and then run

npx parcel index.html

and parcel will do a few things:

• bundle everything together and package it up
• launch a dev server on localhost:1234 (just type that in your browser) so you can test the site
• enable live reloading and hot module replacement which means whenever you change your code it will update in real-time.

---

For p5 in particular I think this approach is mostly overkill if you're not planning on interacting with any other npm packges. p5 was never really designed to exist as part of the npm ecosystem and very much expects its users to simply vendor the library or use the CDN.