Skip to main content
The HTML component renders arbitrary HTML with support for CSS and JavaScript.

​
Basic usage

import gradio as gr

def create_html():
    return "<h1>Hello World!</h1>"

gr.Interface(
    fn=create_html,
    inputs=gr.Button("Generate"),
    outputs=gr.HTML()
).launch()

​
Constructor

​
value
str | Callable | None
default:"None"
HTML content to display
​
label
str | None
default:"None"
Label for the component
​
visible
bool
default:"True"
Whether component is visible

​
Events

  • change - Triggered when HTML content changes

​
Examples

​
With inline CSS

import gradio as gr

html_content = """
<div style="background: linear-gradient(45deg, #FF6B6B, #4ECDC4); 
            padding: 20px; 
            border-radius: 10px; 
            color: white;">
    <h2>Styled Content</h2>
    <p>This is custom HTML with CSS styling.</p>
</div>
"""

gr.HTML(value=html_content)

​
Interactive content

import gradio as gr

def generate_chart(data):
    return f"""
    <div id="chart">
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script>
            Plotly.newPlot('chart', [{{{data}}}, {{layout}});
        </script>
    </div>
    """