# 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](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:

```bash
node -v
```

To check the version of npm, use this command:

```bash
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:

%[https://blog.aashish-panthi.com.np/install-node-and-npm-using-linux-binaries] 

Or, take [this article](https://dev.to/aashishpanthi/3-easy-ways-to-install-nodejs-in-linux-lc4) 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:

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

After installing `nvm`, restart your terminal and then:

```bash
nvm install 16.14.2
nvm use 16.14.2
```

Verify:

```bash
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](https://github.com/processing/p5.js-web-editor)
    
2. Click the **Fork** button (top right)
    
3. After forking, clone your copy to your machine:
    

```bash
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:

```bash
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](https://code.visualstudio.com/download). However, if you have then you can use the following command on your terminal to open up the project inside the code editor.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748886609375/93224c3f-3d2e-4310-b03b-085176ffe27b.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748886854911/31d28402-e0a5-48c7-b2c1-64c4ac2ce13f.png align="center")

---

## 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:

```bash
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:

```bash
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:

```bash
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/](https://docs.mongodb.com/manual/installation/)

Once installed, start the service:

```bash
mongod --dbpath /your/custom/path
```

Or, if you’ve a Mac, then you can install [Homebrew](https://brew.sh/) to install any packages. If you don’t have Homebrew, paste the following command on your terminal to install it:

```bash
/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](https://brew.sh/#:~:text=If%20you%27re%20on%20macOS%2C%20try%20our%20new%20.pkg%20installer.).

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

```bash
brew tap mongodb/brew
```

Then

```bash
brew install mongodb-community
```

Finally, start the server with

```bash
brew services start mongodb-community
```

> 🧪 Tip: You can use [MongoDB Compass](https://www.mongodb.com/products/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.

```bash
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:

```bash
npm start
```

By default, the app will be available at:

👉 [http://localhost:8000](http://localhost:8000)

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1748888450672/d4f0f7e9-a211-4ab9-bf79-f1d329e35e90.png align="center")

---

## Optional: Resetting the Local Database

During development, you might want to reset your database:

```bash
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:

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

### ❌ MongoDB Not Connecting?

✅ Check if MongoDB is running:

```bash
ps aux | grep mongod
```

✅ Or try restarting:

```bash
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](https://editor.p5js.org/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](https://github.com/processing/p5.js-web-editor/issues).

Happy hacking! 💻✨