Try it! Code explorers and feature demos

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:

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 account 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

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.

Transform Images and Videos (Go)

Render optimized and transformed images and videos in Cloudinary using the Go SDK.

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.

Play with transformations in a React app

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

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: