> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML

> Display custom HTML content

The HTML component renders arbitrary HTML with support for CSS and JavaScript.

## Basic usage

```python theme={null}
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

<ParamField path="value" type="str | Callable | None" default="None">
  HTML content to display
</ParamField>

<ParamField path="label" type="str | None" default="None">
  Label for the component
</ParamField>

<ParamField path="visible" type="bool" default="True">
  Whether component is visible
</ParamField>

## Events

* **change** - Triggered when HTML content changes

## Examples

### With inline CSS

```python theme={null}
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

```python theme={null}
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>
    """
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.