UI Organization

Momen UI is organized in five layers: a client owns each interface, a page or modal hosts it, a component tree structures it, context supplies its data, and composition patterns organize complex layouts.

Clients

A Momen project has one shared backend and multiple independent clients.

Layer	Scope	Where you edit it
Backend	Database, APIs, Actionflows, permissions, AI capabilities — shared by all clients	Data, Action, Settings tabs
Client	Pages, modals, component trees, frontend state, client-specific UI config	Design tab

The editor header has four top-level tabs — Design, Data, Action, Settings. Design is scoped per client; the other three act on the shared backend.

💡

Clients do not share UI: a page built for Web does not appear in Native App. They share only backend capabilities.

Select the target client in the left sidebar before adding pages or components — it determines the page list, canvas, component tree, and available components.

Pages and Modals

Both are independent UI units in the current client. A page maps to a route; a modal is a floating view opened by an action — for confirmations, forms, detail drawers, and overlays.

Aspect	Page	Modal
Opened by	Route or navigation	Action trigger
Data source	Page-level query/subscription	Modal-scoped query/subscription
Variables	Page-scoped temporary state	Modal-scoped temporary state
Input	Page parameters (passed on navigate)	Modal inputs (passed on open)

The home page is the default page shown when the app opens.

Component Tree

A component is a configurable UI unit on the canvas — not an isolated control, but a node in the component tree.

System Components

Type	Description	Examples
Basic components	Display or input components without children	Text, Button, Image, Input
Container components	Hold children; control layout, scrolling, context, or visibility	Page, View, List item, Tab View, Conditional View

Custom Components and Code Components

Custom components: a saved component subtree reused within the same project. See Using Custom Components.
Code components: extend Momen through code, imported before use. See Code Components.

💡

Organize the tree by role: nodes that display content, nodes that lay out children, and nodes that provide context.

Context

The same Text component can show different product names in different list rows because properties bind to the context visible at the current tree position.

Context has two dimensions:

Spatial scope: what data a component can read at its position in the tree.
Temporal scope: what data is available before and after an action runs.

Spatial Scope: UI Rendering Context

Scope	Context	Source	Typical binding
Page-level	Page parameters	Passed when the page opens	Detail page ID
Page-level	Page variables	Temporary page state	Filter keyword, current step
Page-level	Page data source	Page query/subscription result	Shared query across regions
Component-local	List item	Current row in a List	`list item.name`, `list item.price`
Component-local	Index	Row index in a List	Rank, row number
Special	Component output	Input, selector, etc.	Used by other components or actions

💡

For full data binding guidance, see Query and Bind Data.

Temporal Scope: Action Runtime Context

Phase	Available data	Use
Before / on trigger	Current UI context: list item ID, input value, page variables	Inputs to API, database, or Actionflow
After response	API response, Actionflow output, DB result, upload result	Update variables, refresh data, show toast, branch

💡

For the full action context model, see Interaction Model.

Composition Patterns

Pattern	Problem solved	Typical use	Key context / sub-canvas
View	Grouping and layout	Cards, sections, scroll areas	Children laid out inside the view
List	Repeat one UI for many records	Products, comments, messages	List item, index
Conditional View	Show different UI by condition	Logged in/out, roles, empty states	Branch sub-canvases
Tab View	Switch peer content areas	Order status, categories	Tab page sub-canvases

Design question	Start with
Group several components	View
Same structure, many data rows	List
Different UI in one area by logic	Conditional View
Switch several peer sections on one page	Tab View

Field-level options: Layout Components.

Multi-Client

Web and Native App are independent clients with separate pages and component trees. Web breakpoints apply only to the Web client.

Shared across clients: database, Actionflows, APIs, permissions. Reused in UI: custom components (within a project) and code components (across projects), subject to client support and platform limits.

Start building: Page & Component Basics
Layout concepts: Layout System
Field reference: Design Panel, Component Reference