Add doc about how to interact with frontend runnables from HTML component (windmill-labs#458)

fatonramadani · web-flow · commit 9fe519efa23b · 2024-01-08T14:29:08.000+01:00
diff --git a/docs/apps/4_app_configuration_settings/html.mdx b/docs/apps/4_app_configuration_settings/html.mdx
@@ -1,4 +1,3 @@
-
 import DocCard from '@site/src/components/DocCard';
 
 # HTML
@@ -10,18 +9,18 @@ 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](../0_app_editor/index.mdx) or the App Editor [Quickstart](../../getting_started/7_apps_quickstart/index.mdx):
 
 <div class="grid grid-cols-2 gap-6 mb-4">
-    <DocCard
-        color="orange"
-        title="App Editor Documentation"
-        description="The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code."
-        href="/docs/apps/app_editor"
-    />
-    <DocCard
-        color="orange"
-        title="Apps Quickstart"
-        description="Learn how to build your first app in a matter of minutes."
-        href="/docs/getting_started/apps_quickstart"
-    />
+	<DocCard
+		color="orange"
+		title="App Editor Documentation"
+		description="The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code."
+		href="/docs/apps/app_editor"
+	/>
+	<DocCard
+		color="orange"
+		title="Apps Quickstart"
+		description="Learn how to build your first app in a matter of minutes."
+		href="/docs/getting_started/apps_quickstart"
+	/>
 </div>
 
 ## HTML Input
@@ -36,3 +35,26 @@ The following section details HTML component's specific settings. For more detai
 | ------- | :-----: | ---------------------------------------- |
 | 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:
+
+```html
+<button onclick="window.parent.postMessage('Hello');">Say Hello</button>
+```
+
+You can now catch the message in your frontend runnable:
+
+```js
+window.addEventListener(
+	'message',
+	(event) => {
+		if (event.data === 'hello') {
+			alert('hello');
+			// You also interact with the app state here for example
+		}
+	},
+	false
+);
+```
