With gr.HTML in Gradio 6, You Can Build a Full Web App from a Single Python File

gr.HTML, added in Gradio 6 by Hugging Face, turned out to be surprisingly capable. You can put HTML, CSS, and JavaScript directly inside a Python file and build an interactive web app without a build step. It pairs especially well with one-shot app generation, where an LLM writes the code and the app is up immediately.

How gr.HTML works

gr.HTML is a Gradio component built around four elements defined in Python:

• html_template - an HTML template where state can be injected with ${value.xxx}
• css_template - scoped CSS that does not leak into other components
• js_on_load - JavaScript for event handling and DOM manipulation
• value - state that syncs automatically between Python and JavaScript

gr.HTML(
    value={"count": 0},
    html_template="<button>Clicked ${value.count} times</button>",
    css_template="button { background: #667eea; color: white; }",
    js_on_load="""
        element.querySelector('button').onclick = () => {
            props.value = { count: props.value.count + 1 };
            trigger('change');
        };
    """
)

Assigning to props.value updates state on the JavaScript side, and trigger('change') syncs it back to Python. In effect, you get automatic two-way data binding.

Building reusable components

By subclassing gr.HTML, you can create custom components that behave like gr.Image or gr.Slider.

class Heatmap(gr.HTML):
    def __init__(self, value=None, theme="green", **kwargs):
        super().__init__(
            value=value,
            theme=theme,
            html_template=TEMPLATE,
            css_template=STYLES,
            js_on_load=SCRIPT,
            **kwargs
        )

A subclassed component can use Gradio event handlers such as .change() and .click() as-is. That makes it useful when you want to embed custom visualizations into an ML pipeline.

Practical use cases

The Hugging Face blog showcases examples like these.

Productivity tools: a Pomodoro timer with pixel-art animation, a GitHub contribution heatmap, and a Kanban board with drag-and-drop, inline editing, and real-time search.

3D and media: a camera-control viewport built with Three.js and a real-time transcription UI with a words-per-minute counter.

ML-specific UIs: bounding boxes and segmentation masks for object detection, plus skeleton rendering for pose estimation.

All of them fit in a single Python file. No React setup and no build configuration.

Why it works well with LLMs

The strongest use case for gr.HTML is probably LLM-generated code. In a conventional web app, you would split HTML, CSS, JavaScript, and Python or another backend language into separate files, then wire up build settings and deployment.

With gr.HTML, everything fits inside one Python file. If you ask an LLM to build a UI, it can return a single self-contained file. You can start it immediately with gradio app.py, iterate in seconds with reload mode, and deploy to Hugging Face Spaces with a single gradio deploy.

Gradio started as an easy UI framework for ML demos, but gr.HTML pushes it closer to a general-purpose web app framework. The buildless workflow and its fit with LLM-generated code make a lot of sense as an AI-era prototyping tool.

Original article: Hugging Face Blog