Skip to main content

HTML

A content area to embed HTML and CSS markup.

HTML supports most HTML tags and presentational attributes. Scripting is not supported but the event handlers are available. To attach an event handler to a specific element in the HTML, add a data-<event type>-target attribute. For example:

<button data-click-target="primary">Trigger event</button>

To embed web pages, use an IFrame component. For functionality that isn't available in other components, or to use React or HTML and JavaScript, use a Custom Component.

Demo

Settings

HTML includes the following configurable options when building apps in the IDE.

CSSHTMLShow on desktopShow on mobileMaintain space when hiddenMarginAlways show in edit modeStylesHelper text

Properties

All properties for HTML with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

clickable

boolean

Whether there is an enabled Click event handler.

css

string

The CSS content.

global

boolean

Whether the object is globally scoped for use in all app pages.

boolean

Whether the component is visible.

html

string

The HTML content.

id

string

The unique identifier.

Whether the component is visible in the desktop layout.

Whether the component is visible in the mobile layout.

Whether the component takes up space on the canvas if hidden is true.

The amount of margin to render outside.

Values
4px 8px

Normal margin.

0

No margin.

pluginType

string

The plugin type.

Whether to remain visible in the editor if hidden is true.

style

object

Custom style options in use. Not all style options may be available for all components.

The tooltip text to display.