Cloudinary Studio widget

This app shows a basic example of the Cloudinary Studio widget. Enter the public ID of an image, edit it in Studio, and click Insert to display the transformed image and its delivery URL.

Run locally

1. In studio-widget.js, replace <CLOUD_NAME> and <API_KEY> with your own cloud name and API key, from the API Keys page of the Cloudinary Console.
2. Run npm install.
3. Run npm start.
4. Open http://127.0.0.1:8080. If you don't already have a Cloudinary session in your browser, sign in to Cloudinary when the widget opens.

Note: Open the app at 127.0.0.1, not localhost. When the page runs on localhost, the widget connects to Cloudinary's staging environment, so your production credentials don't work.

Learn more

• Studio widget guide
• Studio widget API reference