Skip to content
An opinionated way to publish Observable (observablehq.com) notebooks.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
examples
src
.gitignore
LICENSE
README.md
_config.yml
package-lock.json
package.json
webpack.config.js

README.md

observable-press

An opinionated way to publish Observable notebooks.

The core idea is to do all your coding in your notebook, write an HTML skeleton for its presentation, and let observable-press glue it all together.

The Observable Runtime makes this pretty easy to do with no library, but observable-press adds a consistent pattern that allows you to write zero code outside your notebook, and also adds some small conveniences (initial loading indicator, new height builtin).

Simplest Example

code // demo // source notebook

A very simple example looks like this:

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="style.css">
  <script src="observable-press.js" data-notebook="@zzzev/slit-scan-effect" data-override-height></script>
</html>

First, we include some simple default styles. These are optional, though you will need some similar styles if you want to have full-window rendering with no margins.

Then, we include the observable-press library in a script tag. The data-notebook attribute on this tag is used to specify the notebook that should be loaded.

data-override-height is an optional attribute, if present it will delete the named variable height from the notebook (which causes it to instead use the builtin provided by observable-press which matches window height).

Because there are no HTML nodes in the document with data-cell set, the library picks the first "content-like" variable in the notebook and renders it into the body.

Using data-cells and .loading

code // demo // source notebook

A slightly more complex example has an HTML body like this:

<div class="ui" data-cell="viewof reverse"></div>
<div class="override-height" data-cell="canvas"></div>
<div class="loading">loading...</div>

This includes two tags with data-cell attributes, which will be populated by the matching named variables from the notebook. Since there's at least one explicitly specified data-cell, it won't pick one automatically. Note that viewof must be included in the cell name if you want to render the view of a variable.

This also includes a tag with the class loading, which will be automatically removed once the specified data-cells have all rendered at least once. This makes it easy to include a simple loading indicator.

Other Examples

Pantry Nutrition Explorer

code // demo // source notebook

TODO List

code // demo // source notebook

Based on TodoMVC.

Animated Average Images

code // demo // source notebook

Note: the animation in this notebook is somewhat choppy.

Troubleshooting

If your notebook has special CORS access rules set up, it probably won't work if rehosted on a different domain.

TODOs

  • Nicer default loading indicator
  • Better pending/error indication

Licensing

observable-press is MIT licensed

Notebooks published on Observable without an explicit license are licensed under the terms described here, and cannot be freely re-used on a different site unless you are the original author or have permission.

This project is not affiliated or endorsed by Observable, Inc.

You can’t perform that action at this time.