# Using HTML
1. You can draw any shape of UI on the ZEP canvas. In ZEP, UI elements are expressed through HTML.
2. You can bring an HTML file to a certain location using the `App.showWidget()`function. In this case, the file name, alignment, as well as width and height of the widget can be configured using arguments. Please refer to the [ScriptApp’s Methods](/zep-script/zep-script-api/scriptapp/methods.md) page for more information on values for alignment.
3. You can send the desired value to the HTML file using the `sendMessage()` method to the created variable.
4. Write the HTML syntax as shown below (my.html) and then use `addEventListener` to receive the message sent from main.js.
* main.js
```jsx
//Set in advance the UI location values as variables
let position = 'middle';
let width = 400;
let height = 400;
// Create a tag called "state" using "my.html" and pass the value "hello"
let _widget = App.showWidget('my.html', position, width, height);
_widget.sendMessage({
state: "hello",
});
```
* my.html
{% code overflow="wrap" %}
```html
-
```
{% endcode %}
{% hint style="warning" %}
Please Note
\- For the tutorial, we recommend setting the app type to Installable App.
\- The JSON file name must be “main.” Please create a new text file and name it “main.js.”
\- If you do not know how to deploy an app, please refer to the [**ZEP Script Deployment Guide**](/zep-script/zep-script-guide/zep-script-development-guide/zep-script-deployment-guide.md).
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.zep.us/zep-script/zep-script-guide/explore-zep-script/tutorials/using-html.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.