Create faster with the Add Cell Menu

Observable supports your data journey with snippets, components, and examples. With the new Add Cell Menu, you now have dozens of building blocks at your fingertips. Just click :heavy_plus_sign: or type ⌘cmd​:leftwards_arrow_with_hook:︎return to get started. We’ve also rewritten our code snippets to be immediately executable with sample data for a quick preview.

Learn more about the add cell menu. Here

2 Likes

In the past, new cells were JavaScript by default. This new feature add one more click when creating a new cell and make the process not as fast as before. So I’m not sure if this new feature is a good one or not.

It’s a bit different visually, but if you type code directly and hit enter, the code is saved in a javascript cell; no added click!

2 Likes

Here are some fast ways to create JavaScript cells.

First, you can always:

  • Double-click the :heavy_plus_sign: button to insert a new JavaScript cell.

Second, while editing a cell, try any one of these:

  • Press Option-Command-Enter (Ctrl-Alt-Enter) to insert a new JavaScript cell below. Or press Shift-Option-Command-Enter (Ctrl-Alt-Shift-Enter) to insert a new JavaScript cell above.
  • Press Command-Enter (Ctrl-Enter) to open the add cell menu below, immediately followed by Enter to insert a new JavaScript cell. Or press Command-Shift-Enter (Ctrl-Shift-Enter) to open the add cell menu above, immediately followed by Enter to insert a new JavaScript cell.
  • Press Option-Enter (Alt-Enter) to split the current cell into two cells of the same type and focus the cell below. (At the end of a JavaScript cell, this inserts an empty JavaScript cell below.) Or press Option-Shift-Enter (Alt-Shift-Enter) to split the current cell into two cells of the same type and focus the cell above. (At the beginning of a JavaScript cell, this inserts an empty JavaScript cell above.)

The above keyboard shortcuts also work with a cell selected, which you can do while editing by pressing Esc. That’s especially useful in conjunction with the keyboard shortcuts for splitting cells since you’ll always get a new empty cell.

When the add cell menu open, you can also:

  • Press Enter (JavaScript is selected by default).
  • Simply write code and then press Enter (Insert as JavaScript is selected by default).
  • Paste code from the clipboard (Insert as JavaScript is invoked by default).

Also, if you go to your settings page and scroll down to Editor preferences, you can :white_check_mark: enable the “New cell” keyboard shortcut defaults to JavaScript preference. This will change the Command-Enter (Ctrl-Enter) keyboard shortcut to insert a new JavaScript cell rather than opening the add cell menu. And if you still want the add cell menu, you can press Option-Command-Enter (Ctrl-Alt-Enter).

Also, in an empty JavaScript, Markdown, or HTML cell, you can use the :arrow_up: arrow up and :arrow_down: arrow down keys to cycle between cell modes.

4 Likes