XMLUI

https://github.com/xmlui-org/xmlui
Admin
XMLUI is a framework for building user interfaces declaratively with XML markup, flexible theming,...
Tokens:682,650
Snippets:5,763
Trust Score:5.1
License:MIT
Update:7 months ago
Show doc for...
Tokens:
Raw
### Setup and Development Loop for XMLUI Framework

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/build-system.md

Sets up the XMLUI framework development environment and starts the development loop. Involves installing dependencies and running watch modes for the library and dev server.

```bash
cd xmlui
npm install

# Terminal 1: Watch mode for library
npm run build:bin
xmlui build-lib --watch

# Terminal 2: Dev server for test app
cd src/testing/infrastructure
xmlui start
```

--------------------------------

### Initial Project Setup

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/xmlui-repo.md

Standard sequence of commands to clone the repository, install dependencies, and perform an initial build of the entire workspace.

```bash
git clone https://github.com/xmlui-org/xmlui.git
cd xmlui
npm install
npm run build-xmlui
npm run build-extensions
```

--------------------------------

### Configure Vite and Start Development Server for Built XMLUI App

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/build-system.md

Installs the 'xmlui' package, configures Vite with the xmlui plugin, and starts the development server for a built XMLUI application.

```bash
# Install xmlui
npm install xmlui

# Add vite config
cat > vite.config.ts << 'EOF'
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ViteXmlui from 'xmlui/vite-xmlui-plugin';

export default defineConfig({
  plugins: [react(), ViteXmlui()]
});
EOF

# Start dev server
xmlui start
```

--------------------------------

### CI/CD Pipeline Configuration

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/xmlui-repo.md

Example GitHub Actions workflow for the XMLUI project, demonstrating node setup, dependency installation, and execution of build and test tasks.

```yaml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: "npm"
      - run: npm ci
      - name: Build
        run: npm run build-xmlui
      - name: Test
        run: npm run test-xmlui:ci
```

--------------------------------

### GET /users_for_ds_dependency

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

Retrieves a list of users. This endpoint includes a delay to simulate network latency and demonstrates dependency management for DataSources.

```APIDOC
## GET /users_for_ds_dependency

### Description
Retrieves a list of users. This endpoint includes a delay to simulate network latency and demonstrates dependency management for DataSources.

### Method
GET

### Endpoint
/api/users_for_ds_dependency

### Parameters
#### Query Parameters
- **nonce** (integer) - Optional - A value used to trigger re-fetching of the data.

### Request Example
(No request body for GET request)

### Response
#### Success Response (200)
- **id** (integer) - The unique identifier of the user.
- **name** (string) - The name of the user.
- **departmentId** (integer) - The ID of the department the user belongs to.

#### Response Example
```json
[
  { "id": 1, "name": "Alice", "departmentId": 1 },
  { "id": 2, "name": "Bob", "departmentId": 2 }
]
```
```

--------------------------------

### Start Dev Server for XMLUI

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/xmlui-repo.md

Starts the development server for the XMLUI project or a test application. This is typically used for local development and testing.

```bash
cd src/testing/infrastructure
xmlui start
```

```bash
npm run start-test-bed
```

```bash
cd packages/xmlui-website-blocks
cd examples/my-app
xmlui start
```

```bash
cd docs
turbo watch generate-docs-summaries
xmlui start
```

--------------------------------

### GET /pagination_items/:from/:to

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

Retrieves a subset of items from the data source based on the provided start and end indices.

```APIDOC
## GET /pagination_items/:from/:to

### Description
Retrieves a specific range of items from the collection, useful for implementing server-side or data-source-level pagination.

### Method
GET

### Endpoint
/pagination_items/:from/:to

### Parameters
#### Path Parameters
- **from** (integer) - Required - The starting index of the items to retrieve.
- **to** (integer) - Required - The ending index of the items to retrieve.

### Request Example
GET /pagination_items/0/4

### Response
#### Success Response (200)
- **items** (array) - A list of objects containing id, name, and price.

#### Response Example
[
  { "id": 1, "name": "Laptop Pro", "price": 1299 },
  { "id": 2, "name": "Wireless Mouse", "price": 29 },
  { "id": 3, "name": "Mechanical Keyboard", "price": 149 },
  { "id": 4, "name": "4K Monitor", "price": 399 },
  { "id": 5, "name": "USB-C Hub", "price": 79 }
]
```

--------------------------------

### GET /fruits

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

