Code Editor Options¶

Control editor visibility and position using code-visibility and code-position attributes.

Code visibility¶

Visible (default)¶

The code editor is shown and expanded.

import panel as pn pn.panel("Code is **visible** by default.").servable()

Hidden¶

The code editor is completely hidden. The output is shown alone, similar to app mode but with the editor header/controls still available.

import panel as pn pn.panel("Code is **hidden** — output only.").servable()

Collapsed¶

The code editor is collapsed behind a toggle button. Click Expand Code to reveal the editor; it changes to Collapse Code when expanded.

import panel as pn pn.panel("Code is **collapsed** — click to expand.").servable()

Code position¶

First (default)¶

Code appears before (above or left of) the output.

import panel as pn pn.panel("Code is **first** — above the output.").servable()

Last¶

Code appears after (below or right of) the output.

import panel as pn pn.panel("Code is **last** — below the output.").servable()

Fence syntax¶

```{.panel mode="editor" code-visibility="visible"}
# editor with visible code (default)
```

```{.panel mode="editor" code-visibility="hidden"}
# output only, no code shown
```

```{.panel mode="editor" code-visibility="collapsed"}
# code behind a toggle
```

```{.panel mode="editor" code-position="first"}
# code before output (default)
```

```{.panel mode="editor" code-position="last"}
# code after output
```

When to use each¶