develop_notebook.md

Develop in a Notebook

Welcome to the "Develop in a Notebook" section! Here, we'll explore the fundamentals of efficiently developing Panel apps directly within a notebook environment.

Let's dive in!

Preview Your App

Let's preview our app.

Start by creating a new notebook named app.ipynb.

Preview Example

Here's a simple notebook containing a Panel app:

Copy and paste the following code cells into your notebook:

import panel as pn

pn.extension()

pn.panel("Hello World").servable()

pn.panel("Hello Again")

Run the cells and save the notebook as app.ipynb.

:::{note}

The Jupyter Panel Preview feature described below works exclusively within the JupyterLab interface. It does not support the Classic Jupyter Notebook interface.

To use this preview feature, please ensure you are working within a JupyterLab environment.

:::

You can now preview the app by clicking the Jupyter Panel Preview icon. This icon can be found above the notebook.

Upon clicking the Jupyter Panel Preview icon, you'll see your app launch in a separate window. If "Hello Again" isn't displayed, it's because it hasn't been marked as .servable(). Update the cell containing pn.panel("Hello Again") to include .servable() and save the notebook. Click the Reload Preview button in the Jupyter Panel Preview.

It should look like

:::{tip} You can enhance your workflow by enabling auto-reload with the Render on Save option, which automatically reloads your app when the notebook is saved. :::

The video shows how a larger app could be developed.

Serve Your App with Autoreload

Alternatively, you can serve your notebook externally with autoreload using the following command:

panel serve app.ipynb --dev

This method provides a faster alternative to the Jupyter Panel Preview. Check out the video for inspiration.

Your browser does not support the video tag.

:::{dropdown} Code

import panel as pn
import numpy as np

from matplotlib.figure import Figure

ACCENT = "goldenrod"
LOGO = "https://assets.holoviz.org/panel/tutorials/matplotlib-logo.png"

pn.extension(sizing_mode="stretch_width")

data = np.random.normal(1, 1, size=100)
fig = Figure(figsize=(8,4))
ax = fig.subplots()
ax.hist(data, bins=20, color=ACCENT)

component = pn.pane.Matplotlib(fig, format='svg', sizing_mode='scale_both')

pn.template.FastListTemplate(
    title="My App", sidebar=[LOGO], main=[component], accent=ACCENT
).servable();

:::

Inspect a Component using SHIFT+Tab

Start from an empty notebook named app.ipynb.

Copy-paste the code below into the first cell

import panel as pn

pn.extension()

Run the cell.

Write pn.widgets.IntSlider in a cell and press SHIFT+Tab.

It should look like

Use the mouse to scroll down until we find the Example code snippet and Reference link.

Click the Reference link https://panel.holoviz.org/reference/widgets/IntSlider.html.

It should now look like

:::{tip} It is a great idea to use the Example code snippets and Reference links to speed up our workflow. :::

Inspect a Component using print

Start from an empty notebook named app.ipynb.

Copy-paste the code below into the notebook.

import panel as pn

pn.extension()

print(pn.panel("Hello World"))

component = pn.Column(
    "Hello World", pn.widgets.IntSlider(value=2, end=10, name="Value")
)
print(component)

Run the cells if they have not already been run.

It should look like

:::{note} By printing layout components like Column we can understand how they are composed. This enables us to access the subcomponents of the layout. :::

Add the two code cells below

component[0]

component[1]

Run the cells if they have not already been run.

It should look like

Inspect a Component's Parameters using .param

Start from an empty notebook named app.ipynb.

Copy-paste the two code cells below into the notebook.

import panel as pn

pn.extension()

pn.widgets.IntSlider.param

Run the cells if they have not already been run.

It should look like

:::{note}

• The .param table shows us the default parameter values of the IntSlider class. For example, the default value of align is 'start'.

• The .param table shows us additional information like the Type and Range of the Parameter. :::

Add the new cell

pn.widgets.IntSlider(align="end").param

Run the code cell.

It should look like

:::{note}

• In the picture above we see the actual parameter values of the IntSlider instance. For example, the actual value of align is 'end'. :::

Recap

In this section, we covered:

• Previewing a notebook app with the Jupyter Panel Preview.

• Serving a notebook app with autoreload.

• Inspecting components using SHIFT+Tab, print, and .param.

Now you're equipped with the tools to efficiently develop Panel apps directly within a notebook environment!

Resources

For more detailed instructions and explanations, check out the resources below:

• Develop in Other Notebook Environments

• Display Output in Notebooks

• Preview Apps in JupyterLab

• Publish a Notebook as a Dashboard using the Layout Builder

• Serve an App from a Notebook File

• Use PyCharm Notebook Environment

• Use VS Code Notebook Environment

Happy developing! 🚀