Practical User Interfaces

Built Simply

Make the frontend easy again
Simple. No CSS or React expertise required.
Semantic. Humans and AIs can reason together.
Connected. Use APIs with little or no scripting.
Deployable. Drop files onto a static webserver.
The UI tab is a live XMLUI app. Try it! Then switch to XML to see the code.
<App layout="condensed-sticky">
  <AppHeader>
    <Text variant="strong">Our Team</Text>
    <SpaceFiller />
    <ToneSwitch />
  </AppHeader>
  
  <List data="/api/users">
    <Card title="{$item.username}" subtitle="{$item.email}"
      orientation="horizontal" avatarUrl="{$item.avatar_url}">
      <SpaceFiller />
      <Badge when="{!mediaSize.phone}" value="{$item.status}" />
      <Button variant="ghost" icon="close" tooltip="Delete {$item.username}">
        <event name="click">
          <APICall url="/api/users/{$item.id}" method="delete"
            confirmTitle="Delete {$item.username}?"
            completedNotificationMessage="{$item.username} deleted" />
        </event>
      </Button>
    </Card>
  </List>
</App>
Loading XMLUI App...

Simple

Here's all the code you need to fetch data from an API and display it in table.

<App>
  <Table data="https://api.tfl.gov.uk/line/mode/tube/status">
     <Column bindTo="name" />
     <Column header="status" >
      {$item.lineStatuses[0].statusSeverityDescription}
     </Column>
  </Table>
</App>
live status of London tube lines
<App>
  <Table data="https://api.tfl.gov.uk/line/mode/tube/status">
     <Column bindTo="name" />
     <Column header="status" >
      {$item.lineStatuses[0].statusSeverityDescription}
     </Column>
  </Table>
</App>

Professional

Your apps look good and behave gracefully out of the box. Want a different look? It's easy. No CSS expertise required.

Pick a theme

Reactive

Your apps are reactive out of the box. It's easy. No React expertise required.

<App>
  <Select id="lines" initialValue="bakerloo">
    <Items data="https://api.tfl.gov.uk/line/mode/tube/status">
        <Option value="{$item.id}" label="{$item.name}" />
    </Items>
  </Select>

  <DataSource
    id="stations"
    url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
    when="{!!lines.value}"
    resultSelector="stations"/>

  <Table data="{stations}" height="200px">
    <Column bindTo="name" />
    <Column bindTo="modes" />
  </Table>
</App>
Watch the table reactively update when lines.value changes
<App>
  <Select id="lines" initialValue="bakerloo">
    <Items data="https://api.tfl.gov.uk/line/mode/tube/status">
        <Option value="{$item.id}" label="{$item.name}" />
    </Items>
  </Select>

  <DataSource
    id="stations"
    url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
    when="{!!lines.value}"
    resultSelector="stations"/>

  <Table data="{stations}" height="200px">
    <Column bindTo="name" />
    <Column bindTo="modes" />
  </Table>
</App>

The Backstory

XMLUI started as an internal project at /n software, a well-known provider of secure networking components and backend middleware. When we tried to build web-based admin interfaces, the core engineering team — experienced backend developers whose interactions with UI technology were limited to old-school battleship-gray Visual Basic, Delphi, or .Net/Winform — were surprised by the complexity of modern web development.

So we recruited a team of JavaScript/React wizards to build the new semantic layer that is XMLUI. We are shipping the framework in our products, and will continue to fund and support this free and open source project. We hope you'll help take it farther than we can on our own.

Why XML? It was a natural choice for us, but its simplicity, expressiveness, and simple extensibility have proven its worth.