Notebook

In [ ]:

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:

In [ ]:

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

In [ ]:

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();