index.md

How-to

The Panel How-to guides provide step by step recipes for solving essential problems and tasks that arise during your work. They assume that you've completed the Getting Started material and therefore already have some knowledge of how Panel works. There is no order to the guides, other than any potential prerequisites listed at the top of a page. Jump to the topic that is relevant to you now.

Develop Efficiently

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}book;2.5em;sd-mr-1 sd-animate-grow50 Develop in a notebook 🔗 notebook/index :link-type: doc

How to effectively develop apps in a notebook environment. :::

:::{grid-item-card} {octicon}file-code;2.5em;sd-mr-1 sd-animate-grow50 Develop in an editor 🔗 editor/index :link-type: doc

How to effectively develop apps in a Python or Markdown file. :::

::::

Build apps

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}rows;2.5em;sd-mr-1 sd-animate-grow50 Construct components 🔗 components/index :link-type: doc

How to construct and customize individual components like an image or slider widget. :::

:::{grid-item-card} {octicon}rows;2.5em;sd-mr-1 sd-animate-grow50 Arrange Components 🔗 layout/index :link-type: doc

How to arrange and size components on the page. :::

:::{grid-item-card} {octicon}paintbrush;2.5em;sd-mr-1 sd-animate-grow50 Style components 🔗 styling/index :link-type: doc

How to apply designs, themes and custom styling to components to achieve a polished look and feel. :::

:::{grid-item-card} {octicon}pulse;2.5em;sd-mr-1 sd-animate-grow50 Add interactivity 🔗 interactivity/index :link-type: doc

How to link add interactivity to your applications using reactive APIs. :::

:::{grid-item-card} {octicon}repo-template;2.5em;sd-mr-1 sd-animate-grow50 Apply templates 🔗 templates/index :link-type: doc

How to use a Template to customize the look and feel of a deployed Panel app. :::

::::

Use specialized UIs and APIs

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}git-branch;2.5em;sd-mr-1 sd-animate-grow50 Build a sequential UI 🔗 pipeline/index :link-type: doc

How to build a Panel Pipeline that connects multiple panels into a sequential user interface. :::

:::{grid-item-card} {octicon}plus-circle;2.5em;sd-mr-1 sd-animate-grow50 Build custom components 🔗 custom_components/index :link-type: doc

How to extend Panel by building custom components. :::

:::{grid-item-card} {octicon}codespaces;2.5em;sd-mr-1 sd-animate-grow50 Generate UIs from declared parameters (Declarative API) 🔗 param/index :link-type: doc

How to use Parameterized classes with Panel to generate UIs without writing GUI code. :::

:::{grid-item-card} {octicon}link;2.5em;sd-mr-1 sd-animate-grow50 Explicitly link parameters (Callbacks API) 🔗 links/index :link-type: doc

How to link the parameters of Panel components in Python and Javascript. :::

::::

Manage session tasks

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}zap;2.5em;sd-mr-1 sd-animate-grow50 Register session callbacks 🔗 callbacks/index :link-type: doc

How to set up callbacks on session related events (e.g. on page load or when a session is destroyed) and define periodic tasks. :::

:::{grid-item-card} {octicon}note;2.5em;sd-mr-1 sd-animate-grow50 Access session state 🔗 state/index :link-type: doc

How to access and manipulate state related to the user session, HTTP request and URL arguments. :::

::::

Extending Panel

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}code-square;2.5em;sd-mr-1 sd-animate-grow50 Create Custom Components 🔗 custom_components/index :link-type: doc

How to create custom components including widgets, layouts and panes using pure-Python, JS or React. :::

::::

Test and debug

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}meter;2.5em;sd-mr-1 sd-animate-grow50 Enable profiling and debugging 🔗 profiling/index :link-type: doc

How to profile and debug your application using the admin dashboard and other tools. :::

:::{grid-item-card} {octicon}codescan-checkmark;2.5em;sd-mr-1 sd-animate-grow50 Set up testing for an application 🔗 test/index :link-type: doc

How to set up unit tests, UI tests and load testing to ensure your applications are (and stay) robust and scalable. :::

:::{grid-item-card} {octicon}pencil;2.5em;sd-mr-1 sd-animate-grow50 Configure Logging 🔗 logging/index :link-type: doc

How to configure the logging level and format :::

::::

Prepare to share

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}hourglass;2.5em;sd-mr-1 sd-animate-grow50 Improve performance 🔗 performance/index :link-type: doc

Discover some tips and tricks instructing you on how you can improve the performance of your application. :::

:::{grid-item-card} {octicon}versions;2.5em;sd-mr-1 sd-animate-grow50 Cache data 🔗 caching/index :link-type: doc

How to cache data across sessions and memoize the output of functions. :::

:::{grid-item-card} {octicon}duplicate;2.5em;sd-mr-1 sd-animate-grow50 Improve scalability 🔗 concurrency/index :link-type: doc

How to improve the scalability of your Panel application. :::

:::{grid-item-card} {octicon}pulse;2.5em;sd-mr-1 sd-animate-grow50 Best Practices 🔗 best_practices/index :link-type: doc

A checklist of best practices for improving the development and user experience with Panel. :::

:::{grid-item-card} {octicon}shield-check;2.5em;sd-mr-1 sd-animate-grow50 Add authentication 🔗 authentication/index :link-type: doc

How to configure OAuth to add authentication to a server deployment. :::

::::

Share your work

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} {octicon}server;2.5em;sd-mr-1 sd-animate-grow50 Configure the server 🔗 server/index :link-type: doc

How to configure the Panel server. :::

:::{grid-item-card} {octicon}package-dependencies;2.5em;sd-mr-1 sd-animate-grow50 Integrate with other servers 🔗 integrations/index :link-type: doc

How to integrate Panel in other application based on Flask, FastAPI or Django. :::

:::{grid-item-card} {octicon}share;2.5em;sd-mr-1 sd-animate-grow50 Deploy applications 🔗 deployment/index :link-type: doc

How to deploy Panel applications to various cloud providers (e.g. Azure, GCP, AWS etc.) :::

:::{grid-item-card} {octicon}file;2.5em;sd-mr-1 sd-animate-grow50 Export apps 🔗 export/index :link-type: doc

How to export and save Panel applications as static files. :::

:::{grid-item-card} {octicon}browser;2.5em;sd-mr-1 sd-animate-grow50 Run panel in WebAssembly 🔗 wasm/index :link-type: doc

How to run Panel applications entirely in the browser using WebAssembly (Wasm), Pyodide, and PyScript. :::

::::

Migrate to Panel

::::{grid} 1 2 2 3 :gutter: 1 1 1 2

:::{grid-item-card} Migrate from Streamlit 🔗 streamlit_migration/index :link-type: doc

:width: 125px
:align: center
:name: Streamlit

How to migrate existing Streamlit applications to Panel. :::

:::{grid-item-card} Migrate from AnyWidget 🔗 migrate/anywidget/index :link-type: doc

:width: 125px
:align: center
:name: AnyWidget

How to convert AnyWidget widgets to Panel widgets. :::

::::

:titlesonly:
:hidden:
:maxdepth: 1

prepare_to_develop
build_apps
use_specialized_uis
manage_session_tasks
extending_panel
test_and_debug
prepare_to_share
share_your_work
migrate_to_panel