Developer Integration

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

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 SDK - a TypeScript-first React component library designed for easy integration.

Getting Started

Install the SDK Package

The Bynder DAM Connector 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
• BynderDamLink - Render Bynder assets as links
• BynderDamVideo - Render video assets with smart derivative selection

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

Next Steps

• Component Examples - Learn how to use each component with basic examples
• Framework-Specific Examples - Sitecore JSS, Content SDK, and React patterns
• Advanced Examples - Derivatives, styling, and advanced patterns
• TypeScript Support - Type-safe development with exported types
• Error Handling - Graceful degradation and error patterns

Best Practices

Error Handling

SDK components handle errors gracefully and never throw:

<BynderDamImage
  asset={asset}
  alt="Product"
  onError={(error) => console.log('Failed to load image', error)}
/>

Performance Optimization

• Use BynderDamNextImage in Next.js for automatic optimization
• Use the loading="lazy" attribute for below-the-fold images
• SDK automatically selects optimized derivatives when available
• Minimal bundle size means tree-shaking unused components

Styling

Pass standard HTML attributes and classNames:

<BynderDamImage
  asset={asset}
  alt={asset.name}
  className="rounded-lg shadow-md"
  width={400}
  height={300}
/>

Resource Links

• SDK Website (opens in a new tab) - Detailed examples and interactive documentation
• SDK on npm (opens in a new tab)
• Asset Data Structure
• Setup & Configuration