Make a component data-aware

Add supportsBinding: true to any prop you want marketers to bind. Optionally restrict the compatible field types with compatibleBindingTypes:

{
  "type": "blog-post-hero",
  "displayName": "Blog Post Hero",
  "props": {
    "title": {
      "type": "string",
      "supportsBinding": true,
      "compatibleBindingTypes": ["text"]
    },
    "coverImage": {
      "type": "image",
      "supportsBinding": true,
      "compatibleBindingTypes": ["image"]
    }
  }
}

Use the Mirin desktop app to build, preview, sync, and publish your local theme changes. The schema validator catches common mistakes before components reach marketers, such as compatibleBindingTypes set without supportsBinding, or an unknown prop type.

Each bound prop shows a chain-link icon in the property panel. Marketers click it, pick a list, pick a record, then pick a field. The renderer resolves the binding at SSR time and your component receives the literal value.

For repeater-style components (a blog index, team grid, testimonials carousel) declare a content_list prop:

{
  "props": {
    "source": {
      "type": "content_list",
      "settings": {
        "collectionSlug": "blog-posts",
        "limit": 12,
        "sort": "published_at:desc"
      }
    }
  }
}

Your component’s render signature gains a second items argument:

export function BlogPostGrid(props, items) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.data.title}</li>
      ))}
    </ul>
  );
}

Items are sanitised and coerced before your component sees them. Do not do your own escaping. The renderer pipeline already handles it.

Allowed sort keys: created_at:desc/asc, updated_at:desc/asc, published_at:desc/asc. Snake_case only. CamelCase keys like publishedAt:desc are rejected by the API.