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. Which means you can build pretty much 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 one is a single Python file, no build step, deployable to Hugging Face Spaces in seconds.

Productivity Apps

Pomodoro Timer: A focus timer where a pixel-art tree grows as you work. 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, all in one 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 can filter in real-time. Collapsible columns.

Drag-and-drop usually 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 can also add custom spinning segments on the fly.

ML Apps

This is where gr.HTML gets really interesting for ML work: you can build specialized components that can handle your exact output format, then use them like any built-in Gradio component.

The community's built some creative components with gr.HTML too: