Integrate Bynder with GraphCMS UI Extensions

The Digital Asset Management platform Bynder is a popular choice for teams, and integrating it with GraphCMS is made possible with UI Extensions.

Jamie Barton
bynder-graphcms-ui-extension

The Digital Asset Management platform Bynder is a popular choice for teams, and integrating it with GraphCMS is made possible with UI Extensions.

We no longer store content and assets all in one place, but instead we use a myriad of "best of breed" providers. If you're working with an existing project that uses Bynder, you can continue to use Bynder for that project as you migrate to GraphCMS for everything else.

UI extensions were introduced earlier this year. They come with a vanilla JavaScript SDK, and React SDK that gives you all of the tools to extend the functionality of GraphCMS with your own custom self-hosted application.

To make things easier, we've built an example Bynder UI Extension. It's recommended you explore the example to see for yourself what goes into building an extension, and build something that fits your workflow. This example isn't intended to be production ready, and doesn't come with any warranty.

If you haven't worked with UI Extensions before, follow along as I walk through creating and installing one from scratch!

The Bynder Extension CodeAnchor

You can browse the files on GitHub, or download them using npx degit:

npx degit graphcms/graphcms-examples/uix-bynder-input uix-bynder-input

Then, once installed, change directory, and run a simple server (on Mac):

python -m SimpleHTTPServer 8000

Once this is running, you'll want to install it using the local address, e.g. http://localhost:8000/ within your GraphCMS Project Settings:

UIX run compatibility test

Once you pass the compatibility test, you'll need to provide details about your Bynder account to the extension. This is safely stored with GraphCMS.

NameTypeDescriptionExample
Default DomainStringYour Bynder portal urlhttps://<your-domain>.bynder.com/
Default domain editableBooleanShould users be able to change the default domain?
Available asset typesStringDetermines which asset types your users will be able to select.["image", "audio", "video", "document"]

Bynder JSON Field Type

Once your schema has the custom field type for your UI Extension, you can interact with it when editing content.

In this case, the UI Extension invokes Bynder's Compact View v2 component to browse and select assets.

Bynder UI Extension in situ

That's it! You can see here that content editors now have the power to work with digital assets stored within another system, and developers can query that JSON data Bynder stored directly from GraphCMS:

GraphCMS API Playground with Bynder query

It's Easy To Get Started

GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or request a demo to discuss larger projects with more complex needs