ReactiveHTML and Preact

I’ve been working on improved documentation for ReactiveHTML. As a part of that I’ve been exploring Preact.

Preact is a an alternative to React that is worth considering because

  • Its faster
  • It supports jsx like syntax via htm.

I don’t want to mention Preact in the documentation at the current stage because I have not yet been able to successfully use it with for example React frameworks like MaterialUI. But I want to persist and share the example if someone ever wonders if Preact can be used with Panel and how.

Todo List Example

import panel as pn
import param
from panel.reactive import ReactiveHTML


class TodoList(ReactiveHTML):
    title = param.String("Todo List")
    todos = param.List()

    _template = '<div id="container"></div>'

    __javascript__ = [

    _scripts = {
        "render": """
const {render, html, Component} = htmPreact

const Header = ({ name }) => html`<h1>${name}</h1>`

class App extends Component {
      addTodo() {
        data.todos=data.todos.concat(`Item ${data.todos.length}`)
      reset() {
      render({title, todos}) {
        return html`
          <div class="app">
            <${Header} name="${title}" />
              ${ => html`
                <li key=${todo}>${todo}</li>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
            <button onClick=${() => this.reset()}>Reset</button>

  app = html`<${App} title=${data.title} todos=${data.todos} />`
  render(app, container);
        "todos": "state.rerender()",
        "title": "state.rerender()",

component = TodoList(width=500)
pn.Column(component, component.param.title, component.param.todos).servable()


Worth noting that ReactiveHTML itself is built using Preact.


This looks like you have to be concerned with something other than pure Python… troublesome for me :slight_smile:

1 Like

Not really. Most users would not have to be concerned with Javascript or React. That is the whole point. But developers who want to extend the framework have the opportunity to do so.