HTML Extensions

HTML Extensions are created by inheriting from the HTML pane. You can use HTML, CSS and/ or JS to create amazing extensions to Panel. These extensions cannot communicate from the browser (Javascript) back to the server (Python).

Example

In this example we will develop a Dynamic Number extension that can display a number with the fontsize and green+alpha color ratios depending on the value.

../../_images/dynamic-number.gifDynamic Number Video

We start by importing the dependencies

import panel as pn
import param

Then we implement the HTML extension.

class DynamicNumber(pn.pane.HTML):
    """Extension Implementation"""
    value = param.Integer(default=30, bounds=(0,100))

    # In order to not be selected by the `pn.panel` selection process
    # Cf. https://github.com/holoviz/panel/issues/1494#issuecomment-663219654
    priority = 0
    # The _rename dict is used to keep track of Panel parameters to sync to Bokeh properties.
    # As value is not a property on the Bokeh model, we set the it to None
    _rename = dict(pn.pane.HTML._rename, value=None)

    def __init__(self, **params):
        super().__init__(**params)
        self._update_object_from_parameters()

    # Don't name the function
    # `_update`, `_update_object`, `_update_model` or `_update_pane`
    # as this will override a function in the parent class.
    @param.depends("value", watch=True)
    def _update_object_from_parameters(self, *events):
        self.object = self._get_html(self.value)

    def _get_html(self, value):
        """Main functionality of Extension"""
        font_size = value
        alpha = 1-value/100
        green = int(value*255/100)
        return f"""
    <div style="font-size: {font_size}px;color: rgba(0,{green},0,{alpha}">{value}</div>
    """

Finally we try out the extension

# Create app
extension = DynamicNumber(width=125, height=125)
app = pn.Column(
    extension,
    extension.param.value,
    width=150,
)
# Serve the app
app.servable()

More Examples

Click the images below to see the code.

../../_images/pandas-profile-report-pane.gifPandas Profile Report

Official Panel Examples

The Panel Gallery contains more examples in the section called External libraries. Please note that these are not implemented by inheriting from the HTML pane. They just use it. It’s not difficult to see how the examples could be converted to inheritance examples though.

../../_images/panel-gallery-external-libraries.pngExternal Libraries.