Bynder asset integration

Integrate with Bynder to manage, transform, and deliver assets to Visual Editor.

Configure Bynder in Visual Editor

To enable Bynder integration, add it as an asset source in your Visual Editor configuration file.

// stackbit.config.ts
import { defineStackbitConfig } from "@stackbit/types";

export default defineStackbitConfig({
  stackbitVersion: "~0.6.0",
  contentSources: [
    // ...
  ],
  assetSources: [{ type: "bynder" }]
});

See below for details on authentication, along with further usage instruction.

Authentication

The first time each user attempts to access Bynder in the asset selection modal, they will be prompted to add the URL of your Bynder domain portal.

Every editor will have to go through this process, which will authenticate the user to be able to upload and use Bynder images.

Disconnect Bynder

To disconnect Bynder for an individual user, sign out of Bynder. To disconnect an entire site from using Bynder, remove the appropriate entry in the assetSources property within Visual Editor configuration file.

Usage

When using Bynder as an asset source, you’ll see your Bynder assets appear within the asset selection modal for the appropriate field types.

Use multiple asset sources

When using multiple custom asset sources, you’ll see a dropdown menu in the bottom of the selection modal to enable toggling between sources.

To show only the Bynder source for one particular field, define or extend the field and set the source property to bynder.

const MyModel = {
  // ...
  fields: [
    {
      name: "image",
      type: "image",
      source: "bynder"
    }
  ]
};

Use Git CMS

With Git CMS, as long as assetsConfig is specified, Visual Editor will show Bynder in addition to Visual Editor (local) images.

Use the source property (shown above) to show only the Bynder asset selection modal for a particular image field.