Programmable Media

Try it! Code explorers and feature demos

Last updated: Feb-04-2024

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.

Transform and deliver
using the Vue.js SDK

Get started fast with the Vue.js 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

Computer Vision

Upload images and Cloudinary will describe and transform them automatically.

Offer Product Recommendations

Use auto-tagging to make e-commerce product recommendations based on user selections.

Create a Collage

Drag and drop images to create collages with different layouts and check out the code behind it.

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 (Vue.js)

Render images in Cloudinary using the Vue.js SDK accessibility and responsive plugins.

Automate Accessible and Responsive Images (JavaScript)

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

Responsive srcset Images

Change the browser size to load dynamically resized images using the srcset and sizes attributes of the img tag.

Art-Directed Responsive Images

Change the browser size to load differently cropped images using the picture tag.

Responsive Images Using Client Hints

Change the browser size and refresh to load differently sized images from the server based on client hints.

Responsive Images Using the cloudinary-core JS Library

Change the browser size to load dynamically resized images from the client side.

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.

Auto-Generate Short Video Previews

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

Recolor Objects in Images You Upload

Recolor detected objects for redecoration, product showcasing, or creative expression.

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.

Capture a 3D model as a 2D image

Try out different camera effect settings to capture images of 3D models.

Create Realistic Shadows

Set the angle and spread of a light source to see the effect on a generated shadow.

Play with Text Distortion

Try squashing, squeezing, elongating and customizing the shape of a text string.

Display Product Images in React

See how to apply optimization, background removal and drop shadow in a React app.

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 Vue.js App

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

Play with Video Transformations in a Vue.js App

Experiment with a large collection of video transformations within a simple Vue.js 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.

Video streaming

Try Adaptive Bitrate Streaming On The Fly

See videos being streamed using automatic streaming profile selection.

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.

Spin Sets From 360 Panoramic Images

Use the Product Gallery to display interactive 360 spin sets made from panoramic images.

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: