anywidget_counter_with_python_javascript_sync_and_css.py

1import anywidget
2import traitlets
3
4class CounterWidget(anywidget.AnyWidget):
5    # The JavaScript code that runs in the browser
6    _esm = """
7    function render({ model, el }) {
8      let count = () => model.get("value");
9      let btn = document.createElement("button");
10      btn.innerHTML = `count is ${count()}`;
11      btn.addEventListener("click", () => {
12        model.set("value", count() + 1);
13        model.save_changes();
14      });
15      model.on("change:value", () => {
16        btn.innerHTML = `count is ${count()}`;
17      });
18      el.appendChild(btn);
19    }
20    export default { render };
21    """
22    # The CSS styling for the widget
23    _css = """
24    button {
25      background-color: #f9f9f9;
26      padding: 10px;
27      border-radius: 8px;
28      border: 1px solid #ccc;
29      cursor: pointer;
30    }
31    """
32    # The state synchronized between Python and JavaScript
33    value = traitlets.Int(0).tag(sync=True)
34
35# To display the widget in a notebook:
36# counter = CounterWidget()
37# counter