Create faster with the Add Cell Menu

Announcements
1

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
2

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.

3

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
4

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.

5 Likes