Skip to content

HTML Element

A generic component that creates customisable HTML elements, which can serve as containers for other components.

You can configure the element type, styles, and attributes to fit your design requirements. You can link them to state for advanced use cases, such as custom animations.

All valid HTML tags are supported, including tags such as iframe, allowing you to embed external sites.

Take into account the potential risks of adding custom HTML to your app, including XSS. Be specially careful when injecting user-generated data.

Fields

NameTypeDescriptionOptions
ElementTextSet the type of HTML element to create, e.g., 'div', 'section', 'span', etc.
StylesObjectDefine the CSS styles to apply to the HTML element using a JSON object or a state reference to a dictionary.
AttributesObjectSet additional HTML attributes for the element using a JSON object or a dictionary via a state reference.
HTML insideTextDefine custom HTML to be used inside the element. It will be wrapped in a div and rendered after children components.
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.HTMLElement(content={
        "element": "", # str 
        "styles": {}, # Union[Dict, str] 
        "attrs": {}, # Union[Dict, str] 
        "htmlInside": "", # str 
        "cssClasses": "", # str 
    }
)

Reference