Practical User Interfaces

Built Simply

Define your UI in any text editor.

Create clean modern apps.

<App>
  <List data="/api/users">
    <Card title="{$item.username}" subtitle="{$item.email}"
      orientation="horizontal" avatarUrl="{$item.avatar_url}">
      <SpaceFiller />
      <Badge when="{!mediaSize.phone && !mediaSize.landscapePhone}">{$item.status}</Badge>
      <DropdownMenu>
        <MenuItem label="Delete" icon="trash">
          <event name="click">
            <APICall url="/api/users/{$item.id}" method="delete"
              confirmTitle="Delete {$item.username}?"
              completedNotificationMessage="{$item.username} deleted" />
          </event>
        </MenuItem>
      </DropdownMenu>
    </Card>
  </List>
</App>

Loading XMLUI App...

Easy to create. No CSS or React expertise required.

Connected. Read and write APIs with little or no scripting.

Modular. Tap into a deep catalog of components and easily make your own.

Easy to deploy. Just drop a handful of files onto a static webserver.

Get started

The XMLUI engine is a single JS file. Here is the minimal XMLUI setup.

index.html

Main.xmlui

xmlui

0.9.74.js

index.html

<script src="xmlui/0.9.74.js"></script>

Main.xmlui

<App name="XMLUI Hello World">Hello World</App>

If you want to start from scratch, grab the latest release of the engine, create the structure shown above, run a local webserver (e.g. python -m http.server, npx serve), and dive into the docs.

Want a running start? XMLUI Invoice is a complete app that showcases XMLUI components and patterns. This all-in-one package includes everything you need to get started immediately. Grab the release, unzip it, run the start script, explore the app, modify it, and use it as a springboard for your own apps.

Why XMLUI?

Simple markup

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>

Clean modern apps

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

name: Earthtone
id: earthtone
themeVars:
  color-primary: "hsl(25, 60%, 25%)"
  color-secondary: "hsl(95, 45%, 20%)"
  color-surface: "hsl(85, 25%, 92%)"

Composable UI

Choose from a deep catalog of components.

See the whole catalog.

Automatic reactivity

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"
    when="{lines.value}"
    url="https://api.tfl.gov.uk/Line/{lines.value}/Route/Sequence/inbound"
    resultSelector="stations"/>

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

Choose a line from the Select. That updates the DataSource, which in turn updates the Table.

Custom components

Define and use a vocabulary that expresses your business logic.

<Component name="Dashboard">
    <DataSource id="dashboardStats" url="/api/dashboard-stats"/>
    <H1>Invoices</H1>
    <HStack>
        <InfoCard
            width="*"
            title="Sent"
            value="{ dashboardStats.value.sent }"
        />
        <InfoCard
            width="*"
            title="Paid"
            value="{ dashboardStats.value.paid }"
        />
    </HStack>
</Component>

<Component name="InfoCard">
    <Card width="{$props.width}" borderRadius="8px" boxShadow="$boxShadow-spread">
        <Text>{$props.title}</Text>
        <Text fontWeight="$fontWeight-extra-bold" fontSize="larger">
            { $props.value }
        </Text>
    </Card>
</Component>

<App>
  <Dashboard />
</App>

Define your own components to make your code easy to read, write, and maintain.

Easy extensibility

XMLUI doesn't reinvent complex UI behavior. Every XMLUI component wraps a React component that uses standard hooks, familiar patterns, and proven libraries. XMLUI provides the glue that binds the React ecosystem into a declarative model.

If your team relies on components not currently included in XMLUI — your own or third-party — a React developer can easily bring them into XMLUI.

And XMLUI is open source! Your team can see how everything works, modify what you need, and contribute improvements back. No black boxes, no vendor lock-in, just React components that happen to work beautifully with much simpler syntax.

The backstory

XMLUI started as an internal project at /n software, a well-known provider of secure networking components and other backend middleware.

It began with a relatively small effort to add web-based admin interfaces to some of the company’s products. This resulted in 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 — being surprised by the complexity of modern web development.

Calls for simplicity and easy/intuitive tool support were met mostly with blank stares from the React guys on the other side – and the designer, UX guy, and JavaScript folks on the server side of things.

But the /n software team refused to take no for an answer, and more than two years of work from a team of Javascript/React wizards resulted in the new semantic layer that is XMLUI. We picked XML because it was natural for us, but its simplicity, expressiveness, and simple extensibility have proven its worth.

We, /n software, find the technology very valuable, are already shipping it in our products, and will continue to fund and support it. We hope that by making it free and open source, the community will help take it much further than we can on our own.

This site is an XMLUI™ app.