Preview Image¶

Show a static image or GIF in the output area before the user runs the code, using the preview attribute.

With a preview image¶

Set preview to an image URL. The image is displayed with a clickable "Run" badge overlay. Clicking the image or the Run button executes the code and replaces the preview with live output:

import panel as pn pn.panel("**Live output** — the preview image has been replaced.").servable()

Without preview (default)¶

When auto-run="false" with no preview and no pre-render, a "Click Run to execute this example" placeholder appears in the output area:

import panel as pn pn.panel("You clicked Run to see this!").servable()

Fence syntax¶

MkDocs:

```{.panel mode="editor" auto-run="false" preview="path/to/screenshot.png"}
import panel as pn
pn.panel("Hello").servable()
```

Sphinx:

.. panel-live::
   :auto-run: false
   :preview: path/to/screenshot.png

   import panel as pn
   pn.panel("Hello").servable()

Quarto:

```{.panel-live}
#| auto-run: false
#| preview: path/to/screenshot.png
import panel as pn
pn.panel("Hello").servable()
```

When to use¶