One-Shot Any Web App with Gradio's gr.HTML

Gradio 6 quietly shipped a very powerful feature: gr.HTML now supports custom templates, scoped CSS, and JavaScript interactivity. This means you can build almost any web component — and Claude (or any other frontier LLM) can generate the whole thing in one shot: frontend, backend, and state management, all in a single Python file.

We tested this by building different types of apps, each a single Python file with no build step, deployable to Hugging Face Spaces in seconds:

• Pomodoro Timer: A focus timer where a pixel-art tree grows as you work. Session tracking, theme switching, and break modes are all interactive and contained in one file.
• GitHub Contribution Heatmap: Click any cell to toggle contributions with multiple color themes and live stats.
• Kanban Board: Full drag-and-drop between columns using native HTML5 events wired up in js_on_load, with state synced back to Python via trigger('change').
• Spin-to-Win Wheel: Smooth CSS animation with rotation state that persists across re-renders.

This is where gr.HTML gets really interesting for ML work: you can build specialized components like a Detection Viewer for object detection and pose estimation, or a 3D Camera Control using Three.js inside a Gradio app.

Every gr.HTML component takes three templates: html_template, css_template, and js_on_load. ${value} injects Python state, props.value updates it from JavaScript, and trigger('change') syncs it back.

For reusable components, you can simply subclass gr.HTML. When working with LLMs, this single-file output simplifies the development loop significantly: describe → generate → run → repeat. Gradio ships with 32 interactive components, but for everything else, there's gr.HTML.