The low-code framework

The XML component framework the platform’s own views are written in, and the same framework custom app pages can use. A view is a tree of components (<v-...> elements) that render as UI, configured with attributes, variables that carry values, and behaviors that respond to interaction.

Concepts

Component — a page element, the “Lego brick”. A component is made of a tag name, attributes, configuration and behavior. v-div is the general layout container; v-root is the page root (identical to v-div except it owns the page scope); v-input, v-table, v-chart, v-form, v-tabs, v-select, v-dashboard and the rest are the concrete widgets.
Variable — a named value that flows through the page, making it dynamic. Referenced as $token$ in text and token="name" on components.
Scope — the accessibility boundary of a variable. A variable defined in an element that owns a scope is invisible outside it; a variable in an outer scope is visible inside. v-root owns the page scope, so a variable set there is page-global.

Components

Components declare attributes (class, style for styling; token to bind a variable; p-if/p-for for conditional rendering and iteration). Example:

<?pithos version="1.0.0" ?>
<v-root>
  <loaded>
    <set token="application_name">test</set>
  </loaded>
  <v-input type="text" token="application_name" />
</v-root>

The full component catalog (layout, form controls, tables, charts, navigation, the dashboard grid) is defined by the platform’s component library — the same components the app SDK exposes to React apps.

Behaviours

Behaviours are page interactions attached to components — submitting a form, showing a modal, navigating, copying text. Common ones:

<set> — assign a value to a variable (the example above).
<eval> — evaluate an expression and use the result.
<show> / <hide> — control element visibility.
<jump> — navigate to a route.
<emit> — fire an event other components listen to.
<request> — call a platform API and bind the response.

Behaviours run from events (<loaded>, <click>, on-change, …). The <loaded> behavior on v-root runs after the page loads — the place to initialize page state.