How listen button click event in python

[dingzb]

I saw examples of front-end and back-end communication using Traitlets and Custom messages. My idea is through Custom messages, but the examples don't show how to trigger Custom messages in the front-end code (in React) or how to listen for Custom messages in Python. I'm seeking help with this, thank you.

[saraedum]

To send a custom message from the frontend, use model.send, that part is in the documentation.

To react to a custom message in Python, use on_msg from DOMWidget.

[manzt]

Thanks for the question. You can register a callback to receive custom messages from the front end like @saraedum mentioned with AnyWidget.on_msg. In the front end, you can send messages with model.send:

import anywidget

class ButtonWidget(anywidget.AnyWidget):
    _esm = """
    export default {
        render({model, el}) {
            const button = document.createElement("button");
            button.textContent = "Click me";
            button.onclick = () => model.send("hello, world");
            el.appendChild(button);
        }
    }
    """

button_widget = ButtonWidget()
button_widget.on_msg(lambda _, content, _buffers: print(content))
button_widget

Note, seeing "print" statements inside Jupyter Lab from within a callback requires looking at the Jupyter logs.

I put together a more sophisticated example in a marimo notebook where the widget creates a form input that sends messages to Python and displays them reactively.

Screen.Recording.2025-07-13.at.10.06.52.PM.mov

uvx marimo edit https://gist.githubusercontent.com/manzt/8079945403bb0e08fdf1a591212205b5/raw/99219f9dcc580963f529674ab0ab6e7a1e37da58/custom_messages.py