Retrieves a list of fruits. This endpoint has a built-in delay to simulate loading times, useful for demonstrating how to hide elements until data is ready.

```APIDOC
## GET /fruits

### Description
Retrieves a list of fruits. This endpoint has a built-in delay to simulate loading times, useful for demonstrating how to hide elements until data is ready.

### Method
GET

### Endpoint
/api/fruits

### Parameters
#### Query Parameters
- **nonce** (integer) - Optional - A value used to trigger re-fetching of the data.

### Request Example
(No request body for GET request)

### Response
#### Success Response (200)
- **id** (integer) - The unique identifier of the fruit.
- **name** (string) - The name of the fruit.

#### Response Example
```json
[
  { "id": 1, "name": "Orange" },
  { "id": 2, "name": "Apple" },
  { "id": 3, "name": "Pear" }
]
```
```

--------------------------------

### Basic XMLUI Component Example

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/get-started/get-started.md

This is a simple example of an XMLUI component written in XMLUI syntax. It defines an 'App' with a name and displays 'Hello World'.

```xmlui
<!-- Main.xmlui -->
<App name="XMLUI Hello World">Hello World</App>
```

--------------------------------

### React to button click not keystrokes

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

This example illustrates how to trigger an action based on a button click rather than a keyboard event, using a `DataSource` to fetch data when a button is pressed.

```APIDOC
## React to button click not keystrokes

### Description
Shows how to handle user interactions by reacting to a button click to initiate a data fetch. A `TextBox` and `Button` are used, where the button click updates a state variable that triggers a `DataSource` request.

### Method
POST

### Endpoint
/https://httpbin.org/post

### Parameters
#### Query Parameters
N/A

#### Request Body
- **query** (string) - Required - The search query entered by the user.

### Request Example
```xmlui-pg noHeader
---
app
<App>
  <Test />
</App>
---
comp display
  <!-- Use two different variables -->
<Component name="Test" var.searchText="" var.triggerSearch="{false}">
  <TextBox
    id="searchInput"
    placeholder="Type something..."
    width="300px"
  />
  <Button
    label="Search"
    onClick="searchText = searchInput.value; triggerSearch = true"
  />
  <DataSource
    id="searchResults"
    url="https://httpbin.org/post"
    body="{JSON.stringify({query: searchText})}"
    method="POST"
    when="{triggerSearch}"
    onDidLoad="triggerSearch = false"
  />
  <Fragment when="{searchResults.loaded}">
    <Text>Search results for: {searchText}</Text>
    <Text>Response received: {searchResults.value.json ? 'Yes' : 'No'}</Text>
  </Fragment>
</Component>
```

### Response
#### Success Response (200)
- **json** (object) - The JSON payload sent in the request.

#### Response Example
```json
{
  "json": {
    "query": "example search"
  },
  "args": {},
  "data": "",
  "files": {},
  "form": {},
  "headers": {
    "Accept": "*/*",
    "Content-Length": "27",
    "Content-Type": "application/json",
    "Host": "httpbin.org",
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"
  },
  "origin": "192.168.1.1",
  "url": "https://httpbin.org/post"
}
```
```

--------------------------------

### GET /departments_with_ds_dependency

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

Retrieves a list of departments. This endpoint includes a delay and is designed to be used in conjunction with other DataSources, demonstrating how to manage data loading dependencies.

```APIDOC
## GET /departments_with_ds_dependency

### Description
Retrieves a list of departments. This endpoint includes a delay and is designed to be used in conjunction with other DataSources, demonstrating how to manage data loading dependencies.

### Method
GET

### Endpoint
/api/departments_with_ds_dependency

### Parameters
(No parameters)

### Request Example
(No request body for GET request)

### Response
#### Success Response (200)
- **id** (integer) - The unique identifier of the department.
- **name** (string) - The name of the department.

#### Response Example
```json
[
  { "id": 1, "name": "Engineering" },
  { "id": 2, "name": "Marketing" }
]
```
```

--------------------------------

### Expose a method from a component

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

This example shows how to expose a method from a component, allowing it to be called from outside, such as from a button's onClick event.

```APIDOC
## Expose a method from a component

### Description
Demonstrates how to make a component's method accessible externally. An `App` component uses a `Button` to trigger the `openDialog` method of an internal `UsingInternalModal` component.

### Method
N/A (This is a declarative example, not a direct API call)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```xmlui-pg
---
app display
<App height="300px" >
  <UsingInternalModal id="component"/>
  <Button label="Open the internal dialog" onClick="component.openDialog()" />
