Setting Up the p5.js Web Editor for Local Development: A Beginner-Friendly Guide

The p5.js Web Editor is an intuitive, browser-based platform for creative coding with JavaScript. It allows artists, designers, and educators to dive into coding visually, without needing to set up any development environment. But what if you're a developer who wants to run the editor locally, contribute to its development, or customize it for your creative platform?

In this blog, we'll walk through the entire process of setting up the p5.js Web Editor locally, breaking it down into digestible steps—each explained with the “why,” not just the “how.” Whether you're contributing to open source for the first time or just want to tinker with a cool tool, this guide is for you.

If you want the official guide, you can visit this link: https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/README.md. If you have a problem with this, follow this guide.

---

Why Set It Up Locally?

Running the p5.js Web Editor locally can benefit you in many ways:

• ✅ Customize or extend its features

• ✅ Contribute back to the open-source project

• ✅ Debug and explore the code (understand how real software is written)

• ✅ Work offline or in educational settings with limited (unstable) internet access

Let’s get started!

---

Step 1: Prerequisites – Tools You Need

Before starting, please make sure you’ve a few tools installed on your system. These are the foundational pieces every JavaScript developer should be familiar with.

1. Node.js and npm

The editor is a Node.js application, so make sure you have:

• Node.js v16.14.2

• npm v8.5.0

To check the versions of node, use this command:

node -v

To check the version of npm, use this command:

npm -v

If you see a different version than the versions mentioned above, I recommend that you change to the mentioned version. There are multiple ways to do that. If you’re on linux, you might like this article:

Or, take this article and video attached as a guide.

However, I highly recommend using nvm (Node Version Manager) so you can manage multiple Node versions with ease.

To install nvm, open your terminal and run:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

After installing nvm, restart your terminal and then:

nvm install 16.14.2
nvm use 16.14.2

Verify:

node -v    # Should show v16.14.2
npm -v     # Should show v8.5.0

---

Step 2: Fork and Clone the Repository

We’ll work with a fork of the original p5.js Web Editor repository so you can push your changes later if you want.

1. Go to https://github.com/processing/p5.js-web-editor

2. Click the Fork button (top right)

3. After forking, clone your copy to your machine:

git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git

Replace YOUR_USERNAME with your github account username that you used to fork the repository.

After you clone the repository on your local system, let’s move to the folder inside:

cd p5.js-web-editor

Now, to view the code or to perform any operations on it, we need to open it up the code in an editor. I prefer VS Code, which is free to use. If you don’t have download it from here. However, if you have then you can use the following command on your terminal to open up the project inside the code editor.

Once you press Enter, you should see something like this:

---

Step 3: Understanding the basic Project Structure

Here’s a quick overview to make you feel at home in the codebase:

• server/: Express backend server for authentication, file handling, etc.

• client/: React-based frontend for the web editor

• .env: Environment variables for sensitive settings

• package.json: Declares dependencies, scripts, and metadata

---

Step 4: Install Dependencies

If you try to start the server, you’ll receive an error message. That’s because the editor uses many libraries and dependencies. Installing them is straightforward:

npm install

This reads the package.json file and downloads all required modules into the node_modules directory.

If you run into issues, try cleaning the cache and reinstalling:

npm cache clean --force
rm -rf node_modules
npm install

Now that we have all the required packages, we can try starting the server. If you look at the package.json file, then you’ll find the start command:

npm start

However, this will give you some error. At the end of the message, you’ll find this: [nodemon] app crashed - waiting for file changes before starting... and on top it says: Error: Parameter "key" is required. To resolve this problem, you need to follow the following steps.

---

Step 5: Setting Up the Database (MongoDB)

The Web Editor stores sketches and user information in a MongoDB database.

Option 1: Install MongoDB Locally

Follow the official guide for your OS:
👉 https://docs.mongodb.com/manual/installation/

Once installed, start the service:

mongod --dbpath /your/custom/path

Or, if you’ve a Mac, then you can install Homebrew to install any packages. If you don’t have Homebrew, paste the following command on your terminal to install it:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Or, you can install the homebrew with the new .pkg installer. The instructions are here.

Here is how you can install and run MongoDB using brew:

brew tap mongodb/brew

Then

brew install mongodb-community

Finally, start the server with

brew services start mongodb-community

🧪 Tip: You can use MongoDB Compass to visually inspect your database and collections.

---

Step 6: Configure Environment Variables

The project uses a .env file to store settings like database connections and GitHub OAuth credentials.

You don’t have to configure everything to run the app locally, but you still need a .env file.

cp .env.example .env

The above command makes a copy of .env.example file into .env file. You can open .env in a text editor and make changes later if you need GitHub login or production features.

---

Step 7: Launching the App

With everything set, you can now start the server:

npm start

By default, the app will be available at:

👉 http://localhost:8000

You should see a fully working p5.js Web Editor interface!

---

Optional: Resetting the Local Database

During development, you might want to reset your database:

npm run reset-local-db

This clears all data and resets the state. Very handy for testing new features!

---

Common Issues and Fixes

❌ Error: Permission Denied on npm install

✅ Try:

sudo chown -R $USER:$GROUP ~/.npm

❌ MongoDB Not Connecting?

✅ Check if MongoDB is running:

ps aux | grep mongod

✅ Or try restarting:

brew services restart mongodb-community

❌ GitHub Login Doesn’t Work

✅ You need to register a GitHub OAuth App and add your CLIENT_ID and CLIENT_SECRET to your .env.

---

Contributing to the Project

If you’re planning to contribute, here are a few bonus tips:

• Follow the code style and naming conventions in the existing codebase.

• Open pull requests only after thoroughly testing your changes.

• Be respectful and follow the code of conduct.

---

Final Thoughts

The p5.js Web Editor is more than just a playground—it's an ecosystem that empowers artists, students, and coders to express themselves through code. You gain full access to its engine room by running it locally, and play with it.

💬 Got stuck or found a bug in this guide? Feel free to leave a comment or contact me. If you find a bug in the p5.js web editor, open an issue on GitHub.

Happy hacking! 💻✨