# Code being displayed in Browser instead of sketch

**URL:** <https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405>\
**Category:** Beginners\
**Created:** [March 22, 2023, 2:03pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405 "2023-03-22T14:03:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 22, 2023, 2:03pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/1 "2023-03-22T14:03:15Z")

</div>

Hi there!

I have a very newbie question. I recently installed the P5.js library within Sublime and installed as well the Browser Sync add-on.

I’ve created a subfolder called Sketches which contains the index.html file and the very first sketches I’ve created so far. Everything was working fine until I changed the title in the index.html file from “example” to “Ball” (my sketch is a bouncing ball).

Now the sketches don’t show up in my browser anymore, instead, I have the code that is displayed as plain text in the browser page.

I tried to switch back the title of the index.hml file to “example”, delete the file and replace it, tried to launch the example sketches, but nothing works! I still get the code being displayed in the browser instead of the sketch.

How can I fix this issue?

Thanks a lot in advance!

---

<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:** [March 22, 2023, 2:17pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/2 "2023-03-22T14:17:00Z")

</div>

Usually I don’t install anything. I just grab everything online inside “index.html” file:

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

```

The HTML file above remotely downloads “p5.js” library and then locally loads a “sketch.js” file.

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 22, 2023, 2:40pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/3 "2023-03-22T14:40:20Z")

</div>

Thanks! That works!  
Still, I don’t get why changing the title in the “index.html” file then switching it back broke everything?

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 22, 2023, 5:27pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/4 "2023-03-22T17:27:49Z")

</div>

Unfortunately, I’m still running in the same issue. I worked once, but now I’m still getting my text code appearing in the browser and not the sketch ☹

---

<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:** [March 22, 2023, 5:45pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/5 "2023-03-22T17:45:11Z")

</div>

Got no idea either! You should post your whole project folder on GitHub so we can take a look:

> **[Build software better, together](https://github.com/new)**
>
> GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 330 million projects.

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 22, 2023, 5:46pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/6 "2023-03-22T17:46:49Z")

</div>

Thanks! Will do that!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 23, 2023, 10:49pm UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/7 "2023-03-23T22:49:44Z")

</div>

Hi @Alesk1969,

Can you show the content of your `index.html` file? Also how did you installed p5.js, by downloading the library as .js/.min.js files or using a Sublime special extension?

---

<div class="post-metadata">

**Author:** ![Alesk1969](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alesk1969/32/8098_2.png) [@Alesk1969](https://discourse.processing.org/u/Alesk1969)\
**Post date:** [March 24, 2023, 8:50am UTC](https://discourse.processing.org/t/code-being-displayed-in-browser-instead-of-sketch/41405/8 "2023-03-24T08:50:44Z")

</div>

Hi Josephh,

Here is the content of the index.html file. I downloaded the library then added it to Sublime. It worked for a while, then stopped working when I change the title.

I actually tried again GoToLoop suggestion and it works that way (sorry GoToLoop for not answering earlier).

Thanks !

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
      background-color: #1b1b1b;
    }
  </style>
  <script src="../p5.min.js"></script>
  <!-- <script src="../addons/p5.sound.js"></script> -->
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>

```