HXML vs HTML

Hyperview XML (HXML) is an XML-based format used to describe the layout of mobile apps. It draws inspiration from HTML, but differs in a few key ways. This guide describes some of the important differences to help the transition from writing HTML to writing HXML.

Structure

XML

HTML does not need to be well-formed according to the XML standard. HXML follows strict XML formatting rules. All core HXML elements belong to the namespace https://hyperview.org/hyperview.

Top-level docs

In HTML, the <html> element defines one web page.

<html>
  <body>
    Hello
  </body>
</html>

In HXML, the <doc> element can define multiple app screens.

<doc xmlns="https://hyperview.org/hyperview">
  <screen id="main">
    <body>
      <text>Hello</text>
    </body>
  </screen>

  <screen id="otherScreen">
    <body>
      <text>Hello again</text>
    </body>
  </screen>
</doc>

Basic elements

In HTML, <div> is the basic container element.

In HXML, <view> is the basic container element.

Text content

In HTML, text content can appear in any element:

<div>Hello!</div>

In HXML, text content can only appear in <text> elements:

<view>
  <text>Hello!</text>
</view>

Form inputs

In HTML, the <input> element has a type attribute that's used to render the element as a checkbox or radio input. The use of a shared name attribute determines the behavior of a group of inputs (whether one or multiple can be selected).

In HXML, two parent elements called <select-single> and <select-multiple> take several <option> elements. The outer element determines whether one or many options can be selected. The <option> element has no default styling, and can be customized to look like a checkbox, button, or anything else.

References & behaviors

href

In HTML, the href can only appear on <a> elements.

<a href="/page2">Hello</a>

In HXML, the href attribute can appear on most UI elements, including <view>, <image>, <text>, <item>, etc.

<view href="/page2">
  <text>Hello</text>
</view>

In HTML, the href can be a relative URI or absolute URL. In HXML, the href attribute can additionally refer to any element id in the current <doc>.

<doc xmlns="https://hyperview.org/hyperview">
  <screen id="main">
    <body>
      <text href="#otherScreen">Hello</text>
    </body>
  </screen>

  <screen id="otherScreen">
    <body>
      <text>Hello again</text>
    </body>
  </screen>
</doc>

action

In HTML, clicking on an anchor element will always open the href in a new page. In HXML, elements with an href can also specify an action attribute. Some actions will open new screens, but other actions will modify the current screen by replacing/injecting the response content into the screen's XML.

<doc xmlns="https://hyperview.org/hyperview">
  <screen id="main">
    <body id="Body">
      <text href="/page2">Push a new screen</text>
      <text href="/page2" action="new">Open a new screen as a modal</text>
      <text
        href="/fragment"
        action="replace"
      >Replace this element with the response content</text>
      <text
        href="/fragment"
        action="append"
      >Append the response content to this screen</text>
    </body>
  </screen>
</doc>

target

In HTML, the target attribute on an <a> element can be used to determine if the href opens in a new window or the same window.

In HXML, the target attribute is an element id referencing an element on the screen. It's used with the action attribute to determine which element should be affected by the action.

<doc xmlns="https://hyperview.org/hyperview">
  <screen id="main">
    <body id="Body">
      <text
        href="/fragment"
        action="append"
        target="list"
      >Append the response content to the list element</text>
      <view id="list">
      </view>
    </body>
  </screen>
</doc>

trigger

In HTML, <a> elements will only be triggered by a click on the anchor element. In HXML, elements with an href attribute can have all kinds of triggers, including different types of presses, on item visibility, or on element load.

<doc xmlns="https://hyperview.org/hyperview">
  <screen id="main">
    <body id="Body">
      <text href="/page2">Trigger on press</text>
      <text href="/page2" trigger="longPress">Trigger on long press</text>
      <text
        href="/page2"
        trigger="visible"
      >Trigger when element is visible on screen</text>
      <text href="/page2" trigger="load">Trigger when the screen loads</text>
    </body>
  </screen>
</doc>

Multiple behaviors

In HTML, <a> elements can only open one page, and they cannot be nested. In HXML, an element can specify multiple behaviors using the <behavior> element.

<doc xmlns="https://hyperview.org/hyperview">
  <screen id="main">
    <body id="Body">
      <text href="/page2">
        <