    ---
    import CodeHero from "../CodeHero.astro";

    let widgetCode = `
    import anywidget
    import traitlets

    class CounterWidget(anywidget.AnyWidget):
        _esm = """
        function render({ model, el }) {
          let count = () => model.get("value");
          let btn = document.createElement("button");
          btn.innerHTML = \`count is \${count()}\`;
          btn.addEventListener("click", () => {
            model.set("value", count() + 1);
            model.save_changes();
          });
          model.on("change:value", () => {
            btn.innerHTML = \`count is \${count()}\`;
          });
          el.appendChild(btn);
        }
        export default { render };
        """
        value = traitlets.Int(0).tag(sync=True)
    `;

    let notebookCode = `\
    from mywidget import CounterWidget

    counter = CounterWidget()
    counter`;
    ---