Gradio gr.HTML enables one-shot web apps in Python | Keryc
Gradio 6 quietly added a feature that changes the rules of prototyping: gr.HTML now supports custom templates, scoped CSS and interactive JavaScript. What does that mean? You can build almost any web component and ask an LLM (like Claude or another front model) to generate everything in a single Python file: frontend, backend and state handling ready to run.
What gr.HTML does and why it matters
If you've ever been stuck between writing a React component and hooking it to your model, this is for you. gr.HTML lets you embed html_template, css_template and js_on_load inside a Gradio component. In other words: all UI code lives in a single class or instance that serializes with Python state.
html_template defines the HTML structure.
css_template contains styles, with scope to avoid global leaks.
js_on_load hooks native interactivity and can update .
props.value
Communication is simple: props.value injects state from Python to JS, and when JS changes props.value and calls trigger('change'), the state travels back to Python. That's the whole API to sync frontend and backend.
In practice: you describe what you want, the LLM generates a single app.py, you run it, you improve it and repeat. Each iteration takes seconds with Gradio's reload mode.
Real examples that prove the power
They tested full apps, each in a single Python file and without build steps. A few ideas that show the range:
Pomodoro with pixel-art tree: the tree animation is just @keyframes in css_template and state changes in js_on_load. No extra React components.
GitHub-style contribution heatmap: clickable cells that change state, color themes and pattern generators. Live stats that update as you edit.
Kanban: drag and drop between columns, inline edit with double click and search that filters in real time. All with native HTML5 events and sync to Python.
Spin-to-Win: smooth CSS animation and persistence of state across rerenders. Great for random decisions or team selection.
Detection Viewer: specialized viewer for detection, segmentation and pose estimation results. Renders bounding boxes, masks, keypoints and connections, and plugs straight into your model pipeline.
The community also showed creative components:
3D control with Three.js inside Gradio: a full viewport where uploaded images interact with camera parameters that feed an image-editing model.
Real-time transcription: an interface showing WPM, animated badges and active transcription with Voxtral, without standing up a separate frontend.
How to build a reusable component
The API is minimalist. Here's a direct usage example:
And if you want to reuse this component, subclass it so it behaves like any 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
)
# Now Heatmap() is used in Blocks, receives events and keeps state.
Practical considerations and security
One-shot flow: asking an LLM to generate a single Python file with all the HTML/CSS/JS is ideal. You avoid instructions like "create the stylesheet file" or "set up the build".
Debug fast: use demo.launch(share=True) or gradio deploy to get onto Spaces in seconds. The describe → generate → run → tweak loop is very short.
Performance: for prototypes and ML interfaces this is great. If your UI grows a lot in complexity or traffic, consider splitting frontend and backend for maintenance and performance reasons.
Security: the component accepts JavaScript. In public environments review XSS risks or execution of unwanted code. For demos and quick prototypes it works perfectly; in production validate and limit what runs.
Why this changes the experience with LLMs and ML
Because now an LLM can return not just a snippet, but a complete app that accepts inputs, shows complex outputs and maintains state. That reduces friction for researchers, product managers and developers: less setup, more iteration.
If you have a specific output format for your model, you build a gr.HTML that renders it exactly how you want and use it like a native component. Combining that with frontier models to generate code makes prototyping a full idea a matter of minutes.
Give yourself a couple of hours to experiment with a prototype: describe the UI to your LLM, ask for the app.py file and run it. You'll see the difference between building and actually shipping a demo.
Summary: Gradio 6 expands gr.HTML with HTML templates, scoped CSS and interactive JS, letting you create full web apps in a single Python file. This makes one-shot prototypes generated by LLMs easier, from timers and Kanban boards to detection viewers and 3D controls, all deployable on Hugging Face Spaces.
Stay up to date!
Get AI news, tool launches, and innovative products straight to your inbox. Everything clear and useful.
Gradio gr.HTML enables one-shot web apps in Python
