Display Components
Display components are the basic rendering units on a Momen page — static or dynamic text, media, and formatted content.
This reference lists each component’s definition, custom configuration, and action configuration (and limitations where needed). Shared Design fields (position, size, layout, style, text) are in Design Panel.
Components Overview
| Component | Clients | Data tab | Action |
|---|---|---|---|
| Text | Web, Native App | — | ✓ |
| Button | Web, Native App | — | ✓ |
| Image | Web, Native App | — | ✓ |
| Video | Web, Native App | — | ✓ |
| Rich Text | Web, Native App | — | ✓ |
| HTML | Web only | — | — |
Text
Definition
Renders single- or multi-line text. Supports plain text and Markdown (Web).
⌨️ Shortcut: T
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Display mode | enum | Plain text / Markdown | Web only | Render as plain text or Markdown. |
| Content | text | empty | All | Text to show; static or bound. |
| Multiline | boolean | false | All | Wrap when content exceeds width. When off, single line truncates with ellipsis. |
| Max lines | integer | unlimited (≥ 1) | All (requires multiline) | Cap visible lines; overflow shows ellipsis. |
| SEO tag | enum | None / h1–h6 | Web only | Heading level for SEO structure. |
Action configuration
Triggers: On click, On hover, On enter viewport, On scroll in viewport. See Trigger List.
Button
Definition
Clickable control with text and background. Does not embed icons or nested components — compose complex buttons with a View and child components.
⌨️ Shortcut: B
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Label | text | empty | All | Button text; supports binding. |
| Multiline | boolean | false | All | Wrap label when it exceeds button width. |
| Edit state | enum | Normal / Hover | Hover styles Web only | Style Normal and Hover separately. |
Action configuration
Triggers: On click, On hover, On enter viewport, On scroll in viewport. See Trigger List.
Image
Definition
Displays common image formats on the page.
⌨️ Shortcut: I
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Source | text (URL / Base64) / image | empty | All | Upload, HTTPS URL, or Base64. |
| Fill mode | enum | Fit / Crop fill / Stretch fill | All | Fit: scale to fit, may letterbox. Crop fill: cover container, crop overflow. Stretch fill: stretch to fill, may distort. |
| Auto compress | boolean | true | Not for external URL source | Compress uploads to WebP for faster loads. |
| Alt text | text | empty | Web, when SEO enabled | Alternative text for SEO and screen readers. |
Action configuration
Triggers: On click, On hover, On enter viewport, On scroll in viewport. See Trigger List.
Built-in fullscreen preview on click at runtime — pinch zoom, long-press save/share where the platform supports it.
Limitations
- Upload: jpg/png/webp/gif, max 20 MB, max 30,000 px per side, max 250M total pixels.
- Base64 max 256 KB.
Video
Definition
Plays uploaded MP4 files, bound video fields, or remote URLs including HLS (m3u8) streams.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Source | text (video URL) / video | empty | All | Upload MP4 (H.264 + AAC recommended), bind video field, or paste URL. |
| Native player | boolean | false | Web only | Use browser native player; disables custom options below. |
| Loop | boolean | false | Non-native mode | Restart when playback ends. |
| Autoplay | boolean | false | Non-native mode | Play on load; browsers often block autoplay with sound — pair with mute. |
| Controls | boolean | true | Non-native mode, Web | Show play/pause, volume, progress, fullscreen. |
| Mute button | boolean | true | Non-native mode, Web | Show mute toggle in control bar. |
| Fill mode | enum | Fit / Crop fill / Stretch fill | All | How video frame fills the container. |
Action configuration
Triggers: On play start, On hover, On enter viewport, On scroll in viewport.
- On play start: when playback begins — analytics or cross-component logic.
See Trigger List.
Rich Text
Definition
Renders formatted HTML content (headings, bold, links, inline images).
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Content | text (HTML) | empty | All | HTML to render. Unsafe tags such as <script> are stripped. |
Action configuration
Triggers: On click, On hover, On enter viewport, On scroll in viewport. See Trigger List.
HTML
Definition
Embeds custom HTML/CSS or an external page via iframe. Web only.
Custom configuration
| Property | Type | Default / options | Clients & conditions | Description |
|---|---|---|---|---|
| Mode | enum | Code / iFrame | Web only | Code: inline HTML/CSS fragment. iFrame: embed external HTTPS URL. |
| Code | text (HTML/CSS) | empty | Code mode | HTML/CSS with bindings. No <script>. Fragment only, not a full document. |
| Source URL | text (URL) | empty | iFrame mode | HTTPS URL to embed. Sites with X-Frame-Options may refuse to load. |
Action configuration
HTML component does not support action configuration.