Observable as a canvas instead of notebook (feature wishlist)

After using observable for a handful of projects, its really hard to go back to text editors and program things, the live reload/hot swap feels like the old way of doing things (like updating code and refreshing the full page to see updates once was), thanks to the team for building it. The notebook structure is awesome but if the OHQ team is thinking of any other formats for the future, having a canvas to build cells would be awesome!

(TLDR: Cells are boxes on a canvas instead of paragraphs in a linear document, they get to be moved around and have different styling and a high level toolbox to adjust z-order or hide/lock cells etc.,)

I created a mock UI for this to share here, your feedback and criticism are welcome! Thank you.


Yeah, I wish for more UI control density. Especially when doing something on a canvas, I end up with all my controls going offscreen and I end up doing a lot of scrolling up and down. For me, a horizontal layout of cells would be an amazing addition. Though ideally it would be 2 cells horizontal, one large canvas in the left, a tools on the right, but really the tools should be then vertically layout cells, but I guess that gets pretty complicated fast.

1 Like

That said. I think for a full application I think you just have to stuff a Single Page App e.g. React, in a single cell.

This is definitely something we are thinking about. In the mean time, you may want to just play with different layouts of the in a ‘pretty display’ part of the notebook. I did that in this notebook to create a multi-column layout of cells using a grid template layout.

Not sure if this helps :slight_smile:

1 Like

Thats cool, it’s a variant of stuff a whole app in a single cell. In a normal SPA, we use a top level router to dynamically updates a view. There are some decoupling advantages, the router becomes one “thing” and then the views are decoupled. I wonder we could so something similar, we have a top level SPA holder in one cell, that doesn’t really have much display logic in it (it can be imported by other notebooks without leaking business logic), that then somehow register views via cells from elsewhere.

I love Observable its like uncharted territory. I tried using react with it but it doesn’t exploit the reactiveness very well so its not a particularly good experience. I feel like an Observable router would compose viewof somehow (a composite switchable viewof).

I independently had this idea yesterday and then @thomasballinger told me about this post. :slight_smile: This was when I was lamenting going back to a spreadsheet recently because I wanted a much denser layout of cells. If instead I could place cells in an X/Y space on a canvas anywhere I wanted, that would keep me in Observable more and falling back to spreadsheets less.

It also made me think of Numbers on macOS: it has the (revolutionary, to me) feature of allowing multiple tables per sheet and you can place them where ever you want, just like a chart or other element (text, shapes, images):

This always felt much cleaner and more powerful to me in that you can break up related but not layout-related things. It also has the entertaining/interesting graceful handling of using a spreadsheet to just create multiple lists: