# Help with integrating a Javascript p5 file into HTML

**URL:** https://discourse.processing.org/t/help-with-integrating-a-javascript-p5-file-into-html/20962
**Category:** Beginners
**Created:** [May 17, 2020, 11:11am UTC](https://discourse.processing.org/t/help-with-integrating-a-javascript-p5-file-into-html/20962 "2020-05-17T11:11:46Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Noaaaa](https://avatars.discourse-cdn.com/v4/letter/n/ebca7d/32.png) [@Noaaaa](https://discourse.processing.org/u/Noaaaa)
#### Post date: [May 17, 2020, 11:11am UTC](https://discourse.processing.org/t/help-with-integrating-a-javascript-p5-file-into-html/20962/1 "2020-05-17T11:11:46Z")

</div>

Just started trying to learn HTML, and I’m having trouble using a Javascript file within it. I want to use the p5.js Javascript library and I have created a canvas within a file called sketch.js. Why does only my H1 show up when I run the HTML? Sorry for being a big noob, here’s the HTML code:

```auto
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Web Page</title>
 <script src="/sketch.js"></script>
</head>

<body>
 <h1>Hello World!</h1>
</body>

</html>

```

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [May 17, 2020, 12:12pm UTC](https://discourse.processing.org/t/help-with-integrating-a-javascript-p5-file-into-html/20962/2 "2020-05-17T12:12:43Z")

</div>

> [@Noaaaa](#):
>
> Why does only my H1 show up when I run the HTML?

B/c you aren’t loading the p5.js library within your HTML file, just your “sketch.js” file: ⚠

> [@Sketch is displayed twice inside my index.html page](https://discourse.processing.org/t/sketch-is-displayed-twice-inside-my-index-html-page/15335/9):
>
> My advice is to begin w/ a minimum runnable “index.html” template file like this 1: bulb \<script defer src=https://Unpkg.com/p5\>\</script\> \<script defer src=sketch.js\>\</script\> Once verified it’s working, you can add more stuff to it little by little. sunglasses Here’s some online sketch using this very same minimum template: smile_cat

---

<div class="post-metadata">

### Author: ![Noaaaa](https://avatars.discourse-cdn.com/v4/letter/n/ebca7d/32.png) [@Noaaaa](https://discourse.processing.org/u/Noaaaa)
#### Post date: [May 17, 2020, 12:35pm UTC](https://discourse.processing.org/t/help-with-integrating-a-javascript-p5-file-into-html/20962/3 "2020-05-17T12:35:03Z")

</div>

Of course! Thanks so much 😀

Still not 100% how this works as the src I’m using points to a page instead of somewhere in my files where I have saved p5.js, but I used this line in the head tag:

```auto
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

```

and it’s finally displaying my code, thanks!
