---
title: "Text Image API — Generate dynamic text images | Imejis"
description: "Render headlines, captions and any copy as images with full typography control, then swap the text on every API call. Start generating text images free."
url: "https://www.imejis.io/components/text"
---

# Text Image API — Generate dynamic text images | Imejis

Rich text with full typography control — fonts, weights, alignment, auto-resize, inline pattern highlighting and shadows. The workhorse for titles, captions and any dynamic copy.

## Use cases

- Open Graph images that pull each article title and author per render
- Certificates with the recipient name, course and date filled in via API
- Personalized social and email header images addressing every user by name
- Localized marketing banners — one design, copy swapped per language

## Authoring notes

- fontFamily must be a family returned by list_fonts — unknown families silently fall back to a default font.
- Text overflowing its box? Set autoResize with minFontSize/maxFontSize, or size.height "auto".

## 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)". |

## Sample design JSON

```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": "Hello world",
        "fontSize": 56,
        "fontFamily": "Inter",
        "fontWeight": 700,
        "color": "#111827",
        "textAlignment": "center",
        "verticalAlignment": "center",
        "lineHeight": 1.2,
        "opacity": 1
      }
    }
  ]
}
```

## Examples

### Blog OG title

An Open Graph headline pulling the article title per render.

API overrides that reproduce this example:

```json
{
  "title.text": "How we cut render times by 80%",
  "title.fontSize": 48,
  "title.color": "#111827"
}
```

### Certificate recipient name

The learner name stamped onto a course certificate via API.

API overrides that reproduce this example:

```json
{
  "title.text": "Priya Sharma",
  "title.fontFamily": "Playfair Display",
  "title.fontWeight": 600,
  "title.fontSize": 60,
  "title.color": "#92400E"
}
```

## 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).

## Frequently Asked Questions

### Can I change the text on every API call?

Yes. Mark the component dynamic and send '<key>.text' (or just the key) in the flat modifications JSON — every render can carry different copy, colors and styling.

### What happens when long text overflows the box?

Enable autoResize and the font size shrinks or grows between minFontSize and maxFontSize to fit the box; autoWidth and autoHeight can let the box grow instead.

### Can I use custom fonts?

The fontFamily property accepts any Google Font by name, combined with weight, letter spacing, line height and text transforms for full typographic control.

### Can I highlight part of a sentence in a different style?

Yes — textPatterns applies delimiter-based inline styling, so anything wrapped in markers like {{ }} gets its own color, background pill and padding.

## Variants

- [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.
- [Inline pattern](https://www.imejis.io/components/text/inline-pattern.md) — Delimiter-based inline styling: anything wrapped in {{ }} gets its own color and pill background.
- [Uppercase label](https://www.imejis.io/components/text/uppercase-label.md) — A letter-spaced uppercase eyebrow label for badges and section headers.

All components: https://www.imejis.io/components.md