# Schema Reference
**This file documents the entire syntax and structure of the XML format. For the actual schema file, see
the [schema.xsd](../schema.xsd).**
---
# Table of Contents
- [Root Element](#root-element)
- [Elements](#elements)
- [Page](#page)
- [Node](#node)
- [Button](#button)
- [Text](#text)
- [Image](#image)
- [Common UI Attributes](#common-ui-attributes)
- [Value Types](#value-types)
- [Enumerations](#enumerations)
- [Display](#display)
- [Box Sizing](#box-sizing)
- [Position](#position)
- [Overflow](#overflow)
- [Visual Box](#visual-box)
- [Alignment](#alignment)
- [Flex Direction](#flex-direction)
- [Flex Wrap](#flex-wrap)
- [Grid Auto Flow](#grid-auto-flow)
- [Font Style](#font-style)
- [Image Mode](#image-mode)
- [Examples](#examples)
---
# Overview
A page consists of a hierarchy of UI elements.
```
Page
├── Node
│ ├── Text
│ ├── Button
│ └── Image
└── ...
```
Every element except `Page` may have an optional `id` attribute.
---
# Elements
## Page
Top-level container.
Allowed children:
- Node
- Button
- Text
- Image
Supports every **Common UI Attribute**.
Example:
```xml
<Page
justify-content="center"
align-items="center">
...
</Page>
```
---
## Node
Generic layout container.
Allowed children:
- Node
- Button
- Text
- Image
Additional attributes:
| id | string |
Example
```xml
<Node
id="main"
flex-direction="column"
row-gap="16px">
</Node>
```
---
## Button
Container intended for interaction.
Allowed children:
- Node
- Button
- Text
- Image
Additional attributes
| id | string |
Example
```xml
<Button
id="play"
width="200px"
height="64px">
</Button>
```
---
## Text
Displays text.
Children:
None
Additional attributes
| id | string | Optional identifier |
| content | string | Alternative to element text |
| font | string | Font asset |
| font-weight | integer | Font weight |
| font-width | number | Font width |
| font-size | FontSize | Font size |
| font-style | FontStyle | Font style |
| color | Color | Text color |
Example
```xml
<Text
font-size="48px"
color="white">
Hello World
</Text>
```
or
```xml
<Text
content="Hello World"/>
```
---
## Image
Displays an image.
Children:
None
Attributes
| id | string | |
| src | string | ✔ |
| color | Color | |
| flip-x | bool | |
| flip-y | bool | |
| rect | Rect | |
| mode | ImageMode | |
| visual-box | VisualBox | |
Example
```xml
<Image
src="logo.png"
mode="stretch"/>
```
---
# Common UI Attributes
Every container (`Page`, `Node`, `Button`, `Image`, `Text`) supports the following layout attributes.
## Display
| display | Display |
---
## Box Model
| box-sizing | BoxSizing |
| margin | UiRect |
| padding | UiRect |
| border | UiRect |
| border-radius | BorderRadius |
---
## Positioning
| position | Position |
| left | Val |
| right | Val |
| top | Val |
| bottom | Val |
---
## Size
| width | Val |
| height | Val |
| min-width | Val |
| min-height | Val |
| max-width | Val |
| max-height | Val |
| aspect-ratio | number |
---
## Overflow
| overflow-x | Overflow |
| overflow-y | Overflow |
| scrollbar-width | number |
| overflow_clip_visual_box | VisualBox |
| overflow_clip_margin | number |
---
## Alignment
| align-items |
| justify-items |
| align-self |
| justify-self |
| align-content |
| justify-content |
---
## Direction
| direction | Direction |
---
## Flexbox
| flex-direction | FlexDirection |
| flex-wrap | FlexWrap |
| flex-grow | number |
| flex-shrink | number |
| flex-basis | Val |
| row-gap | Val |
| column-gap | Val |
---
## Grid
| grid-auto-flow | GridAutoFlow |
| grid-template-rows | GridTrack |
| grid-template-columns | GridTrack |
| grid-auto-rows | PxTrackList |
| grid-auto-columns | PxTrackList |
| grid-row | GridPlacement |
| grid-column | GridPlacement |
---
# Value Types
## Number
Floating-point number.
Examples
```
1
0.5
-3
1e3
```
---
## Integer
Whole number.
Examples
```
0
42
-12
```
---
## Bool
```
true
false
```
---
## Val
Represents a UI length.
Supported values
```
auto
10
10px
50%
5vw
10vh
25vmin
30vmax
```
---
## FontSize
```
16
16px
2rem
4vw
5vh
```
---
## UiRect
1–4 values.
```
10px
10px 20px
10px 20px 30px
10px 20px 30px 40px
```
---
## BorderRadius
```
8px
8px 8px 8px 8px
```
---
## Rect
```
10
32 64
0 0 64 64
```
---
## Color
Supported formats
Named colors
```
white
red
dodgerblue
transparent
```
Hex
```
#fff
#ffff
#ffffff
#ffffffff
```
Functional
```
rgb(...)
rgba(...)
hsl(...)
hsla(...)
```
---
# Enumerations
## Display
- flex
- grid
- block
- none
---
## Box Sizing
- border
- content
---
## Position
- relative
- absolute
---
## Overflow
- visible
- clip
- hidden
- scroll
---
## Visual Box
- padding
- content
- border
---
## Alignment
### align-items
- default
- start
- end
- center
- baseline
- stretch
### justify-items
- default
- start
- end
- center
- stretch
### align-self
- auto
- start
- end
- center
- stretch
### justify-self
- auto
- start
- end
- center
- stretch
### align-content
- default
- start
- end
- center
- stretch
### justify-content
- default
- start
- end
- center
- space-between
- space-around
- space-evenly
---
## Direction
- ltr
- rtl
---
## Flex Direction
- row
- column
- row-reverse
- column-reverse
---
## Flex Wrap
- no-wrap
- wrap
- wrap-reverse
---
## Grid Auto Flow
- row
- column
- row-dense
- column-dense
---
## Font Style
- normal
- italic
- oblique
---
## Image Mode
- auto
- stretch
- sliced
- tiled_x
- tiled_y
- tiled_xy
---
# Examples
Minimal page
```xml
<Page>
<Text>Hello</Text>
</Page>
```
Centered layout
```xml
<Page
justify-content="center"
align-items="center">
<Node
flex-direction="column"
row-gap="16px">
<Text font-size="48px">
Counter
</Text>
<Button id="increment">
<Text>+</Text>
</Button>
</Node>
</Page>
```
Image
```xml
<Image
src="logo.png"
width="128px"
height="128px"
mode="stretch"/>
```