> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenframed.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Text Overlays

Add titles, subtitles, badges, and free-form text directly into rendered screenshots.

Text overlays are baked into the final image. Use them for social cards, app store screenshots, changelog images, launch visuals, and gallery thumbnails.



## Structured title fields

Use `title`, `subtitle`, and `badge` for common compositions:

```json
{
  "url": "https://example.com",
  "background_preset": "midnight",
  "title": "Launch week",
  "subtitle": "Everything new in one dashboard",
  "badge": "NEW",
  "title_position": "above"
}
```

`title_position` supports `above`, `below`, `bottom-left`, `top-left`, and `overlay-bottom`.

## Free-form text box

Use free-form text when you need exact placement and typography control:

```json
{
  "url": "https://example.com",
  "text_enabled": true,
  "text_content": "Plan your week in one view",
  "text_x": 0.08,
  "text_y": 0.08,
  "text_size": 64,
  "text_weight": 800,
  "text_max_width": 0.8
}
```

## Styling text

| Field | Description |
|---|---|
| `text_color` | Solid color text fill. |
| `text_gradient` | CSS gradient text fill. |
| `text_shadow` | Full CSS `text-shadow` value. |
| `text_font` | Font family. |
| `text_align` | `left`, `center`, or `right`. |
| `text_line_height` | Line height multiplier. |

## Autofit

Use autofit for dynamic titles, CMS content, localized app store screenshots, and generated copy:

```json
{
  "url": "https://example.com",
  "text_enabled": true,
  "text_content": "A much longer headline that still needs to fit",
  "text_size": 96,
  "text_autofit": true,
  "text_fit_min": 24,
  "text_box_h": 0.28,
  "text_max_width": 0.82,
  "text_vertical_align": "middle"
}
```

## AI-generated copy

Set `ai_copy: true` to let ScreenFramed generate a title, subtitle, or badge from the captured page:

```json
{
  "url": "https://example.com",
  "ai_copy": true,
  "ai_style": true
}
```

For production templates, keep `text_autofit` enabled if the text comes from user content, CMS content, or AI copy.