# Anyone tried Observable? It looks awesome!

**URL:** <https://discourse.processing.org/t/anyone-tried-observable-it-looks-awesome/10112>\
**Category:** p5.js\
**Created:** [April 9, 2019, 5:03am UTC](https://discourse.processing.org/t/anyone-tried-observable-it-looks-awesome/10112 "2019-04-09T05:03:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Oskar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oskar/32/5906_2.png) [@Oskar](https://discourse.processing.org/u/Oskar)\
**Post date:** [April 9, 2019, 5:03am UTC](https://discourse.processing.org/t/anyone-tried-observable-it-looks-awesome/10112/1 "2019-04-09T05:03:22Z")

</div>

So, I stumbled into this while browsing D3’s website. I think it looks pretty awesome, and may be useful for some members in the community. @kll would something like this help out with what you were looking for?

[https://observablehq.com/](https://observablehq.com/)

---

<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:** [April 10, 2019, 3:10pm UTC](https://discourse.processing.org/t/anyone-tried-observable-it-looks-awesome/10112/2 "2019-04-10T15:10:10Z")

</div>

Yes, we had a conversation about observable and p5js integration last year, and I forked a template for it from work by Jeremy Wong:

> [@Include p5.js in Observable notebook](https://discourse.processing.org/t/include-p5-js-in-observable-notebook/458/4):
>
> 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 wri…

Observable has been under rapid development, so I believe that the template may need to be updated – or may be superseded if p5 has been better integrated into the core – I haven’t looked recently.

Searching for p5.js / p5:

- [Search p5.js | Observable](https://observablehq.com/search?query=p5.js)
- [Search p5 | Observable](https://observablehq.com/search?query=p5)

…here is an example p5 on Observable sketch:

> **[Breathing Cube in P5.js](https://observablehq.com/@hydrosquall/breathing-cube-in-p5-js)**
>
> Making this Bees and Bombs GIF with p5.js, with the help of d3's scale and color functions. Thanks to Daniel Shiffman for his very detailed tutorial! https://www.youtube.com/watch?v=H81Tdrmz2LA gif Stage 1: Breathing Rectangle - Simple Harmonic...

---

<div class="post-metadata">

**Author:** ![Oskar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/oskar/32/5906_2.png) [@Oskar](https://discourse.processing.org/u/Oskar)\
**Post date:** [April 15, 2019, 10:15pm UTC](https://discourse.processing.org/t/anyone-tried-observable-it-looks-awesome/10112/3 "2019-04-15T22:15:21Z")

</div>

@jeremydouglass

Thanks for sharing! It looks like a really powerful tool. It actually feels smoother than Jupyter Notebooks for Python.

I’ve noticed they’ve been making slight changes to the code and their UI over the last few months, so you’re right about the whole active development thing.

I’m drooling over the way it can present code and visualizations. I wonder if it’s possible to somehow plug Lottie into it. 🤔