How to Integrate Bynder with Your Headless CMS

What is Bynder?

Bynder is a digital asset management platform for organizing, governing, finding, and distributing brand assets such as product photos, campaign imagery, videos, logos, and creative files. Marketing, creative, ecommerce, and brand operations teams use Bynder to control approved assets, metadata, permissions, collections, brand guidelines, and CDN delivery. In the DAM & Media category, Bynder is commonly used by mid-market and enterprise teams that need asset governance across many regions, brands, and channels.

Why integrate Bynder with a headless CMS?

If your asset library lives in Bynder but your product pages, campaign pages, landing pages, and localized content live somewhere else, editors end up doing copy-and-paste work. They copy CDN URLs into rich text, download approved images just to upload them again, or publish a campaign before the asset metadata, usage rights, or alt text has been updated. That creates drift. One image can have the right title in Bynder, an outdated caption on the website, and no locale-specific metadata in ecommerce.

Architecture overview

A common Bynder integration starts when an editor selects or references a Bynder asset in Sanity Studio and saves the Bynder media ID on a structured document, such as a product, campaign, article, or landing page. When that document is published, a Sanity webhook fires with the document ID. A Sanity Function, or your own webhook listener, uses @sanity/client and GROQ to fetch only the fields needed for the sync, for example title, description, tags, locale, SKU, campaign dates, and bynderAssetId. The Function then calls Bynder's API or @bynder/bynder-js-sdk with a permanent token or OAuth 2.0 bearer token to update the matching media item, set tags, write metadata, or add the asset to the right collection. The frontend reads structured content from the Content Lake and renders the Bynder asset through the saved media ID, derivative URL, or CDN URL. End users see the approved image or video, while brand and asset teams keep control in Bynder.

Common use cases

Step-by-step integration

1. 1

   Set up Bynder access

   Create or confirm your Bynder portal, then generate a permanent token or register an OAuth 2.0 app for API access. In Bynder, define the metaproperties, tags, collections, and derivative rules you want Sanity content to update or reference.

2. 2

   Install the Bynder SDK and Sanity client

   In your Sanity Function or middleware project, install @bynder/bynder-js-sdk and @sanity/client. Keep BYNDER_BASE_URL, BYNDER_PERMANENT_TOKEN, SANITY_PROJECT_ID, SANITY_DATASET, and SANITY_API_TOKEN in environment variables.

3. 3

   Model Bynder references in Sanity Studio

   Add fields such as bynderAssetId, assetTitle, assetDescription, assetTags, usageRights, locale, and campaignId to your schema. If editors need a picker, build a custom input that searches Bynder media and saves the selected media ID into the document.

4. 4

   Create the publish trigger

   Add a Sanity webhook that fires on create, update, or publish events for the relevant document types. Use a webhook projection that sends at least _id and _type, then let the Function fetch the full document with GROQ.

5. 5

   Call Bynder from the sync function

   In the Function, fetch the current Sanity document, map fields to Bynder metadata, and call Bynder's media API. Add retries for 429 and 5xx responses, and log the Bynder media ID on every run.

6. 6

   Test the editorial and frontend path

   Publish a test product or campaign in Sanity Studio, confirm the asset metadata changed in Bynder, then render the page using the saved Bynder asset ID or derivative URL. Test delete and unpublish behavior before you connect production content.

How Sanity + Bynder works

CMS approaches to Bynder

Keep building

Explore related integrations to complete your content stack.