Skip to content

Cells

All of Observable notebooks are made of cells. To build a notebook is to add cells to a notebook.

An Observable notebook split into different sections representing various cell types like markdown (for text), inputs, and a chart. Text reads: Everything you see in an Observable notebook is made from cells.
A notebook divided into cells.

Cells can be added in a few different ways in Observable.

Add cell menu

The Add cell menu appears as the first thing you see upon opening a blank notebook.

The Add cell menu opened up as it would be by default in a new notebook.
The Add cell menu.

It also appears when you click the "+" button to the left of the Add cell bar. To open see the menu between unfocused cells, click either the gray "+" button or anywhere between two cells to open the Add cell menu.

Besides providing options to add any of the top four cell types - JavaScript, Text (Markdown), Data table, Chart - the Add cell menu gives users the ability to:

  • Connect to data
  • Insert Plot snippets
  • Create Inputs
  • Insert D3 (and other code) snippets
  • Create tables
  • Upload and insert images
  • Import a notebook cell or library
  • Browse sample data sets

Searching the Add cell menu

The search bar is ready at the top of the Add cell menu. Selecting an option will insert the corresponding type of cell into your notebook.

The Add cell menu search bar.
The Add cell menu search bar.

All of the components and code snippets are immediately executable, so you can quickly preview them with some included sample data. Just replace the sample references to see your own data represented.

Add cell bar

After the initial Add cell menu is closed, likely the first thing you will notice in a blank notebook, is the Add cell bar:

The Add bar showing the JavaScript, Text, Data, and Chart cell options.
The Add cell bar.

Like the Add cell menu, the Add cell bar highlights the most commonly used cell types in the platform:

  • JavaScript: A code cell that stores and executes JavaScript
  • Text: A markdown cell, for formatting text quickly and easily
  • Data: The Data Table cell, capable of visualizing tabular data, offering interactive filters
  • Chart: The Chart cell, delivering no-code charts and visual data exploration

The bar appears below the currently focused cell.

Freeform text input

When you input freeform text into the search box that does not match any known menu items, you are prompted to insert the content typed as a JavaScript cell, or optionally as a Markdown or HTML cell.

The search bar with some JavaScript entered. Upon not finding a match, the user is suggested to insert as JavaScript, Markdown, or HTML. The Insert as JavaScript option is highlighted.
An unmatched search query.

Cell suggestions

Cell suggestions are over to the right side of the space that the next cell's Add cell bar occupies:

A Data table cell with button suggestions, Create chart and Convert to SQL, together highlighted by a red rounded-edged rectangle.
The Create chart button and Convert to SQL button.

Some suggestions create a new cell below in an effort to keep you moving to the next logical step in the analysis process (e.g. the Create chart suggestion in the screenshot above). Suggestions that show an arrow indicate that the focused cell will be non-destructively transformed into another cell (e.g. the Convert to SQL suggestion in the screenshot above).

Evaluating cells

To have the results of your cell appear, click the Play button, or type Shift-Enter to run your cell.

You can link directly to a section of the notebook with an auto-generated anchor link using the "Copy Link" action in the cell menu. This will copy a special URL to the clipboard like:

https://observablehq.com/@observablehq/a-taste-of-observable#cell-0
https://observablehq.com/@observablehq/a-taste-of-observable#cell-0
A notebook titled 'Linking to a cell' with the first cell's cell menu opened showing a set of dropdown options. The fourth option down 'Copy Link' is highlighted light blue with a tooltip that says 'Copy a link to this cell'.
Using the cell menu to select the "Copy Link" option.

Naming cells

Naming cells allows you to call the cell elsewhere in a notebook, or import cell contents for reuse in another notebook.

Name a JavaScript cell in one of four ways:

  • Name a cell expression:
js
expressionName = 8
expressionName = 8
  • Name a block:
js
blockName = {
  return 80;
}
blockName = {
  return 80;
}
  • Name a function declaration:
js
function functionName() {
  return 800;
}
function functionName() {
  return 800;
}
  • Name a class:
js
class className {}
class className {}

Name a Markdown cell by entering the name of the cell in the following area (visible at the bottom of your browser window when you are editing the cell):

Menu bar that appears in the bottom of the browser window when editing a Markdown cell, with a blank text box on the left where a user can enter a cell name.

For specialty cells like the Data Table, SQL and Chart cell, you can either edit the cell name from the menu in the bottom of the browser as shown above, or you can update the cell name in the top left of the cell:

Screen shot of a Data table cell, with a text box in the upper left reading 'addCellNameHere'.