Modification keys

modifications is the part of a render request that says what to change. It’s an object of keys and values. This page explains every kind of key and what each value does.

{
  "templateId": "clx8m2k3p0002abcd1234efgh",
  "modifications": {
    "title": "5 ways to brew better coffee",
    "page2@title": "1. Grind just before brewing",
    "title.color": "#FF4D4F",
    "photo": "https://example.com/images/beans.jpg"
  }
}

The same keys work everywhere you render: the API, signed URLs, and the query string of a dynamic URL.

Where the keys come from

A template has two kinds of keys:

• Dynamic fields: layers you turned into an API parameter in the editor and gave a Key, such as headline. See Choose what changes.
• Variables: names in double curly brackets inside a text layer, such as {{name}}.

To list them, call GET /v1/designs/{id} and read parameters, or open the template’s Integrations, API & Forms dialog and look at API parameters. The API gives a variable the type variable, and the API parameters list shows it as Placeholder.

Key forms

Key	What it changes
headline	Every layer whose key is headline, on every page, and every {{headline}} variable in text.
page2@headline	The same, but only on page 2. Pages start at 1.
headline.color	One style property of the headline layers.
[email protected]	One style property, only on page 2.

• Keys are case-sensitive: Headline and headline are different keys.
• A key you set in the editor can be up to 64 characters. The whole modification key, with pageN@ and .property, can be up to 200 characters. A text value can be up to 20,000 characters.
• A pageN@ key for a page the template doesn’t have is a 400.
• A pageN@ key for a page you left out with includePages is skipped.

What a plain value does

A key with no property, such as headline, changes the layer’s main content. What that is depends on the layer type:

Layer type	A plain value sets	Example
Text	The text	"headline": "Summer sale"
Image	The image URL	"photo": "https://example.com/beach.jpg"
Shape	The fill color	"badge": "#FF4D4F"
QR code	What the code holds, such as a link	"qr": "https://example.com/tickets/123"
Variable	The text that replaces it	"name": "Jane"

Image URLs must be public http:// or https:// addresses. See Images in a render.

Variables in text

A text layer can mix fixed words and variables, such as Hello {{name}}, your order ships {{date}}. Send "name": "Jane" and "date": "Monday", and the layer shows “Hello Jane, your order ships Monday.”

• Variable names can use letters, digits, _ and -. Spaces inside the brackets are ignored, so {{ name }} works too.
• One key can be a layer key and a variable at the same time. A plain value sets both.
• pageN@name fills the variable on one page only.

Values

• Text is used as it is.
• Numbers work for number properties. You can also send them as strings, such as "48" or "48px".
• On/off properties take true or false. "true", 1 and "1" also mean on. Anything else means off.
• null as a plain value empties the layer: a text layer shows no text, an image layer no picture. Number properties don’t take null.

Keys that match nothing

A key that matches no layer and no variable doesn’t stop the render. It comes back in warnings, next to data, so you can catch typos. (The warning says “placeholder” for a variable.)

{
  "data": { "content": "https://cdn.jamframe.com/renders/…" },
  "warnings": ["Unknown modification keys (no matching layer or {{placeholder}}): titel"]
}

These mistakes do stop the render, with a 400 VALIDATION_ERROR:

• A property the layer type doesn’t have, such as photo.fontSize on an image layer.
• A value outside the allowed range or list, such as "photo.blur": 500 or "title.verticalAlign": "center".

Style properties

Add a property to a key to change one style, such as "title.fontSize": 56. Each layer type takes the properties in its table below, plus the ones every layer takes.

Any layer

Property	Value
hidden	true hides the layer.
x, y	The layer’s position on the page, in px.
width, height	The layer’s size, in px.
rotation	The angle, in degrees.
blendMode	How the layer mixes with what’s under it: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color or luminosity.
shadowColor	A CSS color, such as #00000080. The layer has a shadow when this is set.
shadowX, shadowY	How far the shadow moves, in px.
shadowBlur	How soft the shadow is, in px, 0 or more.