</App>
---
comp display
<Component name="UsingInternalModal">
  <ModalDialog id="dialog" title="Example Dialog">
    <Button label="Close Dialog" onClick="dialog.close()" />
  </ModalDialog>

  <H1>Using an Internal Modal Dialog</H1>

  <method name="openDialog">
    console.log('internal method called')
    dialog.open();
  </method>
</Component>
```

### Response
N/A
```

--------------------------------

### Filter and transform data from an API

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

This example demonstrates how to fetch data from an API, filter it, and transform the results using `resultSelector` and `transformResult`.

```APIDOC
## Filter and transform data from an API

### Description
Shows how to use `DataSource` to fetch data, then apply `resultSelector` to filter or extract specific parts of the response, and `transformResult` to modify the data structure.

### Method
GET

### Endpoint
/api/people

### Parameters
N/A

### Request Example
```xmlui-pg noHeader
---
app
<App>
  <Test />
</App>
---
api
{
  "apiUrl": "/api",
  "initialize": "$state.people = [
    { id: 1, name: 'Alice', active: true,  group: 'A' },
    { id: 2, name: 'Bob',   active: false, group: 'B' },
    { id: 3, name: 'Carol', active: true,  group: 'A' },
    { id: 4, name: 'Dave',  active: true,  group: 'B' }
  ],
  "operations": {
    "get-people": {
      "url": "/people",
      "method": "get",
      "handler": "return { status: 'ok', data: { items: $state.people } }"
    }
  }
}
---
comp display
<Component name="Test">

  <!--
  { 
    items:
      [
        { id: 1, name: 'Alice', active: true,  group: 'A' },
        { id: 2, name: 'Bob',   active: false, group: 'B' },
        { id: 3, name: 'Carol', active: true,  group: 'A' },
        { id: 4, name: 'Dave',  active: true,  group: 'B' }
      ]
  }
  -->

  <!-- Use resultSelector to select the items array -->
  <DataSource
    id="allPeople"
    url="/api/people"
    resultSelector="data.items"
  />

  <!-- Use resultSelector to filter the items array -->
  <DataSource
    id="activePeople"
    url="/api/people"
    resultSelector="data.items.filter(p => p.active)"
  />

  <!-- Use transformResult -->

  <!--
  window.transformPeople = function(data) {
    console.log(data);
    const items = data.data.items;
    const itemMap = {
      A: 'Austin',
      B: 'Boston'
    };
    return items.map(item => ({
      ...item,
      city: itemMap[item.group]
    }));
  };
  -->

  <DataSource
    id="transformedPeople"
    url="/api/people"
    transformResult="{window.transformPeople}"
  />

  <Text>All people:</Text>
  <List data="{allPeople}">
    <Text>{$item.name} ({$item.group})</Text>
  </List>

  <Text>Active people:</Text>
  <List data="{activePeople}">
    <Text>{$item.name} ({$item.group})</Text>
  </List>

  <Text>Transformed people:</Text>
  <List data="{transformedPeople}">
    <Text>{$item.name} ({$item.city})</Text>
  </List>


</Component>
```

### Response
#### Success Response (200)
- **items** (array) - An array of people objects.
- **items** (array) - An array of active people objects (filtered).
- **items** (array) - An array of people objects with an added 'city' field.

#### Response Example
```json
{
  "status": "ok",
  "data": {
    "items": [
      { "id": 1, "name": "Alice", "active": true, "group": "A", "city": "Austin" },
      { "id": 2, "name": "Bob", "active": false, "group": "B", "city": "Boston" },
      { "id": 3, "name": "Carol", "active": true, "group": "A", "city": "Austin" },
      { "id": 4, "name": "Dave", "active": true, "group": "B", "city": "Boston" }
    ]
  }
}
```
```

--------------------------------

### Create and Serve a New XMLUI Application

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/build-system.md

Creates a new directory for an XMLUI application, initializes it with a basic Main.xmlui file and an index.html, and serves it using npx serve.

```bash
# Create app directory
mkdir my-xmlui-app
cd my-xmlui-app

# Initialize with Main.xmlui
echo '<App><Text>Hello XMLUI</Text></App>' > Main.xmlui

# Create index.html
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
  <head>
    <title>My XMLUI App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/xmlui@latest/dist/standalone/xmlui-standalone.umd.js"></script>
  </body>
</html>
EOF

# Serve with any static server
npx serve
```

--------------------------------

### Project Initialization Commands

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/standalone-app.md

