Highlighted text

Text styletype: "text"

Add a marker-style highlight behind your headline with textBackgroundColor and change the copy on every API call. Generate highlighted text images free.

Edit it — this is the actual editor panel

Design JSON — “Highlighted” 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": "Launch day is here",
        "fontSize": 56,
        "fontFamily": "Inter",
        "fontWeight": 700,
        "color": "#111827",
        "textAlignment": "center",
        "verticalAlignment": "center",
        "lineHeight": 1.2,
        "opacity": 1,
        "textBackgroundColor": "#FDE68A"
      }
    }
  ]
}

Text examples

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

Weekend sale banner

A store-wide offer with a green highlighter swipe behind the copy.

API overrides for this example

{
  "title.text": "Everything 30% off this weekend",
  "title.textBackgroundColor": "#BBF7D0",
  "title.color": "#111827",
  "title.fontSize": 44
}

Testimonial pull quote

A customer quote for social with the words set on a pink marker.

API overrides for this example

{
  "title.text": "“The best design API we’ve used”",
  "title.textBackgroundColor": "#FBCFE8",
  "title.color": "#111827",
  "title.fontSize": 42,
  "title.fontWeight": 600
}

When to use the highlighted style

Quote cards with a highlighter swipe behind the key phrase
Sale banners that make the offer pop
Newsletter header images with emphasized keywords

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": "Launch day is here",
    "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.textBackgroundColor": "#FDE68A"
}'

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

Other text styles

DefaultHighlightedOutlined Inline pattern Uppercase label

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