gradio HTML — your own markup, CSS, JS and Python callbacks in one component

$ import gradio as gr

CARD = """
<table style="width:100%;border-collapse:collapse">
  <tr><th align="left">checkpoint</th><td>efficientnet-b0</td></tr>
  <tr><th align="left">params</th><td>5.3M</td></tr>
  <tr><th align="left">val accuracy</th><td>77.7%</td></tr>
</table>
"""

with gr.Blocks() as demo:
    gr.HTML(CARD, elem_classes=["model-card"], container=True, max_height=120)
    gr.Textbox(label="prompt")

demo.launch()

* Running on local URL:  http://127.0.0.1:7946
* To create a public link, set `share=True` in `launch()`.

DOM, measured in headless Chromium against gradio 6.18.0:
  <div class="block model-card padded auto-margin">      <- container=True drops hide-container
    <div class="html-container" style="max-height: 120px; overflow-y: auto;">
      <div class="prose gradio-style model-card">  <table>…</table>  </div>
    </div>
  </div>

Rendered text: 'checkpoint efficientnet-b0 | params 5.3M | val accuracy 77.7%'
Scroll behaviour: scrollHeight 143 px vs clientHeight 120 px, so the card scrolls inside its box instead of pushing the prompt field down.

container=True is what draws the box: white background, 1 px border, 10px 12px padding. max_height lands as an inline style on the inner .html-container together with overflow-y: auto — you don't have to write any CSS for the scroll.

$ import gradio as gr

scores = [{"label": "golden retriever", "score": 0.82},
          {"label": "labrador", "score": 0.11},
          {"label": "tennis ball", "score": 0.04}]
bars = "{{#each value}}<div class='row'><span>{{this.label}}</span><b>{{this.score}}</b></div>{{/each}}"
css  = ".row { display: flex; justify-content: space-between; font: 600 0.9rem/1.6 ui-monospace, monospace; }"

with gr.Blocks() as demo:
    gr.HTML(scores, html_template=bars, css_template=css, container=True, elem_id="bars")
    gr.HTML(scores, html_template="<p>top-1 = ${JSON.stringify(value[0])}</p>")

demo.launch()

Rendered rows (innerText of each .row):
  ['golden retriever\n0.82', 'labrador\n0.11', 'tennis ball\n0.04']
.row computed style: display: flex

css_template is not inlined into the markup. A separate <style> element shows up in document.head:
  #html-oenhgt4qz { .row { display: flex; justify-content: space-between; font: 600 0.9rem/1.6 ui-monospace, monospace; } }

The second component prints:
  top-1 = {"label":"golden retriever","score":0.82}

`{{#each value}}` re-binds the Handlebars context to the current row, which is why `{{this.label}}` resolves; used outside the each-block the context is the props object and unknown keys render as empty strings. `${JSON.stringify(value[0])}` works because html_template is evaluated a second time as a JS template literal.

$ import gradio as gr

CHIPS_JS = """
element.querySelectorAll('.chip').forEach(function (btn) {
  btn.addEventListener('click', function () { trigger('pick', {label: btn.innerText}); });
});
"""

with gr.Blocks() as demo:
    chips = gr.HTML(["golden retriever", "labrador", "tennis ball"],
                    html_template="{{#each value}}<button class='chip'>{{this}}</button>{{/each}}",
                    css_template=".chip { margin: 4px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }",
                    js_on_load=CHIPS_JS, container=True)
    picked = gr.Textbox(label="picked", elem_id="picked")

    def on_pick(evt: gr.EventData):
        return evt.label

    chips.pick(on_pick, outputs=picked)

demo.launch()

The HTML block renders three buttons inside the component: 'golden retriever', 'labrador', 'tennis ball'.
Clicking the third one (verified with Playwright) fired the custom event and the Textbox labelled 'picked' became:
  'tennis ball'

So `chips.pick(...)` — an event name that exists nowhere in the Gradio API — behaves exactly like .click(): it runs a Python function, shows in the component's events, and receives gr.EventData with .label set.

Any event name you quote inside js_on_load becomes a real Python event (since 6.9.0, PR #12967). Gradio raises a helpful AttributeError if you get the name wrong: "If 'pick' is a custom event, make sure to include 'pick' (enclosed in quotes) in the js_on_load string."

$ import gradio as gr

STATS = {"warehouse/": {"files": 3, "rows": 1240}}

def count_rows(prefix, limit=100):
    """Runs in Python; the browser calls it as server.count_rows()."""
    return STATS.get(prefix, {"files": 0, "rows": 0}) | {"limit": limit}

STAT_JS = """
(async () => {
  const d = await server.count_rows('warehouse/');
  element.querySelector('#stat').textContent =
    d.files + ' files, ' + d.rows + ' rows (limit ' + d.limit + ')';
})();
"""

with gr.Blocks() as demo:
    gr.HTML("<div id='stat'>loading…</div>", container=True, padding=True,
            head="<script src='https://example.com/chart.min.js'></script>",
            server_functions=[count_rows], js_on_load=STAT_JS)

demo.launch()

Inside the running app (gradio 6.18.0, verified with Playwright):
  #stat textContent -> '3 files, 1240 rows (limit 100)'

That number came out of Python. The default argument limit=100 arrived as 100, and the dict returned by count_rows() arrived in the browser as a JS object.

head: two components declared the same <script src>, document.querySelectorAll("script[src*=chart.min]").length was 1 — head scripts are deduplicated by src. The loaded script had already run before js_on_load: window.__headProbe was 'loaded-from-head-7955' even though js_on_load is what reads it.

count_rows() runs in the same process as your event listeners, so server_functions is a direct line to your models, SQLite files or queues — no FastAPI route, no gradio_client. Errors inside the JS side only land in the browser console, so wrap the call in try/catch while you build.