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!
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
npm -v
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.
Go to https://github.com/processing/p5.js-web-editor
Click the Fork button (top right)
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.
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! 💻✨