Command-line instructions for setting up different types of XMLUI projects, distinguishing between buildless standalone apps and built extensions.

```bash
# Create a buildless standalone app
mkdir my-app
cd my-app

# Create a built extension
npm init -y
npm install --save-dev xmlui
npm run build:extension
```

--------------------------------

### XMLUI TextBox: Start Icon and Adornments Example

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/src/components/TextBox/TextBox.md

Shows how to prepend an icon to the TextBox using the `startIcon` property. This example also illustrates the combined usage of `startIcon`, `startText`, `endIcon`, and `endText`.

```xmlui-pg
<App>
  <TextBox startIcon="hyperlink" />
</App>
```

```xmlui-pg
<App>
  <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
</App>
```

--------------------------------

### Configure All Adornments for NumberBox

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/reference/components/NumberBox.md

This example demonstrates how to configure all available adornments for the NumberBox component, including start icon, start text, end icon, and end text, to create a fully customized input appearance.

```xml
<App>
  <NumberBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
</App>
```

--------------------------------

### Key Scripts for XMLUI Application Development

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/build-system.md

Lists essential scripts for XMLUI application development, including starting the dev server with various options (mocking, proxy), building for production, and deployment tasks.

```bash
# Development
xmlui start                      # Dev server with HMR
xmlui start --withMock=false     # Without API mocking
xmlui start --proxy /api->...    # With backend proxy

# Production builds
xmlui build --prod               # Optimized build
xmlui build --buildMode=INLINE_ALL --flatDist

# Deployment
xmlui build --prod --withHostingMetaFiles
xmlui zip-dist
```

--------------------------------

### Construct Layouts with Stacks and Flow

Source: https://github.com/xmlui-org/xmlui/blob/main/website/public/resources/llms.txt

Examples of responsive layout construction using FlowLayout, VStack, and HStack with star-sizing and fixed dimensions.

```xml
<FlowLayout>
  <Card width="300px">Content 1</Card>
  <Card width="300px">Content 2</Card>
  <Card width="300px">Content 3</Card>
</FlowLayout>

<HStack height="100vh">
  <VStack width="250px" backgroundColor="$color-surface">
    <Navigation />
  </VStack>

  <VStack width="*" padding="$space-4">
    <Header />
    <VStack height="*">
      <MainContent />
    </VStack>
  </VStack>
</HStack>

<CVStack height="100vh" width="100vw">
  <Card width="400px" padding="$space-6">
    <ModalContent />
  </Card>
</CVStack>
```

--------------------------------

### GET /people_groupby

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/howto.md

Retrieves a list of people, grouped by a specified property. This endpoint is useful for organizing and displaying data in a structured manner.

```APIDOC
## GET /people_groupby

### Description
Retrieves a list of people, grouped by a specified property. This endpoint is useful for organizing and displaying data in a structured manner.

### Method
GET

### Endpoint
/api/people_groupby

### Parameters
#### Query Parameters
- **group** (string) - Optional - The property to group the items by.

### Request Example
(No request body for GET request)

### Response
#### Success Response (200)
- **data** (object) - Contains the list of items.
  - **items** (array) - An array of person objects.
    - **id** (integer) - The unique identifier of the person.
    - **name** (string) - The name of the person.
    - **active** (boolean) - Indicates if the person is active.
    - **group** (string) - The group the person belongs to.

#### Response Example
```json
{
  "status": "ok",
  "data": {
    "items": [
      { "id": 1, "name": "Alice", "active": true, "group": "A" },
      { "id": 2, "name": "Bob", "active": false, "group": "B" },
      { "id": 3, "name": "Carol", "active": true, "group": "A" },
      { "id": 4, "name": "Dave", "active": true, "group": "B" }
    ]
  }
}
```
```

--------------------------------

### Initialize Project Directory

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/build-hello-world-component.md

Commands to create and navigate into a new project directory for the XMLUI extension.

```bash
mkdir xmlui-hello-world
cd xmlui-hello-world
```

--------------------------------

### Bootstrapping StandaloneApp with startApp

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/standalone-app.md

The startApp function serves as the universal entry point for initializing the XMLUI application. It handles extension registration, DOM root element creation, and rendering the StandaloneApp component.

