# 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](https://docs.zep.us/zep-script/zep-script-api/scriptapp/methods) 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**](https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/zep-script-deployment-guide).
{% endhint %}