Skip to content
← Back to Community
Setting Up p5.js in Repl
Profile icon

What is p5.js?

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!

As quoted from the p5.js website.

How will we be "including" p5.js?

We will be using p5.js's CDN so we don't have to faff around with extra files. We will also be using the minified files as they load faster, making the creation and use much more fluid.

Let's Do this!

All you have to do is include the following tags, and you're all set!

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src=""></script> <script src=""></script> <script src=""></script> </head>

Also make sure to include your javascript file which will be using the p5.js framework in the head or body of the html file. Here is some template code for that script.js file:

function setup(){ // When website starts createCanvas(windowWidth, windowHeight); } function draw(){ // Runs in a loop background(50); }

It's recommended that you create a css file or some style tags to make the borders of the canvas reach all the way to the top left edge, eliminating the scroll as well. You can do this like so:

html, body { margin: 0; padding: 0; } canvas { display: block; }


It's just that easy! If you need help, the you can view the docs, or the p5.js website for more information.

Have fun creating!

If you have any suggestions for tutorials, leave them in the comments and I'll be sure to have a look. If you like one in the comments, then give it an up vote to show that you want to see it. It makes my life so much more easier. Thanks in advance!

Profile icon
Profile icon
Profile icon
Profile icon
Profile icon
Profile icon

How do I put the library functions onto It is not working for me.

Profile icon

@BB23 I have the same problem.
How do I fix it?

Profile icon

@BB23 I as well have come across this problem.

Profile icon

Yey p5 is nice.

Profile icon
Profile icon

How do I get syntax highlight like in the example code?

Profile icon

There is one problem though, I can't stop it running