Hey, excellent job on this product so far. It’s very exciting and powerful. I only have some tiny UI feedback for now.
After working with it for a few minutes, I couldn’t figure out how to do one little thing: rearrange cells.
It would be nice to re-arrange cells by dragging the labels that display on the left-hand side (the things that currently say “click to edit” on hover).
Thanks for creating this!
Yes, we’re working on drag-and-drop to reorder cells! A teaser:
In the interim, you can reorder cells using keyboard shortcuts: Option-Command-Up ⌥⌘↑ moves the current cell up, and Option-Command-Down ⌥⌘↓ moves the current cell down.
what about the keyboard shortcut on windows ?
You can move cells using Alt-Ctrl-Up and Alt-Ctrl-Down.
You can read more about keyboard shortcuts here, where they’re also shown for your current platform: Introduction to Notebooks / Observable | Observable
Apparently on windows 10, Alt-Ctrl-Arrow is already bind… I am not able to move cells with that shortcut.
P.S. Alt-Tab is also bind to switch applications similar as Command+Tab on mac…
Some updates!
On Windows, we now use Alt-Shift-Down and Alt-Shift-Up to cycle focus between cells.
This was incorrectly documented: it’s Alt-Command-Arrow on both platforms, not Alt-Ctrl-Arrow.
Hope that helps with our Windows support, unfortunately keybindings are kind of a game of battleship, with overlap at the OS, hardware, and software level.
Refer to the Help menu (under your user icon in the top right) and that will show you platform-specific keybindings for editing, as long as you’re on a notebook page.
Thanks Tom.
The original document I referred to is https://beta.observablehq.com/@mbostock/introduction-to-notebooks. It still shows Alt-Ctrl-Up and Alt-Ctrl-Down right at the bottom.
I now see that Alt-Command-Arrow works (I didn’t realize that Command meant the Windows key.) So that answers my question.
I’ve fixed the intro notebook. Thanks for letting me know, @john-clarke!
Thanks all. Having fun figuring this all out. What an amazing tool. Congrats on your launch.
Hi! Have a couple of suggestions! Not sure what’s the feasibility for implementation but here they are:
That’s all for now!
Best,
Andrew Tay
This is partially solved. Click your icon in the upper right and then find “Help”. It shows a list of keyboard shortcuts (including a shortcut for moving cells). They may not work on all platforms (Change cell focus does not work on windows, move cells up/down does).
I also didn’t know that Windows key = Command key, I’m not sure how common knowledge this is
I am sure you’ve been there if you have developed JS notebooks on this system or Python notebooks in the past:
You created a comprehensive notebook with multiple sections, proper introduction, some data visualization, a section of cells with toggles to control your inputs and outputs, references and imports section, and then you decide to rearrange your notebook for the final published draft prior to sharing it with the world.
Rearranging cells on pretty much all notebooking systems like observable is a tedious and arduous task of copy, create, paste delete cells especially if you are moving toggle controls, or a bunch of defined functions, etc.
Would not it be much faster and more productive with a simple UX change if you could just simply drag and drop a cell by the cell label or some other ‘grab cell’ control to move it anywhere up or down in the notebook document?
I’d even take it further and suggest an md header cell (md #...) with other cells below till next such cell could be used for grouping, collapcing, and moving whole sections of the document
@mike, @tom and observablehq devs crew: your thought on this notebook rearrange streamline UX bit? 
I’d even take it further and suggest an md header cell (md
#...) with other cells below till next such cell could be used for grouping, collapcing, and moving whole sections of the document
What I would most like to see is an API that supports both loading and saving notebooks. Then it would be possible to make an external tool supporting whatever kind of cell rearrangement UI anyone could ever want (among many other possible tools), without burdening the Observable staff directly or needing complicated additional first-party UIs.
I agree with @jrus. I am still itching to do an Electron app that would have custom cell renderers/decorators, options for different code formaters, with UX niceties like moving whole sections of the notebook document, plus cells bookmarking I brought up in the past.
see Observable Electron app idea
and Feature request(s): export all + search my notebooks
There are endless possibilities 1 could explore building custom UIs on top of observable to fit different workflows without overburdening this system devs, provided a well defined notebook spec and api.
I’ve looked at observablehq/notebook-runtime and notebook-inspector repos just yesterday. I think it should be almost possible, but I have not tried it yet.
found this open ticket in github that I think is destined for providing those features: https://github.com/observablehq/notebook-inspector/issues/14#issue-325007279
not sure. would need observable devs to chime in on this
also, load from and post notebook to github and gitlab would nice once load/save api is available. could be done by 3rd party devs too to fit diff. notebooks dev workflows.
.@jrus based on this response from @mbostock I suspect load/save notebook api is not in the current roadmap:
One could probably do it via raw XHR to observable api, but I don’t know if I would want to go there. would require some time to reverse engineer those calls. not impossible, but would be time consuming and hacky AF.
I’ll wait for the official public API and open source of observable for private hosting, etc. others have requested on this forum similar to how one can do with Jupyter notebooks today.
Whoops, I accidentally set the TODO date for this feature in January 2019 instead of 2018. But anyway,
You can now drag & drop cells in Observable - just drag the ⠇ icon in the gutter.
Update: dragging has acquired
