Build Custom Components#

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

`Viewer` Components#

Build custom components by combining existing components.

Combine Existing Components

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

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

Layouts

How to create layouts using ReactiveHTML

Styling

How to style ReactiveHTML components

Panes

How to create panes using ReactiveHTML

Indicators

How to create indicators using ReactiveHTML

Callbacks

How to add Python and JS callbacks to ReactiveHTML

Widgets

How to create input widgets using ReactiveHTML

DataFrame

How to create components using ReactiveHTML and a DataFrame parameter

Build a Plot Viewer

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

Build a Table Viewer

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

Build a Canvas component

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

Wrap Leaflet.js

Build a custom component wrapping leaflet.js using ReactiveHTML.

Wrap Material UI

Build custom components wrapping material UI using ReactiveHTML.

Wrap a Vue.js component

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