# Help extending p5 and dependencies in web dev

**URL:** <https://discourse.processing.org/t/help-extending-p5-and-dependencies-in-web-dev/44421>\
**Category:** Coding Questions\
**Created:** [May 14, 2024, 12:34am UTC](https://discourse.processing.org/t/help-extending-p5-and-dependencies-in-web-dev/44421 "2024-05-14T00:34:58Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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 14, 2024, 2:40am UTC](https://discourse.processing.org/t/help-extending-p5-and-dependencies-in-web-dev/44421/3 "2024-05-14T02:40:52Z")

</div>

Here’s a simple template that makes p5 globally available, but still controls when p5 is instantiated:

* * *

## index.html:

```auto
<script defer src=//cdn.JsDelivr.net/npm/p5></script>
<script type=module src=index.mjs></script>

```

* * *

## index.mjs:

```js
import runSketch from './sketch.mjs';
runSketch(); // Invoke this after all the rest is ready!

```

* * *

## sketch.mjs:

```js
export default function runSketch() {
  // Make p5.js callbacks globally visible:
  globalThis.preload = preload;
  globalThis.setup = setup;
  globalThis.draw = draw;
  globalThis.windowResized = windowResized;

  globalThis.mocha = 'Hack to block p5.js auto global instantiation.';
  p5.instance || new p5; // Globally instantiate p5.js if it hasn't already.
  globalThis._setupDone = void 0; // Suppress duplicate imported warning.
}

function preload() {
}

function setup() {
}

function draw() {
}

function windowResized() {
}

```

* * *

---

_[View the full topic](https://discourse.processing.org/t/help-extending-p5-and-dependencies-in-web-dev/44421)._