Observable JS is a set of enhancements to vanilla JavaScript created by Mike Bostock (also the author of D3). Observable JS is distinguished by its reactive runtime, which is especially well suited for interactive data exploration and analysis.
Learn more about using Observable JS with Quarto in the articles on Interactive Documents with Observable JS.

Overview
Cell options affect the execution and output of executable code blocks. They are specified within comments at the top of a block. For example:
```{ojs}
//| label: fig-polar
//| echo: false
//| fig-cap: "A line plot on a polar axis"
```


Attributes







label
Unique label for code cell. Used when other code needs to refer to the cell (e.g. for cross references fig-samples or tbl-summary)


classes
Classes to apply to cell container





Code Output







eval
Evaluate code cells (if false just echos the code into output).

true (default): evaluate code cell
false: don’t evaluate code cell
[...]: A list of positive or negative line numbers to selectively include or exclude lines (explicit inclusion/excusion of lines is available only when using the knitr engine)



echo
Include cell source code in rendered output.

true (default): include source code in output
false: do not include source code in output
fenced: in addition to echoing, include the cell delimiter as part of the output.
[...]: A list of positive or negative line numbers to selectively include or exclude lines (explicit inclusion/excusion of lines is available only when using the knitr engine)



code-fold
Collapse code into an HTML <details> tag so the user can display it on-demand.

true: collapse code
false (default): do not collapse code
show: use the <details> tag, but show the expanded code initially.



code-summary
Summary text to use for code blocks collapsed using code-fold


code-overflow
Choose how to handle code overflow, when code lines are too wide for their container. One of:

scroll
wrap



code-line-numbers
Include line numbers in code block output (true or false).
For revealjs output only, you can also specify a string to highlight specific lines (and/or animate between sets of highlighted lines).

Sets of lines are denoted with commas:

3,4,5
1,10,12

Ranges can be denoted with dashes and combined with commas:

1-3,5
5-10,12,14

Finally, animation steps are separated by |:

1-3|1-3,5 first shows 1-3, then 1-3,5
|5|5-10,12 first shows no numbering, then 5, then lines 5-10 and 12




lst-label
Unique label for code listing (used in cross references)


lst-cap
Caption for code listing





Cell Output







output
Include the results of executing the code in the output. Possible values:

true: Include results.
false: Do not include results.
asis: Treat output as raw markdown with no enclosing containers.



warning
Include warnings in rendered output.


error
Include errors in the output (note that this implies that errors executing code will not halt processing of the document).


include
Catch all for preventing any output (code or results) from being included in output.


panel
Panel type for cell output (tabset, input, sidebar, fill, center)


output-location
Location of output relative to the code that generated it. The possible values are as follows:

default: Normal flow of the slide after the code
fragment: In a fragment (not visible until you advance)
slide: On a new slide after the curent one
‘column’: In an adjacent column
column-fragment: In an adjacent column (not visible until you advance)

Note that this option is supported only for the revealjs format.





Figures







fig-cap
Figure caption


fig-subcap
Figure subcaptions


fig-link
Hyperlink target for the figure


fig-align
Figure horizontal alignment (default, left, right, or center)


fig-alt
Alternative text to be used in the alt attribute of HTML images.


fig-env
LaTeX environment for figure output


fig-pos
LaTeX figure position arrangement to be used in \begin{figure}[].
Computational figure output that is accompanied by the code that produced it is given a default value of fig-pos="H" (so that the code and figure are not inordinately separated).
If fig-pos is false, then we don’t use any figure position specifier, which is sometimes necessary with custom figure environments (such as sidewaysfigure).


fig-scap
A short caption (only used in LaTeX output). A short caption is inserted in \caption[], and usually displayed in the “List of Figures” of a PDF document.





Tables







tbl-cap
Table caption


tbl-subcap
Table subcaptions





Panel Layout







layout
2d-array of widths where the first dimension specifies columns and the second rows.
For example, to layout the first two output blocks side-by-side on the top with the third block spanning the full width below, use [[3,3], [1]].
Use negative values to create margin. For example, to create space between the output blocks in the top row of the previous example, use [[3,-1, 3], [1]].


layout-ncol
Layout output blocks into columns


layout-nrow
Layout output blocks into rows


layout-align
Horizontal alignment for layout content (default, left, right, or center)


layout-valign
Vertical alignment for layout content (default, top, center, or bottom)





Page Columns







column
Page column for output


fig-column
Page column for figure output


tbl-column
Page column for table output


cap-location
Where to place figure and table captions (top, bottom, or margin)


fig-cap-location
Where to place figure captions (top, bottom, or margin)


tbl-cap-location
Where to place table captions (top, bottom, or margin)