Jump to content

Embedding a javascript simulation that uses the p5 library and a custom script

Recommended Posts


I am trying to add a simulation to my website. I have everything running with javascript and an index.html on my local workspace, but am wondering how to place it in an online page. I have tried using code injection, but have failed miserably.

I am using the p5.js library for visualization and a local script called Boids-2D .

Does anyone know where and how to put this? Sorry if it is super easy, but I am very new to web development. 



This is my local index.html code

<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2D Boids</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
    <script type="text/javascript" src="Boids-2D.js"></script>
Link to comment

Ok, so I have figured it mostly out. But I am still getting some issues.

The remaining issue is that my window is in the wrong place and it is just above the footer, while it should be sandwiched between two texts, where the code block is.

I have injected into a code block this as html:

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2D Boids</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>


Link to comment
  • 10 months later...
  • 1 month later...


I found an excellent reference that helps resolve this. (I'm working on a member's area I'll update with a live example soon).


1. insert a HTML block with a <div id="some-label">  where you want your canvas to appear

2. augment your p5.js code (presumably in another nearby block) per the link below. e.g. add a .parent("some-label"); attribute to whatever you called your canvas.

Specifically go to the section on "Relocating the canvas"


Live example to come. Good luck!



Edited by SeanForScience
wrong subtag in div
Link to comment
On 2/22/2022 at 1:52 PM, TheLatentSpace said:

Hi, did you have to reference the p5js library somehow? I want to use a sketch that I made in p5js web editor and put it on the home screen of my SquareSpace website. Do I just use a code block? 

Yeah. Two steps.


Step 1. You need to copy his block and insert it in the header "injection" area. You can do that with that particle page's "Settings > Advanced > Page header code injection".

Copy the <script src="library-url-reference-here"></script> tags into that area.

Step 2. Insert the "<script> // code </script>" directly in an HTML code block on your page.  I know it's Java script but keep it as an HTML block in this fashion. Also make sure you turn off "Display source code".

Optional Step 3. see my comment viz. positioning.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.