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

# Modifications

> See which element types support which modification fields.

## Supported Modifications

The generate endpoint applies object-level modifications before rendering.

| Modification | Text elements | Image elements | SVG / shape elements |
| ------------ | ------------- | -------------- | -------------------- |
| `text`       | ✅ Yes         | ❌ No           | ❌ No                 |
| `fill`       | ✅ Yes         | ❌ No           | ✅ Yes                |
| `stroke`     | ✅ Yes         | ✅ Yes          | ✅ Yes                |
| `src`        | ❌ No          | ✅ Yes          | ❌ No                 |

## Examples

### Replace Text

```json theme={null}
{
  "modifications": [
    {
      "id": "YOUR_ELEMENT_ID",
      "text": "Spring launch sale"
    }
  ]
}
```

<Info>
  Text changes keep the original text element's styling and position. The text box can resize based on the new content, unless that text element is using **"autofit"** behavior.
</Info>

![Text resize placeholder](https://placehold.co/1200x675/fff0f6/c2255c?text=Text+resize+behavior+placeholder)

### Replace An Image Source

```json theme={null}
{
  "modifications": [
    {
      "id": "YOUR_ELEMENT_ID",
      "src": "https://images.example.com/product-shot.jpg"
    }
  ]
}
```

<Info>
  Replacement images are always scaled to fill the original image element's size. If the new image has a different aspect ratio, Pixy keeps the center of the new image in view and crops the outer edges as needed so the layout stays aligned.
</Info>

### Change A Fill Color

```json theme={null}
{
  "modifications": [
    {
      "id": "YOUR_ELEMENT_ID",
      "fill": "#ff4d6d"
    }
  ]
}
```

### Change A Stroke

```json theme={null}
{
  "modifications": [
    {
      "id": "YOUR_ELEMENT_ID",
      "stroke": "#1c7ed6"
    }
  ]
}
```

<Info>
  Stroke changes update the selected element's outline color. The stroke will only be visible if that element already has a stroke width greater than `0`.
</Info>

### Combine Multiple Changes On The Same Element

```json theme={null}
{
  "modifications": [
    {
      "id": "YOUR_ELEMENT_ID",
      "text": "New season drop",
      "fill": "#111827",
      "stroke": "#ffffff"
    }
  ]
}
```

<Info>
  You can send multiple supported fields for one element in the same modification object when they apply to that element type.
</Info>

### Combine Multiple Changes On Different Elements

```json theme={null}
{
  "modifications": [
    {
      "id": "YOUR_ELEMENT_ID",
      "text": "New season drop"
    },
    {
      "id": "YOUR_ELEMENT_ID_2",
      "src": "https://images.example.com/lookbook-cover.jpg"
    },
    {
      "id": "YOUR_ELEMENT_ID_3",
      "fill": "#111827"
    }
  ]
}
```

<Info>
  One request can update multiple elements at once by sending multiple modification objects, each with its own element id.
</Info>