```typescript
export function startApp(
  runtime: any,
  extensions: Extension[] | Extension = [],
  extensionManager: StandaloneExtensionManager = new StandaloneExtensionManager(),
) {
  extensionManager.registerExtension(extensions);
  let rootElement: HTMLElement | null = document.getElementById("root");
  if (!rootElement) {
    rootElement = document.createElement("div");
    rootElement.setAttribute("id", "root");
    document.body.appendChild(rootElement);
  }
  if (!contentRoot) {
    contentRoot = ReactDOM.createRoot(rootElement);
  }
  contentRoot.render(
    <StandaloneApp runtime={runtime} extensionManager={extensionManager} />
  );
  return contentRoot;
}
```

--------------------------------

### Setup Standalone Test Environment

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/build-hello-world-component.md

Commands to create a directory structure and copy the built component for local testing. This prepares the environment for a standalone XMLUI application.

```bash
mkdir test-app
cd test-app
mkdir xmlui
cp ../dist/xmlui-hello-world.js xmlui/xmlui-hello-world.js
```

--------------------------------

### Define SCSS Theme Variables

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/theme-variables-refactoring.md

Examples of correctly formatted theme variables using the required camelCase property and double-dash state syntax.

```scss
$borderRadius-Image: createThemeVar("borderRadius-Image");
$backgroundColor-control-Carousel: createThemeVar("backgroundColor-control-#{$component}");
$backgroundColor-control-Carousel--hover: createThemeVar("backgroundColor-control-#{$component}--hover");
$textColor-indicator-Carousel--hover--disabled: createThemeVar("textColor-indicator-#{$component}--hover--disabled");
```

--------------------------------

### Checkbox Label Position Example

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/src/components/Checkbox/Checkbox.md

Demonstrates different positions for the checkbox label relative to the checkbox itself using the 'labelPosition' property. Available positions include 'top', 'end', 'bottom', and 'start'.

```xmlui-pg
<App>
  <Checkbox label="Top label" labelPosition="top" initialValue="true" />
  <Checkbox label="End label" labelPosition="end" initialValue="true" />
  <Checkbox label="Bottom label" labelPosition="bottom" initialValue="true" />
  <Checkbox label="Start label" labelPosition="start" initialValue="true" />
</App>
```

--------------------------------

### MenuItem: Icon Position Example

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/reference/components/MenuItem.md

Illustrates controlling the position of an icon within a MenuItem using the 'iconPosition' property. It can be set to 'start' or 'end' relative to the text.

```xml
<App>
  <DropdownMenu label="DropdownMenu">
    <MenuItem icon="drive" iconPosition="start">Item 1</MenuItem>
    <MenuItem icon="trash" iconPosition="end">Item 2</MenuItem>
    <MenuItem icon="email">Item 3</MenuItem>
  </DropdownMenu>
</App>
```

--------------------------------

### XMLUI Main Application Structure Example

Source: https://github.com/xmlui-org/xmlui/blob/main/website/public/resources/llms.txt

Provides an example of the structure for a main XMLUI application file (Main.xmlui). It showcases the use of components like AppHeader, NavPanel, Pages, and Footer to define the overall layout and navigation of the application.

```xml
<App name="My Application" layout="vertical-sticky">
  <AppHeader>
    <property name="logoTemplate">
      <Heading level="h3" value="My App" />
    </property>
  </AppHeader>

  <NavPanel>
    <NavLink label="Home" to="/" icon="home" />
    <NavGroup label="Management">
      <NavLink label="Users" to="/users" />
      <NavLink label="Settings" to="/settings" />
    </NavGroup>
  </NavPanel>

  <Pages fallbackPath="/">
    <Page url="/">
      <Dashboard />
    </Page>
    <Page url="/users">
      <UserList />
    </Page>
  </Pages>

  <Footer>© 2024 My Company</Footer>
</App>
```

--------------------------------

### Vertical Alignment in XMLUI

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/styles-and-themes/common-units.md

Illustrates the `verticalAlignment` property in XMLUI for aligning content within a VStack. Examples include 'start', 'end', and 'center'.

```xmlui-pg
<HStack gap="8px" marginVertical="8px" paddingHorizontal="30px" width="600px" height="120px" margin="auto">
  <VStack verticalAlignment="start" backgroundColor="$color-surface-200">
    <Stack backgroundColor="red" height="36px" width="36px" />
  </VStack>

  <VStack verticalAlignment="end" backgroundColor="$color-surface-200">
    <Stack backgroundColor="red" height="36px" width="36px" />
  </VStack>

  <VStack verticalAlignment="center" backgroundColor="$color-surface-200">
    <Stack backgroundColor="red" height="36px" width="36px" />
  </VStack>
</HStack>
```

--------------------------------

### Run Local Webserver

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/get-started/get-started.md

