Introduction

XMLUI is a framework for building UIs declaratively with XML/XHTML markup, optional lightweight scripting, and flexible theming.

No Build Required

💡

XMLUI applications can be served directly as static files. Simply host them on a standard web server and load them in a browser—no bundling, compiling, or build pipeline needed.

Declarative Markup

💡

With an XML-based approach, your UI’s structure and appearance are clearly defined in markup, making it easy to understand, modify, and maintain without digging through complex scripts.

<App>
  Hello, World from XMLUI!
</App>

You can bind components to work together.

<App>
  <TextBox id="myTextBox" placeholder="Type something" />
  <Text>You typed: {myTextBox.value}</Text>
</App>

Minimal Scripting Needs

💡

While XMLUI supports a lightweight scripting layer, most of your app’s behavior can be handled through markup, themes, and properties. This reduces dependency on heavy JavaScript frameworks and lowers the learning curve.

<!-- Add a concise sample here -->

Reactive Data Handling

💡

The UI automatically updates whenever underlying data changes. This built-in reactivity means you don’t have to manually trigger refreshes or write additional logic, streamlining the development process.

<App
  var.count="{0}"
  var.countTimes3="{3 * count}" >
  <Button label="Click to increment!" onClick="count++" />
  <Text>Click count = {count}</Text>
  <Text>Click count * 3 = {countTimes3}</Text>
</App>

Each time the button is clicked, count is incremented, causing countTimes3 to automatically recalculate and the UI to update accordingly.

<!-- Add a concise sample here that uses backend data with the reactive nature -->

Flexible Theming and Styling

💡

XMLUI themes and theme variables let you adjust colors, fonts, spacing, and more from a central location. Change a single theme variable, and the updated look cascades throughout the entire interface automatically.

<App>
  <HStack verticalAlignment="center">
    <Button label="First" />
    <ProgressBar width="80px" value="0.6" />
    <Theme color-primary="purple">
      <Button label="Second" />
      <ProgressBar width="80px" value="0.6" />
    </Theme>
    <Theme textColor-Button="orange">
      <Button label="Third" />
      <ProgressBar width="80px" value="0.6" />
    </Theme>
  </HStack>
</App>

The color-primary theme variable affects all components using the primary color; textColor-Button affects only the Button component's appearance.

Reusable Components

💡

Define a component once and reuse it across different parts of your app or even share it as a third-party component. This modular approach saves development time, ensures consistency, and simplifies maintenance.

Reusable components are in a separate markup file:

components/MySquare.xmlui

<Component name="MySquare">
  <Stack
    width="{$props.size}"
    height="{$props.size}"
    backgroundColor="{$props.color}"
    onClick="emitEvent('click')"/>
</Component>

The app can immediately leverage the reusable component:

Main.xmlui

<App var.lastClicked="none">
  <HStack>
    <MySquare size="24px" color="red" onClick="lastClicked = 'red'" />
    <MySquare size="36px" color="green" onClick="lastClicked = 'green'" />
    <MySquare size="48px" color="blue" onClick="lastClicked = 'blue'" />
  </HStack>
  <Text>Last clicked: {lastClicked}</Text>
</App>

Seamless Data Integration

💡

Connecting your UI to backend APIs is as simple as providing a URL. The framework fetches and presents the data without extra tooling, ensuring that dynamic content is readily available and easy to incorporate.

<App>
  <List data="https://api.spacexdata.com/v4/history">
    <Card title="{$item.title}" subtitle="{$item.details}"/>
  </List>
</App>

Getting Started