# Include p5.js in Observable notebook

**URL:** https://discourse.processing.org/t/include-p5-js-in-observable-notebook/458
**Category:** p5.js
**Created:** [May 28, 2018, 8:51am UTC](https://discourse.processing.org/t/include-p5-js-in-observable-notebook/458 "2018-05-28T08:51:50Z")
**Posts on this page:** 1
**Showing post:** 4

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [May 29, 2018, 7:58pm UTC](https://discourse.processing.org/t/include-p5-js-in-observable-notebook/458/4 "2018-05-29T19:58:12Z")

</div>

Here is a template for Observable p5.js notebooks:

- [p5.js sketch on Observable: Template](https://beta.observablehq.com/@jeremydouglass/p5-js-sketch-on-observable-template) (forkable template by me)

Also, Tom MacWright has created a helper function which you can import into a notebook to get started quickly, as well as a template with it already in-place:

- [p5 (twcw tutorial)](https://beta.observablehq.com/@tmcw/p5-basic-example)
- [p5 basic example](https://beta.observablehq.com/@tmcw/p5-basic-example) (forkable template)

These are instance mode sketches,and you need to prefix _everything_ – get ready write `sketch.foo` `sketch.bar` `sketch.baz` `sketch.etc`…

~~One thing I discovered while writing the first template is that the sketches work well, but you cannot currently include libraries like p5.dom and p5.sound in Observable notebooks. I have an [open question](https://talk.observablehq.com/t/importing-a-typescript-module/526/10) about that.~~

**Edit:** : Including p5.dom in Observable is quite possible – there is a trick to it, shared by twcw and now included in my template notebook (linked above).

---

_[View the full topic](https://discourse.processing.org/t/include-p5-js-in-observable-notebook/458)._
