Editor Overview

The Momen Editor combines interface building, data management, API integration, Actionflow orchestration, AI Agent development, and project settings in one environment. It also provides project-level operations for previewing, syncing, and publishing changes.

Editor structure

The editor consists of a top navigation bar and the editing area below it. The editing area displays the relevant content and configuration when you switch between the entries in the top navigation.

The current online editor divides its top navigation into three areas:

Feature entries: Includes Page, Data, API, Actionflow, AI, and Settings for switching between the main features.
Project information: Displays the current project name. Select it to open the project details page.
Project-level operations: Includes Copilot, Developer access, Collaboration, Mirror, Sync changes, and Publish.

The new editor is currently available through invite-only testing. Its top navigation has changed as follows:

Project name and project management: Moved to the left side of the navigation bar.
Page: Renamed Design and moved to the center.
Data: Keeps the name Data and moves to the center.
API, Actionflow, and AI: Are grouped under Action and move to the center.
Settings: Keeps the name Settings and moves to the center.

Some articles have already been updated for the new editor. If you are using the current online version, use the mappings above to locate the corresponding features.

Project workspace

The area below the top navigation is where you build the project:

Left sidebar: Select and manage objects such as pages, tables, APIs, or Actionflows.
Main workspace: Edit the selected object and its configuration.

The following sections explain how to build a project through each entry in the top navigation.

Build the project

Build the interface

In Page, use the left side to manage clients, pages, modals, and the component tree. The page canvas appears in the center, and the configuration panel for the selected page or component appears on the right.

Manage pages and components

Create and switch between pages and modals for a client.
Add components and arrange them in the component tree.
Select, move, and arrange components on the canvas.

For the relationship between clients, pages, modals, and components, see UI Organization. To start building an application, continue with Build Your First Page.

Configure the selected object

After selecting a page or component, use the tabs in the right panel:

Design: Configure size, layout, position, style, and component-specific settings, such as the text content and data binding of a Text component.
Data: Define data sources for lists and other components that support data configuration.
Action: Add frontend actions to triggers on the selected object.

The canvas toolbar provides selection, movement, shortcuts, and zoom controls.

Manage data

Open Data in the top navigation to manage the structures and resources used by the application:

Create tables, fields, and relations in Data model.
View and manage runtime records in Database.
Manage project files in Assets.

Use the left navigation to select a data feature, the object list to select a specific item, and the main workspace to view its fields, configuration, or records. See Data for concepts and guides.

Integrate third-party APIs

Open API in the top navigation to add a third-party API and configure its request URL, method, parameters, and response data. See Integrate APIs for detailed instructions.

Build Actionflows

Open Actionflow in the top navigation to create an Actionflow and arrange database, condition, loop, API, AI, and other nodes into backend logic. See Build Actionflows for detailed instructions.

Build AI Agents

Open AI in the top navigation to create and manage AI Agents, including their models, prompts, contexts, and tools. See Build AI Agents for detailed instructions.

Manage project-level settings

Open Settings in the top navigation to view and update project-level or client-level configuration.

Project-level operations

Sync changes and publish

Sync changes: Publish backend configuration only, including data models, Actionflows, APIs, and AI Agents.
Publish: Publish frontend and backend changes so the latest version becomes available in the runtime environment.

For the publishing workflow and client-specific release options, see Publish an App.

Other operations

Copilot: Build or update pages, data, and business logic through natural language.
Developer access: View the Runtime Schema, project endpoints, and authentication details. Use Momen BaaS with your AI coding tool to build your application. See Headless · Momen BaaS.
Mirror: Simulate project clients in a Web environment and check the interface, data bindings, and interactions. See Mirror.
Errors and search: Review configuration errors or search for pages, components, actions, and data requests.
Runtime logs: Review execution records for Actionflows, database operations, APIs, AI, and other backend capabilities. See Runtime Logs.
Permissions and collaboration: Invite members to a project and control their access through roles. See Permissions.