These commands show how to start a local web server using Python or Node.js. This is necessary for serving your XMLUI project files locally.

```bash
python -m http.server
npx http-server
```

--------------------------------

### JSON Data Structure Examples

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/scripting.md

Sample input and output JSON structures representing raw API responses and the transformed output generated by the transformStops function.

```json
{
  "commonName": "Baker Street Underground Station",
  "placeType": "StopPoint",
  "additionalProperties": [
    { "key": "WiFi", "value": "yes" },
    { "key": "Car park", "value": "no" }
  ]
}

{
  "value": [
    {
      "name": "Bank Underground Station",
      "zone": "1",
      "wifi": "yes",
      "toilets": "yes",
      "lines": "Central, Northern, Waterloo & City"
    }
  ]
}
```

--------------------------------

### Basic XMLUI Syntax Example

Source: https://github.com/xmlui-org/xmlui/blob/main/website/public/resources/llms.txt

Demonstrates the fundamental syntax of XMLUI, including variable declaration, event handling, and dynamic text rendering. This example shows how to declare a counter variable, increment it with a button click, and display its current value.

```xml
<App>
  <variable name="count" value="{0}" />
  <Button onClick="count++" label="Count: {count}" />
  <Text>{count}</Text>
</App>
```

--------------------------------

### XMLUI Spacing Example

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/styles-and-themes/theme-variables.md

Demonstrates the usage of XMLUI's predefined spacing utilities (e.g., space-0, space-1, space-12, space-96) for setting widths and gaps. This example showcases how to apply these values within an XMLUI component structure.

```xmlui-pg
<App gap="$gap-tight">
  <Text value="The base value is: 0.25em" variant="strong" />

  <HStack>
    <Text value="space-0" width="$space-20" />
    <Stack width="$space-0" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-0_5" width="$space-20" />
    <Stack width="$space-0_5" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-1" width="$space-20" />
    <Stack width="$space-1" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-1_5" width="$space-20" />
    <Stack width="$space-1_5" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-2" width="$space-20" />
    <Stack width="$space-2" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-2_5" width="$space-20" />
    <Stack width="$space-2_5" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-3" width="$space-20" />
    <Stack width="$space-3" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-3_5" width="$space-20" />
    <Stack width="$space-3_5" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-4" width="$space-20" />
    <Stack width="$space-4" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-5" width="$space-20" />
    <Stack width="$space-5" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-6" width="$space-20" />
    <Stack width="$space-6" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-7" width="$space-20" />
    <Stack width="$space-7" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-8" width="$space-20" />
    <Stack width="$space-8" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-9" width="$space-20" />
    <Stack width="$space-9" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-10" width="$space-20" />
    <Stack width="$space-10" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-11" width="$space-20" />
    <Stack width="$space-11" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-12" width="$space-20" />
    <Stack width="$space-12" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-14" width="$space-20" />
    <Stack width="$space-14" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-16" width="$space-20" />
    <Stack width="$space-16" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-20" width="$space-20" />
    <Stack width="$space-20" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-24" width="$space-20" />
    <Stack width="$space-24" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-28" width="$space-20" />
    <Stack width="$space-28" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-32" width="$space-20" />
    <Stack width="$space-32" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-36" width="$space-20" />
    <Stack width="$space-36" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-40" width="$space-20" />
    <Stack width="$space-40" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-44" width="$space-20" />
    <Stack width="$space-44" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-48" width="$space-20" />
    <Stack width="$space-48" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-52" width="$space-20" />
    <Stack width="$space-52" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-56" width="$space-20" />
    <Stack width="$space-56" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-60" width="$space-20" />
    <Stack width="$space-60" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-64" width="$space-20" />
    <Stack width="$space-64" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-72" width="$space-20" />
    <Stack width="$space-72" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-80" width="$space-20" />
    <Stack width="$space-80" backgroundColor="$color-info" />
  </HStack>

  <HStack>
    <Text value="space-96" width="$space-20" />
    <Stack width="$space-96" backgroundColor="$color-info" />
  </HStack>
</App>
```

--------------------------------

### Manage Manual Polling Control

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/src/components/APICall/deferred.md

Provides examples of manual control over the polling lifecycle, including starting, stopping, and resuming operations via button triggers.