A text layer gets the shadow on its letters. Other layers get a shadow that follows their shape.

Text

Property	Value
color	The text color, such as #FF4D4F.
fontSize	The size, in px.
fontFamily	A font name, as the editor’s font list shows it.
fontWeight	A number, such as 400 for regular or 700 for bold.
italic, underline	true or false.
align	left, center or right.
lineHeight	The space between lines, as a multiple of the font size, such as 1.2.
letterSpacing	Extra space between letters, in px.
textTransform	none, uppercase, lowercase or capitalize.
shrinkToFit	true makes long text smaller until it fits its box, instead of being cut off. It never grows past fontSize. Boxes that grow with their text ignore it.
minFontSize	The smallest size shrinkToFit may use, in px, above 0. The default is 40% of fontSize, and at least 8.
backgroundColor	A color that fills the text box.
verticalAlign	Where the text sits in its box: top, middle or bottom.
textStrokeWidth	An outline around the letters, in px. 0 means none.
textStrokeColor	The outline color. The default is #000000.
borderWidth	A border inside the box, in px. 0 means none.
borderColor	The border color.
borderStyle	solid, dashed or dotted.

Image

Property	Value
opacity	From 0 (invisible) to 1 (solid).
borderRadius	Rounded corners, in px.
flipX, flipY	true flips the picture left to right, or top to bottom.
fit	contain shows the whole picture. cover fills the frame and crops what doesn’t fit.
borderWidth, borderColor, borderStyle	A border inside the box, as for text.
mask	A shape that cuts the picture: star, triangle, diamond, circle, pentagon, hexagon, octagon, quarterCircle, roundedRectangle, or none to remove it.
maskAsset	The id of an SVG in your brand library, used as the mask. null removes it. Masks never take a URL.
maskMode	How an SVG mask works: alpha (the default) shows the picture inside the SVG’s shape. luminance shows it where the SVG is white and hides it where it’s black.
effect	A ready-made look: grayscale, sepia, vintage, warm, cool, fade, dramatic, noir, vivid, soft, or none.
blur	Blur, in px, from 0 to 100.
brightness, contrast, saturation, temperature	From -100 to 100. 0 leaves the picture as it is. They add to the effect.
vibrance, whites, blacks	From 0 to 100.
cropX, cropY	Where the crop starts, from the left and top, as a share of the picture: 0 to 1.
cropWidth, cropHeight	How much of the picture the crop keeps, as a share: more than 0, up to 1. cropX + cropWidth and cropY + cropHeight can be at most 1.

A layer’s border and shadow follow its mask. A crop stays when you send a new picture. A picture with the same shape is framed the same way. A picture with another shape is placed by fit.

Shape

Property	Value
fill	The fill color.
stroke	The outline color.
strokeWidth	The outline width, in px.
strokeStyle	solid, dashed or dotted.
cornerRadius	Rectangles only: rounded corners, in px, 0 or more. It can’t be more than half the shorter side.

QR code

Property	Value
foreground	The color of the code’s squares.
background	The color behind them.
borderWidth, borderColor, borderStyle	A border inside the box, as for text.

A full example

{
  "templateId": "clx8m2k3p0001abcd1234efgh",
  "modifications": {
    "headline": "Weekend market",
    "headline.fontSize": "64px",
    "headline.shrinkToFit": true,
    "page2@headline": "Saturday 9am to 2pm",
    "photo": "https://example.com/images/stalls.jpg",
    "photo.effect": "warm",
    "photo.mask": "circle",
    "badge": "#22C55E",
    "ticket_qr": "https://example.com/tickets/2026-11-21",
    "city": "Portland",
    "sponsor_logo.hidden": true
  },
  "response": { "format": "png" }
}

Related

• Make a layer into a dynamic field: Choose what changes.
• Send these keys in a render: Render images and PDFs.
• Fill layers with AI instead of fixed values: AI at render time.