Integrate Cloudinary with GraphCMS UI Extensions

Cloudinary is a popular Digital Asset Management System. Teams looking to create a best-of-breed architecture can easily integrate Cloudinary with GraphCMS using UI Extensions.

Jamie Barton
GraphCMS + Cloudinary

Cloudinary is a popular Digital Asset Management (DAM) for teams wanting to optimize their digital content workflows and help automate where possible. Companies looking to create a best-of-breed architecture may want to integrate Cloudinary with GraphCMS which is possible with UI Extensions.

We released UI Extensions earlier this year. Out of the box, our UI Extensions offer a vanilla JavaScript SDK, and React SDK which gives you everything you need to extend the functionality of GraphCMS with your own custom self-hosted application.

To help you get started, we've built an example Cloudinary UI Extension. As this is only an example, we recommend that you take some time to explore the example to better understand what you need to do to build your own UI extension that works for your team and its workflows 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 Cloudinary extension codeAnchor

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

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

Then once installed, change directory, install the dependencies, and run Create React App:

npm install
npm start

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

Compatibility UI Extension test

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

Cloud NameStringYour Cloudinary Cloud Namegraphcms
Public API KeyStringYour Cloudinary API key. Found within security settings123ABCDEF456

Now all that's left to do is add your new JSON field type to your project schema, and manage some content to see the extension.

Cloudinary UIX Field Type

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

When editing content, you'll see the Cloudinary UI picker:

Cloudinary UI Picker

That's it! Once you select the asset(s) within Cloudinary, this data is then saved with GraphCMS as JSON.

Developers can now query that JSON data directly from the GraphCMS API:

API Playground response

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