```xmlui
<APICall
  id="backgroundTask"
  method="post"
  url="/api/tasks"
  
  deferredMode="true"
  statusUrl="/api/tasks/{$result.taskId}"
  completionCondition="$statusData.done === true"
/>

<Stack>
  <Button 
    label="Start Task" 
    onClick="$api.backgroundTask.execute()"
  />
  <Button 
    label="Stop Polling" 
    onClick="$api.backgroundTask.stopPolling()"
    enabled="{$api.backgroundTask.$polling}"
  />
  <Button 
    label="Resume Polling" 
    onClick="$api.backgroundTask.resumePolling()"
    enabled="{!$api.backgroundTask.$polling}"
  />
  <Button 
    label="Check Status" 
    onClick="toast(JSON.stringify($api.backgroundTask.getStatus()))"
  />
</Stack>
```

--------------------------------

### Programmatically Focus FileInput

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/reference/components/FileInput.md

The `focus` method programmatically focuses the input field of the FileInput component. This is useful for guiding user interaction, for example, by focusing the FileInput when a button is clicked.

```xmlui-pg
<App>
  <Button label="Focus FileInput" onClick="fileInputComponent.focus()" />
  <FileInput id="fileInputComponent" />
</App>
```

--------------------------------

### Aligning PDF Pages Horizontally

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/website/content/docs/reference/extensions/xmlui-pdf/Pdf.md

This example demonstrates how to control the horizontal alignment of PDF pages within the viewer using the `horizontalAlignment` property. Options include 'start', 'center', and 'end'.

```javascript
import React, { useState } from 'react';
import Pdf from '@xmlui/pdf';

function HorizontalAlignPdf() {
  const [alignment, setAlignment] = useState('start'); // 'start', 'center', 'end'

  const cycleAlignment = () => {
    if (alignment === 'start') setAlignment('center');
    else if (alignment === 'center') setAlignment('end');
    else setAlignment('start');
  };

  return (
    <div>
      <button onClick={cycleAlignment}>Cycle Horizontal Alignment (Current: {alignment})</button>
      <Pdf
        src="/path/to/your/document.pdf"
        horizontalAlignment={alignment}
        style={{ width: '100%', height: '500px', border: '1px solid #ccc' }}
      />
    </div>
  );
}

export default HorizontalAlignPdf;

```

--------------------------------

### Using the Timer Component

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/reference/components/Timer.md

This example demonstrates the core functionality of the Timer component, including setting initial delay, interval, and handling the tick event. It also shows how to control the timer's state (running/paused) and enable/disable it using UI elements.

```xmlui-pg
<App var.count="{0}">
  <Text>
    Count: {count} | Timer is {timer.isPaused() ? 'paused' : 'running'}
  </Text>
  <Timer
    id="timer"
    initialDelay="2000"
    interval="200"
    onTick="count++;"
    enabled="{enable.value}"
    once="{once.value}" />
  <Switch id="enable" label="Enable Timer" initialValue="true" />
  <Switch id="once" label="Run Once" initialValue="{false}" />
  <HStack>
    <Button onClick="timer.pause()" enabled="{!timer.isPaused()}">
      Pause
    </Button>
    <Button onClick="timer.resume()" enabled="{timer.isPaused()}">
      Resume
    </Button>
  </HStack>
</App>
```

--------------------------------

### Calling Exposed Method: Actual Size

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/website/content/docs/reference/extensions/xmlui-pdf/Pdf.md

This example demonstrates how to call the `actualSize` exposed method on the Pdf component instance to reset the zoom level to 100%. It uses `useRef` to get a reference to the component.

```javascript
import React, { useRef } from 'react';
import Pdf from '@xmlui/pdf';

function ResetZoomPdf() {
  const pdfRef = useRef();

  const handleResetZoom = () => {
    if (pdfRef.current) {
      pdfRef.current.actualSize();
      console.log('Zoom reset to actual size.');
    }
  };

  return (
    <div>
      <button onClick={handleResetZoom}>Reset Zoom to 100%</button>
      <Pdf
        ref={pdfRef}
        src="/path/to/your/document.pdf"
        style={{ width: '100%', height: '500px' }}
      />
    </div>
  );
}

export default ResetZoomPdf;

```

--------------------------------

### XMLUI TextBox: Start Text and Adornments Example

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/src/components/TextBox/TextBox.md

Demonstrates adding text at the beginning of the TextBox using `startText`. It also shows how to combine various adornments like `startIcon`, `endIcon`, and `endText` for enhanced input context.

```xmlui-pg
<App>
  <TextBox startText="www." />
</App>
```

```xmlui-pg
<App>
  <TextBox startIcon="hyperlink" startText="www." endIcon="email" endText=".com" />
</App>
```

