---
title: "Inline Styled Text Image API — Pattern highlights | Imejis"
description: "Style parts of a sentence differently with delimiter-based textPatterns — colored pills around {{ }} spans, overridable on every API call. Try it free."
url: "https://www.imejis.io/components/text/inline-pattern"
---

# Inline Styled Text Image API — Pattern highlights | Imejis

Delimiter-based inline styling: anything wrapped in {{ }} gets its own color and pill background.

## Use cases

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

## Properties

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | — | The text content to display. |
| `fontSize` | `number` (min 1) | `24` | Font size in pixels. |
| `fontFamily` | `string` | `"Inter"` | Font family name (Google Fonts supported). |
| `fontWeight` | `number \| string` | `400` | Font weight (100-900 or a keyword like "bold"). |
| `color` | `color` | `"#000000"` | Text color. |
| `textAlignment` | `'left' \| 'center' \| 'right' \| 'justify'` | `"left"` | Horizontal text alignment. |
| `verticalAlignment` | `'top' \| 'center' \| 'bottom'` | `"top"` | Vertical alignment of text within its box. |
| `textDirection` | `'ltr' \| 'rtl'` | `"ltr"` | Text direction (left-to-right or right-to-left). |
| `lineHeight` | `number \| string` | `"normal"` | Line height (unitless multiplier or CSS value). |
| `letterSpacing` | `number \| string` | `"normal"` | Spacing between characters (pixels or CSS value). |
| `backgroundColor` | `color` | `"transparent"` | Background color of the whole text container. |
| `textBackgroundColor` | `color` | `"transparent"` | Background color behind the text glyphs only (highlight effect). |
| `padding` | `string` | — | CSS padding inside the text container, e.g. "8px 12px". |
| `autoResize` | `boolean` | — | Automatically shrink/grow the font size to fit the box. |
| `minFontSize` | `number` (min 1) | `8` | Lower font-size bound when autoResize is on. |
| `maxFontSize` | `number` (min 1) | `200` | Upper font-size bound when autoResize is on. |
| `strokeWidth` | `number` (min 0) | `0` | Outline stroke width around the glyphs in pixels. |
| `strokeColor` | `color` | `"transparent"` | Outline stroke color around the glyphs. |
| `textDecoration` | `'none' \| 'underline' \| 'overline' \| 'line-through' \| 'underline overline'` | `"none"` | Text decoration line(s). |
| `textTransform` | `'none' \| 'uppercase' \| 'lowercase' \| 'capitalize'` | `"none"` | Case transformation applied to the text. |
| `constraint` | `'tl' \| 'tr' \| 'tc' \| 'cc' \| 'cl' \| 'cr' \| 'bl' \| 'br' \| 'bc'` | — | Legacy per-component anchor point (prefer the component-level anchor field). |
| `autoWidth` | `boolean` | — | Let the box grow horizontally to fit the text. |
| `autoHeight` | `boolean` | — | Let the box grow vertically to fit the text. |
| `textPatterns` | `object[]` | — | Delimiter-based inline styling rules ({ startDelimiter, endDelimiter, textColor, backgroundColor, paddingX, paddingY, border* }). |
| `textShadow` | `string` | — | CSS text-shadow, e.g. "2px 2px 4px rgba(0,0,0,0.5)". |
| `opacity` | `number` | `1` | Overall component opacity from 0 (transparent) to 1 (opaque). |
| `borderWidth` | `number` | `0` | Border thickness in pixels around the component. |
| `borderColor` | `color` | `"transparent"` | Border color (any CSS color). |
| `borderStyle` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'` | `"solid"` | Border line style. |
| `borderRadius` | `number` | `0` | Corner radius in pixels. |
| `boxShadow` | `string` | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |

## Design JSON (this variant)

```json
{
  "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
          }
        ]
      }
    }
  ]
}
```

## Examples

### Shipping update headline

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

API overrides that reproduce this example:

```json
{
  "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 that reproduce this example:

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

## API overrides

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.

Flat override payload (`key.property` addressing) with the sample design's current values — send only the keys you want to change:

```json
{
  "title.text": "Hello world",
  "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
}
```

```bash
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": "Hello world",
    "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
}'
```

`{{YOUR_DESIGN_ID}}` and `{{YOUR_API_KEY}}` are placeholders: first create
the design in your account (paste the sample design JSON above into the
editor at https://app.imejis.io, or create it programmatically via the
imejis MCP server's `create_design` + `update_design` tools), then render
it with the design's id and one of your API keys.

Agents: the MCP server at https://api.imejis.io/api/mcp exposes this same
catalog as structured data via the `list_component_types` tool (property
kinds, allowed values, bounds, ready-to-use sample designs).

## Related

- [Text component](https://www.imejis.io/components/text.md) — full reference and FAQs
- [Highlighted](https://www.imejis.io/components/text/highlighted.md) — A marker-style highlight behind the glyphs via textBackgroundColor.
- [Outlined](https://www.imejis.io/components/text/outlined.md) — Poster-style hollow text using the glyph stroke.
- [Uppercase label](https://www.imejis.io/components/text/uppercase-label.md) — A letter-spaced uppercase eyebrow label for badges and section headers.