HTML Interface

Supported HTML Elements

The Interface designer supports the following elements and input types:

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.

Add an HTML interface element

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.
  1. With cursor focus on the interface object:

    • Press Shift+Enter.

      Or

    • Right-click and choose Edit from the context menu.

  2. In the Interface Designer tab, select the HTML option.

  3. Click and drag the box to enlarge it a bit.

  4. Right-click on the designer panel to open the insert elements menu.

    HTML Insertable Elements
    Interface HTML insertable elements
  5. Choose an option, give it a name, and click the save icon.

  6. Repeat for each element you want to add in the interface mockup.

  7. Click and drag to align an element.

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

    HTML interface details

Edit an HTML interface element

  1. To edit an HTML element, right-click on it in the Designer tab and choose Edit Element.

  2. Make your changes.

  3. 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.

Right-click menu edit delete options for HTML elements
Interface HTML right-click menu

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.