Markdown Inside Expressions

Use the <MDX> component when a personalized expression needs to return block Markdown. Content inside the wrapper is compiled like the rest of the page, so branches can contain headings, paragraphs, code blocks, tables, and Relevate components.

Personalization is a work in progress. The <MDX> component is available for testing with preview user data, but the production user-data contract may still change.

Ternary Example

Wrap each branch that contains block Markdown:

{user.platform === 'ios' ? (

  <MDX>

    ## Install on iOS



    Download the SDK, then run:



    ```bash

    pod install

    ```

  </MDX>

) : (

  <MDX>

    ## Install on Android



    Add the SDK to your Gradle dependencies.

  </MDX>

)}

Only the branch selected for the current reader is rendered.

Block Form

You can also use <MDX> outside an expression to group Markdown into one transparent block:

<MDX>



  ## Installation



  This heading and paragraph compile as Markdown.

</MDX>

Leave a blank line after the opening tag when the wrapper contains block Markdown. You may indent the contents to match the surrounding ternary expression.

When To Use It

  • Use ordinary MDX directly for static page content.

  • Use fragments such as <>...</> when a branch contains only JSX components.

  • Use <MDX> when a branch needs Markdown syntax such as headings, lists, tables, or fenced code blocks.

Personalized branch headings are rendered in the selected branch but are not added to the static page table of contents, because the active branch can differ for each reader.

Preview Both Branches

Create user fixtures for each condition and run the preview with --user-data:

relevate preview --user-data ./personalization.ios.json

See Personalization for the supported expression syntax, user-data shape, and preview workflow.

Full Image