Building Custom Panel Widgets Using ReactiveHTML
--
No library can cover all the specialized widgets a user may want… but a good one makes it easy for the user to create their own specialized widget that can be used alongside the library!
Panel is one of those cool libraries–you can create interactive web apps and data dashboards straight from Python code, but if you need more than what’s built-in, you can also create your own custom widgets using Panel’s ReactiveHTML class!
The ReactiveHTML class lets you add a dash of HTML to your Python code and, just as the name implies, make that HTML come alive with reactivity! If desired or needed, you can throw in some Jinja2 and/or Javascript into the mix too.
In this blog post, we will demo how to use ReactiveHTML for creating:
- collapsible sections
- toggle icons
And demonstrate how we can integrate these components into built-in Panel components.
Let’s get to it!
Collapsible Sections
Bootstrapping with ChatGPT
To get started using ReactiveHTML, you need an HTML template. If you’re unfamiliar with HTML, don’t fret; there are tons of examples so ChatGPT can synthesize an example easily!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details Tag Example</title>
</head>
<body>
<h1>Expandable Content</h1>
<details>
<summary>Click to expand</summary>
<p>This is some hidden content that can be expanded and collapsed.</p>
</details>
<p>Other content on the page...</p>
</body>
</html>If we save this code to index.html and open it, we get the following:
Since we just want the collapsible section, let’s only extract the details tag and start building our custom ReactiveHTML widget.
import panel as pn
pn.extension()
class…
