Build Custom Components

These How-to pages provide solutions for common tasks related to extending Panel with custom components.

Viewer and PyComponent

Build custom components by combining existing components in Python.

Combine Existing Components

How to build custom components that are combinations of existing components.

Combine Existing Components

Combine Existing Components

How to build a custom widget by subclassing PyComponent and WidgetBase.

Build a Widget in Python

Examples

Build a Plot Viewer

Build a custom component wrapping a bokeh plot and some widgets using the Viewer pattern.

Plot Viewer

Build a Table Viewer

Build a custom component wrapping a table and some widgets using the Viewer pattern.

How to Create Reactive Tables with Panel

ESM Components

Build custom components in Javascript using so called ESM components, which allow you to write components that automatically sync parameter state between Python and JS. ESM components can be written in pure JavaScript, using React or using the AnyWidget specification.

ESM Components is our 2nd generation api for custom components while ReactiveHTML is our 1st generation. We recommend using ESM Components over ReactiveHTML.

Compile and Bundle ESM Components

How to specify external dependencies for ESM components and compile them into JS bundles.

Compile and Bundle ESM Components

Add callbacks to ESM components

How to add both JS and Python based callbacks to ESM components.

ESM component with callback

Panes

How to create panes using ESM components

Create Panes using ESM Components

Create Custom Widgets

How to create a custom widget using ESM components

Create Custom Widgets using ESM Components

Create Custom Layouts

How to create custom layouts using ESM components

Create Custom Layouts using ESM Components

DataFrame

How to create ESM components that render data a DataFrame.

Rendering DataFrames using ESM components

ESM Examples

Canvas JSComponent

Build a custom component to draw on an HTML canvas based on JSComponent.

Build a Custom Canvas Component

Leaflet.js JSComponent

Build a custom component wrapping leaflet.js using JSComponent.

Build a Custom Leaflet Component

Material UI ReactComponent

Build custom components wrapping Material UI using ReactComponent.

Wrapping Material UI components

ReactiveHTML Components

Build custom components using HTML, CSS and Javascript and without Javascript build tools.

Layouts

How to create layouts using ReactiveHTML

Create Layouts With ReactiveHTML

Styling

How to style ReactiveHTML components

Style your ReactiveHTML template

Panes

How to create panes using ReactiveHTML

Create Panes with ReactiveHTML

Indicators

How to create indicators using ReactiveHTML

Create Indicators With ReactiveHTML

Callbacks

How to add Python and JS callbacks to ReactiveHTML

ReactiveHTML component with callback

Widgets

How to create input widgets using ReactiveHTML

Widgets with ReactiveHTML

DataFrame

How to create ReactiveHTML components that render data a DataFrame.

DataFrames and ReactiveHTML

ReactiveHTML Examples

Build a Canvas component

Build a custom component to draw on an HTML canvas based on ReactiveHTML.

Build a Custom Canvas Component

Wrap Leaflet.js

Build a custom component wrapping leaflet.js using ReactiveHTML.

Build a Custom Leaflet Component

Wrap a Vue.js component

Build custom component wrapping a Vue.js app using ReactiveHTML.

Wrap a Vue component