Marfeel Layouts: Layout Editor

Implementation Guides Layouts
1

Create and customize layouts for social media, recommender, and content experiences using the Layout Editor. Write HTML, CSS, and JavaScript in a code editor while seeing changes instantly in a real-time preview.

The Layout Editor Interface

The Layout Editor provides everything you need to build and test layouts in one view:

Layout Editor interface showing type selector, format dropdown, content tabs, and preview panel
Layout Editor interface showing type selector, format dropdown, content tabs, and preview panel1920×1200 87.1 KB

  1. Type: Select the data model your layout requires. Your layout only appears in experiences that use the same model.
  2. Format: Choose how your layout renders—as a Post, Link In Bio, or other format.
  3. Aspect Ratio: (Social layouts only) Select which aspect ratios this layout supports—Square, Story, Portrait, Landscape, etc.
  4. Content Tabs: Switch between editing modes:
    • HTML – Define the layout structure using templating syntax
    • CSS – Add styles (automatically wrapped in a <style> tag)
    • JavaScript – Add scripts (automatically wrapped in a <script> tag)
    • Custom Fields – Create dynamic parameters you can reference with {{layoutProps.<key>}}
    • JSON – Edit sample data to test different content scenarios
  5. Preview: View your layout with current Custom Field defaults and JSON data. Updates automatically as you edit—what you see is what gets rendered.

Custom Fields

Custom Fields make layouts reusable. Instead of hardcoding values like logos, colors, or typography, you define parameters that get filled at runtime. The same layout can then serve multiple scenarios—different brands, different feeds, different experiences—while keeping all the structure and logic intact.

Example: A single “headline over image” layout can display:

  • Brand A’s logo with their accent color
  • Brand B’s logo with different typography
  • A Spanish version with localized CTA text

All without duplicating or modifying the layout code.

How Values Get Filled

Layouts declare Custom Fields, but values come from whoever uses the layout. The source depends on the layout type:

Layout Type Values Configured In
Amplify (Social) Feed Appearance → Global Appearance → Layout defaults
Recommender Recommender experience settings → Layout defaults

Experience-level settings take precedence over layout defaults. This lets you configure the same layout differently across experiences while the layout provides sensible fallbacks.

Create a Custom Field

  1. Open your layout in the Layout Editor
  2. Click the Custom Fields tab
  3. Click Add Field
  4. Configure the field properties:
    • Name – Label shown in the interface (defaults to Key if blank)
    • Key – Variable name for code references (no spaces or special characters)
    • Type – Select from available field types (see below)
    • Default Value – Value used when not overridden (also renders in preview)
    • Help Text – Tooltip guidance for users configuring the field
  5. Click Save

The field now appears in the Custom Fields panel and can be referenced in your code.

Custom Fields panel showing field configuration options
Custom Fields panel showing field configuration options2246×1404 202 KB

Reference Custom Fields in Code

Use {{layoutProps.<key>}} to insert field values in HTML, CSS, or JavaScript:


<img class="logo" src="{{layoutProps.logoImg}}">
<button style="background: {{layoutProps.accentColor}}">
{{layoutProps.ctaText}}
</button>

Custom Field Types

Type UI Presented Use For
Text Single-line text field Labels, short text, URLs
Rich Text Multi-line with formatting Descriptions, paragraphs
Image Image picker/uploader Logos, icons, backgrounds
Color Color picker Accent colors, backgrounds
Link URL input with validation CTAs, navigation links
Text Styles Font weight, size, alignment controls Typography configuration
Dropdown Selection from predefined options Preset choices (positions, variants)

Conditional Rendering

Use Trimou conditionals to show or hide content based on Custom Field values:


{{#isNotNull layoutProps.logoImg}}
   <img class="logo" src="{{layoutProps.logoImg}}" alt="Logo" />
{{/isNotNull}}

If logoImg has a value, the image renders. If empty or missing, the entire block is omitted.

For boolean-style conditions:


<div {{#if layoutProps.showHighlight}} class="highlight" {{/if}}>

Content here

</div>

Combine conditionals with the choose/when pattern for multiple conditions. See Templating Syntax for advanced examples.

Enable or Disable Layouts

Admins can toggle layouts without deleting them:

  • Enabled: Available for users to select
  • Disabled: Hidden from selection but preserved

This lets you retire layouts or prepare new ones before making them available.

Going Deeper