HTML Interface

Supported HTML Elements

The Interface designer supports the following elements and input types:

Element/Input Type Description

Element/Input Type	Description
`<a>`	Inserts an underlined text that represents a link. Anchor element used in conjunction with an `href` element to link to other resources.
`<button>`	Inserts an image of a clickable button with its label.
`<input type="checkbox">`	Inserts a checkbox with its label.
`<input type="file">`	Inserts a file selector mockup with its label.
`<img>`	Inserts an image.
`list`	Inserts a mockup of a nested unordered list.
`<input type="password">`	Inserts a password field with its label.
`<select`	Builds a menu with its available options. Inserts a small representation of a drop menu.
`<table>`	Inserts a small table mockup.
`input type="text"`	Inserts a text field with its label.
`<textarea>`	Inserts a text box area.

<a>

Inserts an underlined text that represents a link. Anchor element used in conjunction with an href element to link to other resources.

<button>

Inserts an image of a clickable button with its label.

<input type="checkbox">

Inserts a checkbox with its label.

<input type="file">

Inserts a file selector mockup with its label.

<img>

Inserts an image.

list

Inserts a mockup of a nested unordered list.

<input type="password">

Inserts a password field with its label.

<select

Builds a menu with its available options. Inserts a small representation of a drop menu.

<table>

Inserts a small table mockup.

input type="text"

Inserts a text field with its label.

<textarea>

Inserts a text box area.

Add an HTML interface element

Prerequisite: Create an interface container object

You can include a Figma wireframe in your model instead of defining the HTML elements. The HTML option can suffice as a mockup until your Figma wireframes are ready, if you use Figma as your wireframe tool.

With cursor focus on the interface object:
- Press Shift+Enter.
  
  Or
- Right-click and choose Edit from the context menu.
In the Interface Designer tab, select the HTML option.
Click and drag the box to enlarge it a bit.
Right-click on the designer panel to open the insert elements menu.

Interface HTML insertable elements
Choose an option, give it a name, and click the save icon.
Repeat for each element you want to add in the interface mockup.
Click and drag to align an element.

Interface designer HTML
(Optional) In the Details tab, click Edit, enter a Description and click Save. You can also edit the Name.

Edit an HTML interface element

To edit an HTML element, right-click on it in the Designer tab and choose Edit Element.
Make your changes.
Click the save icon.

Delete an HTML interface element

To delete an HTML element, right-click on it in the Designer tab and choose Delete Element.

To exit the Interface editor and return to the model canvas, click the X in the Interface editor, or click anywhere on the model canvas.