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.
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}git-merge;2.5em;sd-mr-1 sd-animate-grow50 Combine Existing Components 🔗 custom_viewer :link-type: doc
How to build custom components that are combinations of existing components. :::
:::{grid-item-card} {octicon}pencil;2.5em;sd-mr-1 sd-animate-grow50 Combine Existing Components 🔗 python/create_custom_widget :link-type: doc
How to build a custom widget by subclassing PyComponent and WidgetBase. :::
::::
Examples
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} Build a Plot Viewer :img-top: https://assets.holoviz.org/panel/how_to/custom_components/plot_viewer.png 🔗 examples/plot_viewer :link-type: doc
Build a custom component wrapping a bokeh plot and some widgets using the Viewer pattern. :::
:::{grid-item-card} Build a Table Viewer :img-top: https://assets.holoviz.org/panel/how_to/custom_components/table_viewer.png 🔗 examples/table_viewer :link-type: doc
Build a custom component wrapping a table and some widgets using the Viewer pattern. :::
::::
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.
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}tools;2.5em;sd-mr-1 sd-animate-grow50 Compile and Bundle ESM Components 🔗 esm/build :link-type: doc
How to specify external dependencies for ESM components and compile them into JS bundles. :::
:::{grid-item-card} {octicon}pencil;2.5em;sd-mr-1 sd-animate-grow50 Add callbacks to ESM components 🔗 esm/callbacks :link-type: doc
How to add both JS and Python based callbacks to ESM components. :::
:::{grid-item-card} {octicon}image;2.5em;sd-mr-1 sd-animate-grow50 Panes 🔗 esm/custom_panes :link-type: doc
How to create panes using ESM components :::
:::{grid-item-card} {octicon}pencil;2.5em;sd-mr-1 sd-animate-grow50 Create Custom Widgets 🔗 esm/custom_widgets :link-type: doc
How to create a custom widget using ESM components :::
:::{grid-item-card} {octicon}columns;2.5em;sd-mr-1 sd-animate-grow50 Create Custom Layouts 🔗 esm/custom_layout :link-type: doc
How to create custom layouts using ESM components :::
:::{grid-item-card} {octicon}table;2.5em;sd-mr-1 sd-animate-grow50 DataFrame 🔗 esm/dataframe :link-type: doc
How to create ESM components that render data a DataFrame. :::
::::
ESM Examples
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} Canvas JSComponent :img-top: https://assets.holoviz.org/panel/how_to/custom_components/canvas_draw.png 🔗 examples/esm_canvas :link-type: doc
Build a custom component to draw on an HTML canvas based on JSComponent. :::
:::{grid-item-card} Leaflet.js JSComponent :img-top: https://assets.holoviz.org/panel/how_to/custom_components/leaflet.png 🔗 examples/esm_leaflet :link-type: doc
Build a custom component wrapping leaflet.js using JSComponent. :::
:::{grid-item-card} Material UI ReactComponent :img-top: https://assets.holoviz.org/panel/how_to/custom_components/material_ui.png 🔗 examples/esm_material_ui :link-type: doc
Build custom components wrapping Material UI using ReactComponent. :::
::::
ReactiveHTML Components
Build custom components using HTML, CSS and Javascript and without Javascript build tools.
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} {octicon}columns;2.5em;sd-mr-1 sd-animate-grow50 Layouts 🔗 reactive_html/reactive_html_layout :link-type: doc
How to create layouts using ReactiveHTML :::
:::{grid-item-card} {octicon}paintbrush;2.5em;sd-mr-1 sd-animate-grow50 Styling 🔗 reactive_html/reactive_html_styling :link-type: doc
How to style ReactiveHTML components :::
:::{grid-item-card} {octicon}image;2.5em;sd-mr-1 sd-animate-grow50 Panes 🔗 reactive_html/reactive_html_panes :link-type: doc
How to create panes using ReactiveHTML :::
:::{grid-item-card} {octicon}issue-draft;2.5em;sd-mr-1 sd-animate-grow50 Indicators 🔗 reactive_html/reactive_html_indicators :link-type: doc
How to create indicators using ReactiveHTML :::
:::{grid-item-card} {octicon}arrow-left;2.5em;sd-mr-1 sd-animate-grow50 Callbacks 🔗 reactive_html/reactive_html_callbacks :link-type: doc
How to add Python and JS callbacks to ReactiveHTML :::
:::{grid-item-card} {octicon}single-select;2.5em;sd-mr-1 sd-animate-grow50 Widgets 🔗 reactive_html/reactive_html_widgets :link-type: doc
How to create input widgets using ReactiveHTML :::
:::{grid-item-card} {octicon}table;2.5em;sd-mr-1 sd-animate-grow50 DataFrame 🔗 reactive_html/reactive_html_dataframe :link-type: doc
How to create ReactiveHTML components that render data a DataFrame.
:::
::::
ReactiveHTML Examples
::::{grid} 1 2 2 3 :gutter: 1 1 1 2
:::{grid-item-card} Build a Canvas component :img-top: https://assets.holoviz.org/panel/how_to/custom_components/canvas_draw.png 🔗 examples/canvas_draw :link-type: doc
Build a custom component to draw on an HTML canvas based on ReactiveHTML. :::
:::{grid-item-card} Wrap Leaflet.js :img-top: https://assets.holoviz.org/panel/how_to/custom_components/leaflet.png 🔗 examples/leaflet :link-type: doc
Build a custom component wrapping leaflet.js using ReactiveHTML. :::
:::{grid-item-card} Wrap a Vue.js component :img-top: https://assets.holoviz.org/panel/how_to/custom_components/vue.png 🔗 examples/vue :link-type: doc
Build custom component wrapping a Vue.js app using ReactiveHTML. :::
::::