--------------------------------

### Fullscreen Spinner Example

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/reference/components/Spinner.md

Shows how to render the Spinner component in a full-screen container by setting the `fullScreen` property to `true`.

```xmlui-pg
<App>
  <Spinner fullScreen="true" />
</App>
```

--------------------------------

### Preview Production Build Locally (Bash)

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/build-system.md

Serves a production build of XMLUI locally for testing before deployment. Supports proxying API requests during preview. This command is part of the xmlui CLI tool.

```bash
xmlui preview [options]

# Build and preview
xmlui build --prod
xmlui preview

# Preview with API proxy
xmlui preview --proxy /api->http://localhost:8080
```

--------------------------------

### Playwright Test Configuration (YAML)

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/scripts/parallel-e2e-testing.md

Example GitHub Actions workflow configurations for running tests sequentially and in parallel. The sequential workflow runs all tests on a single machine, while the parallel workflow distributes tests across multiple machines for faster execution.

```yaml
name: All Tests (Fast)
# Ran all 6,750 tests on single 16-core machine
# Runtime: ~15 minutes
```

```yaml
name: All Tests (Parallel)
# Distributes 6,750 tests across 3 machines
# Runtime: ~5-7 minutes (3x faster)
```

--------------------------------

### Named Example with Text Component (XMLUI)

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/playground-and-codefence.md

Shows how to provide a descriptive name for an XMLUI example using the 'name' modifier. This example displays a Text component within an App.

```xmlui
<App>
  <Text>This is a named example</Text>
</App>
```

--------------------------------

### Build Commands for xmlui-website-blocks Extension

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/dev-docs/build-system.md

Provides commands to build the xmlui-website-blocks extension and its demo application. Includes commands for development, library build, demo build, and metadata extraction.

```bash
cd packages/xmlui-website-blocks

# Development
npm start                    # Demo app at http://localhost:5173

# Building
npm run build:extension      # Library build
npm run build:demo          # Demo app build
npm run build:meta          # Metadata extraction
```

--------------------------------

### Install Turndown Dependency

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/pages/build-editor-component.md

Installs the Turndown library via npm to enable HTML-to-Markdown conversion functionality.

```bash
npm install turndown
```

--------------------------------

### XMLUI App Layout Examples

Source: https://github.com/xmlui-org/xmlui/blob/main/xmlui/src/components/App/App.md

Demonstrates the usage of the 'layout' property in the XMLUI App component. It showcases different predefined layouts such as horizontal, vertical, and condensed, with options for sticky navigation. These examples illustrate how to structure an application with headers, navigation panels, pages, and footers.

```xml
<App layout="horizontal">
  <AppHeader>
    <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

```xml
<App layout="horizontal-sticky">
  <AppHeader>
    <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
    </property>
  </AppHeader>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

```xml
<App layout="condensed">
  <property name="logoTemplate">
    <Heading level="h3" value="Example App"/>
  </property>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

```xml
<App layout="condensed-sticky">
  <property name="logoTemplate">
      <Heading level="h3" value="Example App"/>
  </property>
  <NavPanel>
      <NavLink label="Home" to="/" icon="home"/>
      <NavLink label="Page 1" to="/page1"/>
      <NavLink label="Page 2" to="/page2"/>
  </NavPanel>
  <Pages fallbackPath="/">
      <Page url="/">
        <List data="https://api.spacexdata.com/v3/history">
          <property name="itemTemplate">
            <Card title="{$item.title}" subtitle="{$item.details}"/>
          </property>
        </List>
      </Page>
      <Page url="/page1">
        <Text value="Page 1" />
      </Page>
      <Page url="/page2">
        <Text value="Page 2" />
      </Page>
  </Pages>
  <Footer>Powered by XMLUI</Footer>
</App>
```

--------------------------------

### Basic ResponsiveBar Example

Source: https://github.com/xmlui-org/xmlui/blob/main/website/content/docs/reference/components/ResponsiveBar.md

Demonstrates the basic usage of the ResponsiveBar component with several child buttons. Resizing the container or browser window will show the responsive behavior as items move into the overflow dropdown.

```xmlui-pg
<App>
  <ResponsiveBar>
    <Button label="File" />
    <Button label="Edit" />
    <Button label="View" />
    <Button label="Very Long Menu Name" />
    <Button label="Project" />
    <Button label="Build" />
    <Button label="Window" />
    <Button label="Help" />
  </ResponsiveBar>
</App>
```
Tokens:
Raw