Sync location

Download this notebook from GitHub (right-click to download).


import panel as pn

pn.extension(sizing_mode="stretch_width")

This example demonstrates how to sync widget state with the URL bar, restoring it from the URL parameters on page load and updating it when the widgets change. Note this example will only work when served with panel serve. In a notebook pn.state.location does not exist until after the first object has been displayed:

widget = pn.widgets.FloatSlider(name='Slider', start=0, end=10)
widget2 = pn.widgets.TextInput(name='Text')
widget3 = pn.widgets.RangeSlider(name='RangeSlider', start=0, end=10)

if pn.state.location:
    pn.state.location.sync(widget, {'value': 'slider_value'})
    pn.state.location.sync(widget2, {'value': 'text_value'})
    pn.state.location.sync(widget3, {'value': 'range_value'})

pn.Row(widget, widget2, widget3)

App

Lets wrap it into nice template that can be served via panel serve sync_location.ipynb

pn.template.FastListTemplate(
    site="Panel", 
    title="Sync Location", 
    main=[
        "This example demonstrates **how to sync widget state with the URL bar**. The widgets values are set from the URL parameters on page load and the URL parameters are set when a widget value changes.",
        pn.Column(widget, widget2, widget3),
    ], main_max_width="768px",
).servable();
This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).