HTML

The HTML component allows you to display HTML content.

The following section details HTML component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:

App Editor Documentation

The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.

Apps Quickstart

Learn how to build your first app in a matter of minutes.

Data source

Type	Connectable	Templatable	Default	Description
string	true	true	<img src="****"><h1 class="absolute top-4 left-2 text-white">Hello ${ctx.username}</h1>	The HTML content to render

Controls

This component can be controlled by frontend scripts using these functions:

Name	Parameters	Description	Example
recompute	id: string	Recompute a component.	recompute('a');

Outputs

Name	Type	Description
result	string	The HTML.
loading	boolean	The loading state of the HTML component.

Calling Frontend runnables

You can call frontend runnable from your HTML component. To do so, you can use the following syntax:

<button onclick="window.parent.postMessage('Hello');">Say Hello</button>

You can now catch the message in your frontend runnable:

window.addEventListener(
	'message',
	(event) => {
		if (event.data === 'hello') {
			alert('hello');
			// You also interact with the app state here for example
		}
	},
	false
);