Gradio 6 quietly shipped a really powerful feature: gr.HTML now supports custom templates, scoped CSS, and JavaScript interactivity. Which implies you’ll be able to construct just about any web component — and Claude (or some other frontier LLM) can generate the entire thing in a single shot: frontend, backend, and state management, all in a single Python file.
We tested this by constructing various kinds of apps. Each is a single Python file, no construct step, deployable to Hugging Face Spaces in seconds.
Productivity Apps
Pomodoro Timer: A spotlight timer where a pixel-art tree grows as you’re employed. Starts as a seed, sprouts branches, grows leaves. Complete a session and the tree joins your forest. Session tracking, theme switching, break modes — all interactive, multi function file.
The tree animation alone would normally require a separate React component. Here it’s just CSS keyframes in css_template and state updates in js_on_load.
Business Apps
GitHub Contribution Heatmap: Click any cell to toggle contributions. Multiple color themes. Pattern generators (streaks, seasonal, random). Live stats that update as you edit.
Kanban Board: Full drag-and-drop between columns. Inline editing (double-click any card). Search feature that may filter in real-time. Collapsible columns.
Drag-and-drop normally means pulling in a library. Here it’s native HTML5 drag events wired up in js_on_load, with state synced back to Python via trigger('change').
Creative Apps
Spin-to-Win Wheel: Smooth CSS animation, rotation state that persists across re-renders. Preset configurations for yes/no decisions, restaurant picking, team selection. You may also add custom spinning segments on the fly.
ML Apps
That is where gr.HTML gets really interesting for ML work: you’ll be able to construct specialized components that may handle your exact output format, then use them like all built-in Gradio component.
Detection Viewer: A custom viewer for object detection, instance segmentation, and pose estimation results. Renders bounding boxes, segmentation masks, keypoints, and skeleton connections — all in a reusable gr.HTML subclass that plugs directly into your model pipeline.
The community’s built some creative components with gr.HTML too:
3D Camera Control for Image Editing: A full Three.js viewport inside a Gradio app! Drag handles to regulate azimuth, elevation, and distance. Your uploaded image appears within the 3D scene, and the camera parameters feed directly into Qwen’s latest image editing model. These sorts of interactive 3D controls would normally require a separate frontend — with Gradio it’s only one gr.HTML subclass🔥
Real-time Speech Transcription: Live transcription with Mistral’s Voxtral model. The transcript display is a custom gr.HTML component with animated status badges, a live WPM counter, and styled output that updates as you speak. Real-time UI feedback without using React!
How It Works
Every gr.HTML component takes three templates:
gr.HTML(
value={"count": 0},
html_template="",
css_template="button { background: #667eea; color: white; }",
js_on_load="""
element.querySelector('button').onclick = () => {
props.value = { count: props.value.count + 1 };
trigger('change');
};
"""
)
${value} injects Python state. props.value updates it from JavaScript. trigger('change') syncs back to Python. That is the whole API.
For reusable components, subclass gr.HTML:
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() works like gr.Image() or gr.Slider() — use it in Blocks, wire up event handlers, whatever you wish.
Why This Matters for Vibe Coding
While you ask your LLM to construct a custom component, single-file output is every thing. No “now create the styles file” or “wire this into your construct config.” Only one Python file that runs immediately.
The feedback loop becomes: describe what you wish → get code → gradio app.py → see it working → describe what to repair → repeat. Each cycle takes seconds with Gradio’s reload mode.
Deploy to Spaces with gradio deploy or share a short lived link with demo.launch(share=True). Inside a number of seconds from an idea to a live app.
Gradio ships with 32 interactive components, but sometimes your perfect AI web app needs something special. That is where gr.HTML is available in.
Should you’ve got an idea, try constructing it with gr.HTML: describe what you would like to your LLM, generate the code, run it. You is perhaps surprised what you’ll be able to ship in 5 minutes.
Suggested reading:
