Mental Models

Before building applications with Momen, it’s crucial to establish the right mental models. Momen’s architecture stands on three pillars: Design, Data, and Action.

These are not just three tabs in the editor — they are what your project is made of. Whether you build by hand or have AI build it, the same things land in the project: the same table, the same Actionflow, the same component tree. So this model earns its keep twice: you use it to describe what you want, and to read what AI produced.

Design - building interfaces

In Momen, interface building is based on the CSS Box Model and Flexbox Layout. Effective use of positioning methods helps create better layouts.

Core concepts

• Basic Components: The basic unit of a page (e.g., Button, Text, Image).
• Containers (Views): A box that wraps other components and determines their arrangement (Row/Column).
• Positioning:
  • Relative (Default): The component follows the natural flow of the container. Its position is determined by the parent container’s Flexbox layout direction (Row/Column).
  • Absolute: The component is removed from the natural flow and positioned relative to its immediate parent container.
  • Fixed: The component is locked to a specific position within the browser window (Viewport), maintaining its position even when scrolling.

Conditional View

To display different UIs in different scenarios, use the Conditional View component.

• Concept: The Conditional View is not a single container, but a collection of distinct Views. It acts as a switch, displaying only one View at a time based on the active condition.
• Workflow:
  1. Define Cases: Add condition branches (e.g., Case 1: “VIP”, Case 2: “Guest”).
  2. Independent Canvas: Each case creates a separate, empty canvas (automatically). You switch between these cases to build the specific UI for that scenario.

Example: Show a Login button for guests, but display User Profile for logged-in users.

Data - managing data

Momen features a built-in high-performance relational database. Application data is managed as dynamic content rather than static text.

Core concepts

• Table: A structured collection of data records (e.g., “account”, “post”).
• Relation: The logical connections between tables.
  • Example: A One-to-Many relation between account and post tables.
• Data Binding: Connecting Dynamic Data to component properties.
  • Dynamic Lists: List components can directly use tables or APIs as data sources.
  • Page Data Source: Declare a “Data Source” on a page to make data accessible to all components within the page.
• Conditional Data: Use different data values under different conditions (e.g., displaying “N/A” if a profile bio is empty).

Action - orchestrating logic

Applications require interactivity. The Action system follows the “Trigger → Execution” pattern.

Core concepts

• Trigger: User operations (Click, Input Change) or System events (Page Load, Data Change).
• Actions & Nodes: Specific tasks executed in response to a trigger (e.g., Navigate, Toast, Database operations).
• Interaction(Frontend):
  • Configured directly on components.
  • Supports Conditional Branches.
• Actionflow (Backend):
  • Reusable backend workflows.
  • Created in the Actionflow panel,composed of various Nodes.
  • Supports Loops and Conditional Branches.
  • Can be triggered by frontend events, schedules (cron), database changes or webhooks.

Summary

Building a Momen app is a continuous cycle:

1. Define Data: Structure your database tables and relations.
2. Build Interface: Visualize the data using components and layouts.
3. Configure Logic: Define interactions and business rules.

You can do these yourself, describe them to AI, or mix the two — let AI lay out the structure, then adjust it by hand. Either way the result lands in the same place and opens the same way. See Read what AI built.