---
title: "One-Shot Any Web App with Gradio's gr.HTML"
description: "The post presents Gradio 6’s gr.HTML as a way to build interactive web components in a single Python file, combining custom HTML templates, scoped CSS, and JavaScript interactivity without a separate build step. It describes applications including a Pomodoro timer, contribution heatmap, Kanban board, spinning wheel, and machine-learning viewers for detection, 3D camera control, and speech transcription. Within the component API, ${value} injects Python state into the template, props.value updates that state from JavaScript, and trigger('change') synchronizes it back to Python; CSS keyframes and native HTML5 drag events supply richer behavior. For reuse, a gr.HTML subclass packages the templates and script so the result can be used like built-in Gradio components, while reload mode and Spaces deployment support rapid iteration from generated code to a live app."
---

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

[Hugging Face](https://yomu.fyi/company/hugging-face) · yuvraj sharma, hysts, Freddy Boulton · Feb 18, 2026

**Type:** Tutorial

## Summary

The post presents Gradio 6’s gr.HTML as a way to build interactive web components in a single Python file, combining custom HTML templates, scoped CSS, and JavaScript interactivity without a separate build step. It describes applications including a Pomodoro timer, contribution heatmap, Kanban board, spinning wheel, and machine-learning viewers for detection, 3D camera control, and speech transcription. Within the component API, ${value} injects Python state into the template, props.value updates that state from JavaScript, and trigger('change') synchronizes it back to Python; CSS keyframes and native HTML5 drag events supply richer behavior. For reuse, a gr.HTML subclass packages the templates and script so the result can be used like built-in Gradio components, while reload mode and Spaces deployment support rapid iteration from generated code to a live app.

## Context

The post addresses the need for custom interactive web components beyond Gradio’s 32 built-in components, especially when a generated app should remain a single Python file with no separate frontend build step.

## Approach / What changed

It uses gr.HTML custom templates, scoped CSS, and js\_on\_load scripts. Python state is injected through ${value}, JavaScript changes props.value, and trigger('change') synchronizes state back to Python. Reusable components are created by subclassing gr.HTML, then placed in Gradio Blocks and connected to event handlers.

## Takeaways

- gr.HTML supports custom HTML, CSS, and JavaScript, allowing interactive components such as timers, heatmaps, Kanban boards, and spinning wheels to be implemented in one Python file.
- Native HTML5 drag events can provide Kanban functionality without a separate library, with state synchronized back to Python through props.value and trigger('change').
- A gr.HTML subclass can package a specialized ML interface, including detection boxes, segmentation masks, keypoints, or skeleton connections, and be used like a built-in Gradio component.

**Tags:** [Developer Experience](https://yomu.fyi/topic/developer-experience), [Machine Learning](https://yomu.fyi/topic/machine-learning), [Open Source](https://yomu.fyi/topic/open-source), [Python](https://yomu.fyi/topic/python)

- Source: [Hugging Face](https://huggingface.co/blog/gradio-html-one-shot-apps)
- Source URL: https://huggingface.co/blog/gradio-html-one-shot-apps
- Ingested by Yomu: 2026-08-28T16:00:51.277Z

[Read original post](https://huggingface.co/blog/gradio-html-one-shot-apps)