Inline pattern text

Text styletype: "text"

Style parts of a sentence differently with delimiter-based textPatterns — colored pills around {{ }} spans, overridable on every API call. Try it free.

Edit it — this is the actual editor panel

Design JSON — “Inline pattern” variant

{
  "title": "Text sample",
  "description": "A centered dynamic headline",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-text",
      "key": "title",
      "type": "text",
      "position": {
        "x": 100,
        "y": 150
      },
      "rotation": 0,
      "size": {
        "width": 600,
        "height": 120
      },
      "dynamic": true,
      "properties": {
        "text": "Save {{40%}} on all plans",
        "fontSize": 56,
        "fontFamily": "Inter",
        "fontWeight": 700,
        "color": "#111827",
        "textAlignment": "center",
        "verticalAlignment": "center",
        "lineHeight": 1.2,
        "opacity": 1,
        "textPatterns": [
          {
            "startDelimiter": "{{",
            "endDelimiter": "}}",
            "textColor": "#4F46E5",
            "backgroundColor": "#EEF2FF",
            "paddingX": 8,
            "paddingY": 2,
            "borderRadius": 6
          }
        ]
      }
    }
  ]
}

Text examples

Real renders of the inline pattern text — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Shipping update headline

A transactional email header with the order number set in an indigo pill.

API overrides for this example

{
  "title.text": "Order {{#48293}} is on its way",
  "title.textPatterns": [
    {
      "startDelimiter": "{{",
      "endDelimiter": "}}",
      "textColor": "#4F46E5",
      "backgroundColor": "#EEF2FF",
      "paddingX": 8,
      "paddingY": 2,
      "borderRadius": 6
    }
  ],
  "title.fontSize": 44
}

Loyalty points earned

A rewards notification with the points value pulled out in a green pill.

API overrides for this example

{
  "title.text": "You earned {{500 points}} today",
  "title.textPatterns": [
    {
      "startDelimiter": "{{",
      "endDelimiter": "}}",
      "textColor": "#166534",
      "backgroundColor": "#DCFCE7",
      "paddingX": 8,
      "paddingY": 2,
      "borderRadius": 6
    }
  ],
  "title.fontSize": 44
}

When to use the inline pattern style

Discount callouts like "Save {{40%}}" styled inside a sentence
Highlighting dynamic values in report headlines
Brand-colored keywords in social captions

Use it dynamically via the API

Override the copy per render with '<key>.text' (or just '<key>' for the primary text value), plus '<key>.color' and background/stroke colors for styling.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "title.text": "Save {{40%}} on all plans",
    "title.fontSize": 56,
    "title.fontFamily": "Inter",
    "title.fontWeight": 700,
    "title.color": "#111827",
    "title.textAlignment": "center",
    "title.verticalAlignment": "center",
    "title.lineHeight": 1.2,
    "title.opacity": 1,
    "title.textPatterns": [
        {
            "startDelimiter": "{{",
            "endDelimiter": "}}",
            "textColor": "#4F46E5",
            "backgroundColor": "#EEF2FF",
            "paddingX": 8,
            "paddingY": 2,
            "borderRadius": 6
        }
    ]
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other text styles

Default Highlighted OutlinedInline patternUppercase label

See the text component page for the full property reference and FAQs.