Page & Component Basics
Create a page, add components, and build a modal — the foundation before deeper configuration.
Full editor tour: Editor Overview. Conceptual model: UI Organization.
Select a Client
A Momen project can include Web and Native App clients. Choose the client at the top of the left sidebar.
See UI Organization · Clients.
Pages
A page is an independent routable UI unit in the current client.
- Select the client in the left sidebar.
- Open the Pages list.
- Click + to add a page.
- Double-click the name to rename.
- Select the page and edit on the canvas.
Page Configuration
With a page selected, use the right sidebar Design, Data, and Action tabs. Field reference: Pages & Modals.
Preview
Click the play icon on the canvas to open a preview in a new tab. Editor changes sync without redeploying.
Common Page Operations
| Operation | How |
|---|---|
| Rename | Double-click the page name, or right-click → Rename |
| Delete | Right-click → Delete |
| Duplicate | Right-click → Copy |
| Set as home | Right-click → Set as Home Page |
| New group | Click the folder icon at the top of the page list |
| Add to group | Right-click → Add to Group |
| Tiled view | ⌘ P / Ctrl P |
Components
Components are the building blocks of the UI — text, buttons, images, inputs, views, lists, and more.
- Select the page canvas or a container component.
- Open the Components tab in the left sidebar.
- Click + to open the library (System, Custom, Code components).
- Drag or double-click to add.
- Configure Design, Data, and Action in the right sidebar.
| Method | Action | Notes |
|---|---|---|
| Drag | Drag from library to canvas or tree | Precise parent and depth |
| Double-click | Double-click in library | Adds to current selection |
| Shortcuts | T / B / I / F etc. | Fast structure building |
Shortcuts: UI Shortcuts.
Configure Components
| Tab | Purpose |
|---|---|
| Design | Component-specific options, position, size, layout, style |
| Data | Data sources, inputs, outputs |
| Action | Triggers and actions |
Design tab fields: Design Panel.
Common Component Operations
| Operation | Notes |
|---|---|
| Right-click menu | Copy, cut, paste, duplicate, rename, create view, save as custom component, delete |
| Component tree | Hierarchy, deep selection, reorder siblings |
| Search | Find pages, components, or IDs (⌘ F / Ctrl F) |
| Multi-select | Shift + click, or box-select on canvas |
Modals
Modals are floating views for confirmations, forms, detail panels, and drawers. They are opened by actions, not routes.
- Select the client.
- Switch to the Modals list in the left sidebar.
- Click + to create a modal.
- Rename and design on the modal canvas.
- On a page, configure Open Modal on a button or other trigger.
Configuration reference: Pages & Modals.