Documentation

Introduction

XMLUI is a framework for building user interfaces declaratively, with XML markup and flexible theming. XMLUI apps are:

Easy to create. Build on the web platform with little or no knowledge of React or CSS.

Clean and modern. Enjoy themes that look great out of the box and are easy to modify. Create experiences that meet expectations for modern web apps.

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

Modular. Use a comprehensive suite of components that you can extend with — again! — little or no scripting.

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

This paragraph is static text displayed by XMLUI's Markdown component.

Here is a tiny app that reports the status of London's tube stations.

<App>
  <List data="https://api.tfl.gov.uk/line/mode/tube/status">
     <Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
  </List>
</App>
London Tube Status
<App>
  <List data="https://api.tfl.gov.uk/line/mode/tube/status">
     <Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
  </List>
</App>

Let's unpack the concepts behind this example.

Markup. You write XMLUI apps in a declarative style using XML tags and attributes.

Components. App, List, and Text are some of the components you can invoke in XMLUI markup.

Properties. You configure components using properties like the data property on the List.

Data. The data property fetches from a URL and provides a JSON object to components that use it.

Context. A variety of context variables are available to certain components. Here $item implicitly receives each of the tube stations represented in the top-level array returned from the API.

Expressions. Inside the Text component there are two expressions delimited by curly braces, one extracts the name of the station and another drills deeper into the $item to retrieve status, using JavaScript dot notation and array indexing.

The app runs directly in this page, and you can open it for editing in a playground.

How to deploy it as a standalone web application?

  1. Create an index.html that loads the XMLUI engine which is a single JavaScript file.
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.xmlui.org/xmlui.js"></script>
</head>
<body>
</body>
</html>
  1. In the same directory create Main.xmlui like so.
<App>
  <List data="https://api.tfl.gov.uk/line/mode/tube/status">
     <Text>{$item.name}: {$item.lineStatuses[0].statusSeverityDescription}</Text>
  </List>
</App>
  1. Use any static webserver to load the app. In the folder with index.html and Main.xmlui you can use Node (npx -y http-server -o) or Python (python -m http.server 8000) or any other server that runs static web apps. You can also use static cloud hosting, for example by dropping the folder onto Netlify or pushing it to an AWS bucket.

If you are familiar with the React framework a key insight is that no build is required: the XMLUI engine loads and renders XMLUI files. If you are unfamiliar with React and don't know what a "build" means then XMLUI enables you to remain blissfully unaware of that complex process!

In example the URL is static. In the next chapter you'll see how a data URL can vary to deliver changing data in response to UI interaction. That's called reactivity, another concept from the React world that becomes much simpler in XMLUI.