🏠 back to Observable

Suggestions for live monitor use

Observable’s notebook layout lends itself really well to prose and full-width visuals.

My data is less interesting, a lot of repetitive graphs with low visual fidelity. I also have a desire to fit it all on one screen for use on monitors hanging in the office.

One way to make the presentation flow better for my use case is a 2-column layout. Although something more generalized like a gridstack or spreadsheet layout would also capture it.

The other thing that would be nice in these multi-column situations is to make the layout responsive to the browser itself going fullscreen, which is a different behavior than the built-in fullscreen option.

Not sure if I’m representative of your ideal use case, but as an excel and javascript junkie I think Observable is great for building dashboards. The workflow is much nicer than Google Sheets.

The “notebook as dashboard on an office monitor” use case is absolutely one that we’re interested in supporting well.

For now, does using CSS Grid in a large cell, containing your graphs, combined with Observable’s fullscreen option, work well enough?

An example of CSS grid in a fullscreen cell, try opening up Tom’s Mondrian grid notebook in fullscreen mode.


Glad to hear my use case is on the radar! Getting really DOM-fancy inside 1 cell will work, yeah. It’s the excel fan in me that wants the interface to lean slightly more toward a spreadsheet paradigm.

In my opinion, this request raises an interesting question: How indepedent should notebooks be of the observablehq.com environment?

To arrange cells in a grid (without reparenting their output, and without heavy adjustments to each cell’s code) some assumptions would have to be made:

  1. body is the direct parent of all cells
  2. each cell has an “r” prefixed id of the cell’s node id

While the first condition can be replicated when embedding a notebook externally, the second condition is strictly limited to observablehq.com.

1 Like

Here’s a demo of a horizontal scrollable fullscreen layout:


That’s rad. Without a spec in place, I would consider this to be a brittle solution because your notebook could break overnight after a code change from the observablehq team.

With a spec, layouts could be imported from other notebooks. But comes with all the downsides of maintaining a spec as well.