Try it! Code explorers and feature demos

Last updated: Nov-20-2022

Prefer to learn by playing? We've got you covered.

Jump to any of these inline code explorers Code explorer icon or interactive feature demos Interactive demo icon to play, learn, and get started building your own Programmable Media capabilities in minutes:

Introduction to commonly-used features

Upload, transform and deliver
using the Node.js SDK

Call common API methods and deliver media using Node.js.

Upload, transform and deliver
using the Python SDK

Call common API methods and deliver media using Python.

Upload, transform and deliver
using the Go SDK

Call common API methods and deliver media using Go.

Transform and deliver
using the JavaScript SDK

Get started fast with the JavaScript SDK.

Transform and deliver
using the Angular SDK

Get started fast with the Angular SDK.

Transform and deliver
using the React SDK

Get started fast with the React SDK.

Upload and manage assets

Upload Multiple Files: Unsigned

Upload local files via an unauthenticated POST request in client-side code.

Upload Multiple Files: Signed

Generate a server-side signature and pass it to a client-side signed upload call.

Upload Large Files: Unsigned

Upload large local files by chunking the POST requests in client-side code.

Run Cloudinary APIs in Postman

Config your env vars and run predefined API commands against your product environment in Postman. Learn more about running Postman collections

Transform and deliver media

This section includes code explorers and demos for:

Optimized and responsive media

Pick a Resize or Crop Mode

See the results of different cropping modes on the same image, given a specific viewport size.

Automate Accessible and Responsive Images (React)

Render images in Cloudinary using the React SDK accessibility and responsive plugins

Automate Accessible and Responsive Images (Angular)

Render images in Cloudinary using the Angular SDK accessibility and responsive plugins

Automate Accessible and Responsive Images (JavaScript)

Render images in Cloudinary using the JavaScript SDK accessibility and responsive plugins

Optimize Image Quality

See the effect that various automatic and fixed quality settings have on an image's visual quality.

Optimize Video Quality

See how various quality settings affect the resulting file size when encoding a video.

AI-based transformations

Orientation-Based Video Auto‑Crop and Rotate

Show different auto-cropped videos for portrait or landscape device orientation.

Detect Image Objects with AI

Try different AI content-aware models to see the objects they detect in any uploaded pic.

Mix Artwork Styles with Photos

Look what you get when our neural artwork add-on merges an artwork style with the photo of your choice.

Auto-Generate Short Video Previews

Play an auto-generated video preview on hover and open the full video in a video player on click.

Misc cool effects and enhancements

Show Transparent Video over Web Content

Toggle the transparent video to display it inline or on-top-of web page content.

Try Different Cross Fade Transitions

See how different cross fade transitions look when concatenating videos.

Play with Image Transformations in a React App

Experiment with a large collection of image transformations within a simple React app.

Play with Video Transformations in a React App

Experiment with a large collection of video transformations within a simple React app.

Play with Image Transformations in an Angular App

Experiment with a large collection of image transformations within a simple Angular app.

Play with Video Transformations in an Angular App

Experiment with a large collection of video transformations within a simple Angular app.

Play with Image Transformations in a JavaScript App

Experiment with a large collection of image transformations within a simple JavaScript app.

Play with Video Transformations in a JavaScript App

Experiment with a large collection of video transformations within a simple JavaScript app.

Live streaming videos

Live Stream a Video Using WebRTC

Select a device to stream from and set up a live stream.

Embed a widget or player in your app

This section includes code explorers and demos for:

Upload Widget

Create and Customize:
Upload Widget

Start with a simple upload widget and uncomment config lines to customize it.

Use the Upload Widget for Signed Uploads

Perform signed Upload Widget uploads using the sig generated in a server-side Node app.

Product Gallery

Create and Customize:
Product Gallery

Start with a simple product gallery and uncomment config lines to customize it.

Make Your Product Gallery Accessible

Add keyboard controls, alt-text and more to a Product Gallery as shown in the corresponding video tutorial.

Video Player

Try Some Video Player Methods

Take advantage of advanced Video Player features by using different Cloudinary Video Player methods.

Run an Ad Before a Video Playlist

Run a sample ad in a Video Player including countdown text and other customizations.

Pre-Schedule a Video Player Stream

Try a simplified demo for streaming using the Cloudinary Video Player.

Add Interactivity to Your Videos

See how to add interactive video functionality, including video zoom to the Cloudinary Video Player

✔️ Feedback sent!

Rate this page: