HTML

A content area to embed HTML and CSS markup.

HTML supports most HTML tags and presentational attributes. Scripting is not supported but event handlers are available.

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.

CSSHiddenHTMLShow 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.

---

hidden

boolean

Whether the component is visible.

---

html

string

The HTML content.

---

id

string

The unique identifier.

---

isHiddenOnDesktop

boolean

Whether the component is visible in the desktop layout.

---

isHiddenOnMobile

boolean

Whether the component is visible in the mobile layout.

---

maintainSpaceWhenHidden

boolean

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

---

margin

enum

The amount of margin to render outside.

Values

4px 8px	Normal margin.
0	No margin.

---

pluginType

string

The plugin type.

---

showInEditor

boolean

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.

---

tooltipText

string

The tooltip text to display.

---

Events

Events are triggered by user interactions, such as clicking a button or entering a value. Use event handlers to trigger queries or other actions in response to events.

To attach an event handler to a specific element in the HTML, add a data-<event type>-target attribute. For example:

Click event handler

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

change

The value is changed.

---

click

The item is clicked or pressed.

---