diff --git a/doc/_static/images/develop_editor_panel_serve_after.png b/doc/_static/images/develop_editor_panel_serve_after.png index 11d21399d0..afda1601cf 100644 Binary files a/doc/_static/images/develop_editor_panel_serve_after.png and b/doc/_static/images/develop_editor_panel_serve_after.png differ diff --git a/doc/_static/images/develop_editor_panel_serve_before.png b/doc/_static/images/develop_editor_panel_serve_before.png index f2e73967a7..7a0b0a2e46 100644 Binary files a/doc/_static/images/develop_editor_panel_serve_before.png and b/doc/_static/images/develop_editor_panel_serve_before.png differ diff --git a/doc/tutorials/basic/develop_editor.md b/doc/tutorials/basic/develop_editor.md index 5d713f39dd..7c1c53ae39 100644 --- a/doc/tutorials/basic/develop_editor.md +++ b/doc/tutorials/basic/develop_editor.md @@ -1,19 +1,12 @@ # Develop in an Editor -In this section, we will learn the basics of developing Panel apps in an editor: +Welcome to the "Develop in an Editor" section! Here, we'll explore how to develop Panel apps efficiently right within your favorite editor. -- Serve an app with *autoreload* using `panel serve app.py --autoreload`. -- Display the app in a *simple* browser tab inside the editor if possible. -- Inspect Panel objects via *hover* and `print`. -- Inspect a component's parameters via `.param` and `.param._repr_html_()`. +Let's dive in! -:::{note} -Some of the features demonstrated in this guide might require special configuration of your specific editor. For configuration, we refer to the [Resources](#resources) section below and general resources on the web. -::: - -## Install the Dependencies +## Serve Your App with Autoreload -Please make sure [Matplotlib](https://matplotlib.org/) and [Numpy](https://numpy.org/) are installed. +First things first, let's ensure we have all the necessary dependencies installed. You can do this easily via `pip` or `conda`: ::::{tab-set} @@ -37,9 +30,11 @@ conda install -y -c conda-forge matplotlib numpy panel :::: -## Serve an app with autoreload +Now that we have our dependencies sorted, let's serve our app with autoreload. Autoreload ensures that your app updates in real-time as you make changes, providing a smooth development experience. -A simple Panel app could look like the following. +### Serving Your App + +Imagine you have a simple Panel app like the following: ```python import panel as pn @@ -64,27 +59,15 @@ pn.template.FastListTemplate( ).servable() ``` -Copy the code above into a file named `app.py`. - -Save the file if you have not already done it. +Copy this code into a file named `app.py` and save it. -Serve the app by running the following command in a terminal. +Now, open a terminal and run the following command: ```bash panel serve app.py --autoreload ``` -It should look like - -```bash -$ panel serve app.py --autoreload -2024-01-20 07:49:06,767 Starting Bokeh server version 3.3.3 (running on Tornado 6.4) -2024-01-20 07:49:06,769 User authentication hooks NOT provided (default user enabled) -2024-01-20 07:49:06,771 Bokeh app running at: http://localhost:5006/app -2024-01-20 07:49:06,771 Starting Bokeh server with process id: 22100 -``` - -Open [http://localhost:5006/app](http://localhost:5006/app) in a browser. +This will start the server and provide you with a URL where your app is being served. Open this URL in your browser to see your app in action. It should look like @@ -103,72 +86,19 @@ It should look like Your browser does not support the video tag. -:::{note} -In the video above, you will notice that the app is displayed inside the editor. This feature is supported in VS Code as the *simple browser*. PyCharm supports a similar feature via an extension. -::: - -:::{note} -We should only serve our apps with `--autoreload` while developing. -::: - -Stop the Panel server by sending a termination signal. In most terminal environments, you can do this by pressing `CTRL+C` one or more times. +## Inspect via Hover -## Inspect via hover +One of the benefits of developing in an editor is the ability to inspect Panel objects conveniently via hover. Simply hover over the object you want to inspect, and you'll see tooltips providing useful information and links to reference guides. -Copy the code below into a file named `app.py`. - -```python -import panel as pn -import numpy as np - -from matplotlib.figure import Figure - -ACCENT = "teal" -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=15, color=ACCENT) - -component = pn.pane.Matplotlib(fig, format='svg', sizing_mode='scale_both') - -pn.template.FastListTemplate( - title="My Matplotlib App", sidebar=[LOGO], main=[component], accent=ACCENT -).servable() -``` - -Save the file if you have not already done it. - -Hover over the word `FastListTemplate`. - -It would look something like +Let's say you want to inspect the `FastListTemplate` object in your code. Hover over it, and you'll see a tooltip with an example code snippet and a reference link. Clicking the reference link takes you directly to the reference guide for further information. ![Tooltip of FastListTemplate](../../_static/images/develop_editor_hover.png) -:::{note} -The tooltip of Panel components normally provides an *Example* code snippet and a *Reference* link. The *Reference* link makes it very easy to navigate to the reference guides on the Panel website for more information. -::: - -:::{note} -If your editor does not show any tooltips, then please refer to your editor's documentation to figure out how to enable it. -::: - -Hover again and click the *Reference* link https://panel.holoviz.org/reference/templates/FastListTemplate.html. - -This should open the `FastListTemplate` reference guide - -[![FastListTemplate reference guide](../../_static/images/develop_editor_reference_guide.png)](https://panel.holoviz.org/reference/templates/FastListTemplate.html) - -:::{note} -It is a great idea to use the *Example* code snippets and *Reference* links to speed up our workflow. -::: - ## Inspect via `print` -Copy the code below into a file named `app.py`. +Another handy way to inspect objects is by printing them. This allows you to see detailed information about the object's structure and contents. + +Consider the following code snippet: ```python import panel as pn @@ -176,7 +106,6 @@ import panel as pn pn.extension(design="material") component = pn.panel("Hello World") -print(component) layout = pn.Column( component, pn.widgets.IntSlider(value=2, start=0, end=10, name="Value") ) @@ -184,7 +113,7 @@ print(layout) layout.servable() ``` -Save the file if you have not already done it. +Serving this code will print information about the `component` object, revealing its structure and attributes. Serve the app by running the below command in a terminal. @@ -197,44 +126,22 @@ Open [http://localhost:5006/app](http://localhost:5006/app) in a browser. This will look something like the below in the terminal. ```bash -$ panel serve app.py --autoreload -Markdown(str, design=