SitecoreAI Connector
Developer Integration
SDK
Overview

Developer Integration

Learn how to work with selected Bynder assets in your SitecoreAI components using the Bynder DAM Connector for SitecoreAI SDK.

SDK-first approach: All component examples and framework-specific examples in this section use the same SDK package.

Overview

Once content authors select Bynder assets in Sitecore Pages, the selected assets are stored as JSON data in the BynderDamSingleFile field. Developers can access and use this data in their components through the Bynder DAM Connector for SitecoreAI SDK - a TypeScript-first React component library designed for easy integration.

The SDK supports multiple field formats for backward compatibility:

  • SitecoreAI / XM Cloud - Pure JSON object format
  • Sitecore Content SDK - JSON string format
  • Legacy XP/XM Connector - XML-wrapped JSON format (<asset><![CDATA[{"type":"Assets",...}]]></asset>)

Use the parseBynderField() utility to automatically handle all formats.

Getting Started

Install the SDK Package

The Bynder DAM Connector SitecoreAI SDK is available as an npm package and works with Next.js (App Router or Pages Router), Sitecore JSS, Sitecore Content SDK, Create React App, Vite, and any React environment:

npm install @neworange/bynder-dam-connector-sitecoreai-sdk

Core Components

The SDK provides four ready-to-use React components for rendering Bynder assets:

  • BynderDamImage - Standard <img> tag for any React environment
  • BynderDamNextImage - Next.js <Image> component with optimization (imported from /next subpath)
  • BynderDamLink - Render Bynder assets as links
  • BynderDamVideo - Render video assets with smart derivative selection

Utility Functions:

  • parseBynderField() - Parse field values from multiple formats (JSON objects, JSON strings, and legacy XP/XM XML-wrapped values)

Import Paths

Framework-agnostic components (no Next.js required):

import { BynderDamImage, BynderDamLink, BynderDamVideo, parseBynderField } from '@neworange/bynder-dam-connector-sitecoreai-sdk';

Next.js-specific component (requires Next.js):

import { BynderDamNextImage } from '@neworange/bynder-dam-connector-sitecoreai-sdk/next';

All components include:

  • Full TypeScript support with comprehensive type definitions
  • Derivative selection with graceful fallback logic
  • Customizable styling via className and other props
  • Error handling that never throws
  • Minimal bundle size with proper tree-shaking

Who This Is For

This SDK section is primarily for developers and front-end engineers who build Sitecore components that consume data from the Bynder connector plugin field.

Typical workflow:

  1. A developer/admin configures the plugin field in templates (see Plugin Field Setup).
  2. Content authors select assets in Sitecore Pages.
  3. Developers render and process the selected asset data using SDK components and utilities.

Resource Links

OverviewComponent Examples