Skip to main content

Anchor

anchor controls the transform origin used for placement, rotation, and scaling.

type Anchor =
  | "top-left"
  | "top-center"
  | "top-right"
  | "center-left"
  | "center-center"
  | "center-right"
  | "bottom-left"
  | "bottom-center"
  | "bottom-right";

Use anchor: "center-center" when x and y should represent the center point of an element.

With custom coordinates, an omitted anchor is top-left. With a non-custom position preset, an omitted anchor takes that preset's value. position still determines placement when supplied; use custom positioning for explicit coordinates and margins. See Layout.

Example​

Visual element fragment for payload.visuals. Replace the illustrative asset URL with your public image URL before rendering.

{
  "type": "IMAGE",
  "src": "https://cdn.example.com/photo.jpg",
  "x": 640,
  "y": 360,
  "width": 400,
  "height": 300,
  "anchor": "center-center"
}

Used By​