# Dynamic Parameters

> Override styles, fonts, colors, positions, and content type at render time using dot notation

- **URL**: https://orshot.com/docs/dynamic-parameters

---

## What are Dynamic Parameters?

Dynamic parameters let you change how template elements look and behave at render time — without creating separate templates. Using a simple dot notation syntax, you can override colors, fonts, sizes, positions, and even generate AI content on the fly.

## Video Tutorial

<div className="mb-4">
  <iframe
    width="100%"
    height="400"
    src="https://www.youtube.com/embed/mtnwjzlT3Kc"
    title="Style Parameters in Orshot Studio"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowFullScreen
    className="rounded-lg"
  ></iframe>
</div>

## Key Capabilities

Dynamic parameters enable you to:

1. **Override Styles** - Change colors, fonts, sizes, and other CSS properties
2. **Generate AI Content** - Use `.prompt` to generate text and images with AI
3. **Add Interactive Links** - Use `.href` to make elements clickable in PDFs
4. **Switch Content Types** - Use `.contentType` to render a text element as an image or vice versa

## How It Works

When you parameterize an element in Orshot Studio (e.g., naming a text element `title`), you can override its properties using the format:```
parameterID.property
```### Basic Examples```json
{
  "modifications": {
    "title": "New Title Text",
    "title.fontSize": "48px",
    "title.color": "#ff0000",
    "subtitle.fontFamily": "Roboto"
  }
}
```### Multi-Page Templates

For templates with multiple pages, prefix with the page number:```json
{
  "modifications": {
    "page1@title": "First Page Title",
    "page2@title": "Second Page Title",
    "page1@title.fontSize": "48px"
  }
}
```## Supported Properties by Element Type

### All Elements (Position & Size)

These properties are available for all parameterized elements (text, image, shape, video):

**Position & Dimensions:**

- `x` - Horizontal position in px (e.g., `"200px"`)
- `y` - Vertical position in px (e.g., `"100px"`)
- `width` - Element width in px (e.g., `"500px"`)
- `height` - Element height in px (e.g., `"300px"`)

**Common Effects:**

- `opacity` - 0 to 1
- `filter` - CSS blur filter (e.g., `"blur(2px)"`)
- `dropShadowX`, `dropShadowY`, `dropShadowBlur`, `dropShadowColor` - Drop shadow properties```json
{
  "modifications": {
    "title.x": "200px",
    "title.y": "100px",
    "logo.width": "150px",
    "logo.height": "150px",
    "banner.opacity": "0.8"
  }
}
```### Text Elements

**Content & Typography:**

- `fontSize` - Size in px (e.g., `"24px"`)
- `fontWeight` - Weight from 100-900 (e.g., `"700"`)
- `fontStyle` - `"normal"` or `"italic"`
- `fontFamily` - Any Google Font or uploaded custom font
- `color` - Hex or rgba color
- `lineHeight` - Line height (e.g., `"1.5"`)
- `letterSpacing` - Letter spacing in px
- `textAlign` - `"left"`, `"center"`, or `"right"`
- `verticalAlign` - `"flex-start"`, `"center"`, or `"flex-end"`
- `textDecoration` - `"none"`, `"underline"`, etc.
- `textTransform` - `"none"`, `"uppercase"`, `"lowercase"`, `"capitalize"`

**Effects:**

- `textStrokeWidth` - Outline width in px
- `textStrokeColor` - Outline color
- `backgroundColor` - Background color behind text
- `backgroundRadius` - Border radius for background
- `opacity` - 0 to 1
- `filter` - CSS blur filter (e.g., `"blur(2px)"`)
- `dropShadowX`, `dropShadowY`, `dropShadowBlur`, `dropShadowColor` - Drop shadow properties

**Reserved Properties:**

- `.prompt` - AI text generation (see [AI Generation](https://orshot.com/docs/dynamic-parameters/prompt))
- `.href` - Add clickable links (see [Links](https://orshot.com/docs/dynamic-parameters/link))
- `.contentType` - Render as image (see [Render As](https://orshot.com/docs/dynamic-parameters/content-type))

### Image Elements

**Layout & Styling:**

- `objectFit` - `"contain"`, `"cover"`, `"fill"`, etc.
- `objectPosition` - Position (e.g., `"center center"`)
- `borderRadius` - Corner radius in px
- `borderWidth` - Border width in px
- `borderColor` - Border color
- `boxShadowX`, `boxShadowY`, `boxShadowBlur`, `boxShadowColor` - Box shadow properties

**Effects:**

- `opacity` - 0 to 1
- `filter` - CSS blur filter
- `dropShadowX`, `dropShadowY`, `dropShadowBlur`, `dropShadowColor` - Drop shadow properties

**Reserved Properties:**

- `.prompt` - AI image generation (see [AI Generation](https://orshot.com/docs/dynamic-parameters/prompt))
- `.href` - Add clickable links (see [Links](https://orshot.com/docs/dynamic-parameters/link))
- `.contentType` - Render as text (see [Render As](https://orshot.com/docs/dynamic-parameters/content-type))

### Shape Elements

- `fill` - Fill color
- `stroke` - Stroke color
- `strokeWidth` - Stroke width in px
- `borderRadius` - Corner radius in px
- `opacity` - 0 to 1
- `filter` - CSS blur filter
- `dropShadowX`, `dropShadowY`, `dropShadowBlur`, `dropShadowColor` - Drop shadow properties

## Usage Across Integrations

Dynamic parameters work consistently across all Orshot integrations:

### REST API```json
{
  "templateId": "your-template-id",
  "modifications": {
    "title": "Hello World",
    "title.fontSize": "48px",
    "title.color": "#ff0000"
  }
}
```### Dynamic URLs```markdown
https://api.orshot.com/v1/studio/dynamic-url/my-image?
title=Hello%20World&
title.fontSize=48px&
title.color=%23ff0000
```## Property Value Formats

### Colors```json
{
  "title.color": "#ff0000", // Hex
  "subtitle.color": "rgba(255,0,0,1)" // RGBA
}
```### Sizes```json
{
  "title.fontSize": "48px", // Pixels (recommended)
  "title.letterSpacing": "2px"
}
```### Fonts```json
{
  "title.fontFamily": "Roboto", // Google Font
  "subtitle.fontFamily": "MyCustomFont" // Uploaded custom font
}
```### URLs```json
{
  "logo": "https://example.com/logo.png",
  "banner.href": "https://example.com"
}
```## Case Insensitivity

Property names are case-insensitive for convenience:```json
{
  "title.fontsize": "48px", // Works
  "title.fontSize": "48px", // Also works
  "title.FONTSIZE": "48px" // Also works
}
```## Best Practices

1. **Use Consistent Units** - Stick to `px` for sizes to avoid rendering issues
2. **Test Property Values** - Use the Playground to test modifications before deploying
3. **Validate Colors** - Use valid hex or rgba formats
4. **Check Font Availability** - Ensure custom fonts are uploaded or use available Google Fonts
5. **Handle Multi-Page Templates** - Always prefix with page number when applicable

## Next Steps

- Learn about [AI Content Generation with .prompt](https://orshot.com/docs/dynamic-parameters/prompt)
- Add [Interactive Links with .href](https://orshot.com/docs/dynamic-parameters/link)
- Switch content types with [Render As with .contentType](https://orshot.com/docs/dynamic-parameters/content-type)
- Explore [API Reference](https://orshot.com/docs/api-reference) for complete integration details