Simple HTML usecase

This is the classic gr.HTML usecase where we just want to render some static HTML.

Templated HTML usecase

'value' can now be anything, and it can be used inside the html_template using ${value} syntax. Note that when used as output or input, value is just this specific value rather than the entire HTML.

Name

Additional Props

You are not limited to using ${value} in the templates, you can add any number of custom tags to the template, and pass them to the component as keyword arguments. These props can be updated via python event listeners as well.

Font Size

10 100

CSS Templating

We can also template CSS, which is automatically scoped to the component.

Person

Text Color

Bold Text

JS Prop Updates

We can now trigger events from gr.HTML using event listeners in js_on_load. This script has access to element which refers to the parent element, and trigger(event_name) or trigger(event_name, event_data), which can be used to dispatch events.

Clicked

JS Prop Changes

You can also update value or any other prop of the component from JS using props, e.g., props.value = "new value" will update the value prop and re-render the HTML template.

Output Box

Extending gr.HTML for new Components

You can create your own Components by extending the gr.HTML class.