Cloudinary Examples

Learn how to easily integrate Cloudinary into your projects with real examples.

• .NET
• Android
• JavaScript
• Angular
• Astro
• Dart
• Flutter
• Go
• HTML & Browser
• iOS
• Java
• Kotlin
• Laravel
• Netlify
• Next.js
• Node.js
• Nuxt
• PHP
• Python
• React
• Remix
• Ruby
• SolidJS
• Svelte
• SvelteKit
• Streamlit
• Tina
• Vue
• Vercel

This is a community project supported by the Cloudinary Developer Experience team.

🧰 Examples

.NET

• Uploading Images
• Uploading Videos

Android

• ImageView

JavaScript

• Image Upload with Fetch

Angular

• Image SDK
• Cloudinary Upload Widget with an Upload Preset (Unsigned)
• Video Player

Astro

• Astro Cloudinary SDK
• Using Astro Image
• Cloudinary Product Gallery
• Uploading with Forms
• Cloudinary Upload Widget with an Upload Preset (Unsigned)

Dart

• Transformations & Effects
• Uploading Images

Flutter

• CldImageWidget
• Transformations & Effects

Go

• Credentials
• Transformations & Effects
• Uploading Images

HTML & Browser

• Client Hints

iOS

• CLDUIImageView

Java

• Uploading Images

Kotlin

• ImageView

Laravel

• Uploading Images

Netlify

• Netlify Function - Cloudinary Custom Remote Function
• Netlify Function - Cloudinary Webhook Endpoint
• Netlify Graph Authentication - Cloudinary Auth in Netlify Function

Next.js

• App Shoppable Video
• Upload Widget with Captions
• Holiday Card
• Cloudinary Upload Widget with Signed Uploads
• Cloudinary Upload Widget with an Upload Preset (Unsigned)
• Next Cloudinary - CldImage
• Next Cloudinary - CldOgImage
• Next Cloudinary - CldUploadButton
• Next Cloudinary - CldUploadWidget
• Next Cloudinary - CldUploadWidget - Signed Uploads
• Next Cloudinary - CldVideoPlayer
• Next Cloudinary - CldVideoPlayer - Streaming & ABR
• Next Image - Cloudinary Loader
• Next Image - Cloudinary URLs
• Social Media Cards
• Upload Files with FormData in API Routes
• Upload Files with Route Handlers
• Upload Files with Server Actions

Node.js

• Eval on Upload
• Personalized Email Images
• Social Media Card
• Transformations & Effects
• Uploading Images
• Uploading Videos

Nuxt

• Nuxt Cloudinary - CldImage
• Nuxt Cloudinary - CldOgImage
• Nuxt Cloudinary - CldUploadButton
• Nuxt Cloudinary - CldUploadWidget
• Nuxt Cloudinary - CldVideoPlayer
• Nuxt Image - Cloudinary Image Provider
• Cloudinary Upload Widget with an Upload Preset (Unsigned)

PHP

• Transformations & Effects
• Uploading Images

Python

• Transformations & Effects
• Image Overlays
• Uploading Images

React

• Custom Fonts
• Drag & Drop Upload
• Image Collage
• Upload Widget with Upload Preset (TypeScript)
• Webcam
• Cloudinary AdvancedImage
• Cloudinary AdvancedVideo
• Cloudinary Media Library
• Cloudinary Product Gallery
• Cloudinary Upload Widget with an Upload Preset (Unsigned)
• Cloudinary Video Player
• Dark Mode & Light Mode Images
• Removing Backgrounds
• Transformations & Effects

Remix

• Transformations & Effects
• Cloudinary Product Gallery
• Cloudinary Upload Widget with an Upload Preset (Unsigned)
• Video Preview

Ruby

• Image Overlays
• Uploading Images

SolidJS

• Cloudinary Product Gallery
• Cloudinary Upload Widget with an Upload Preset (Unsigned)
• Transformations & Effects

Svelte

• Cloudinary Video Player
• Cloudinary Product Gallery

SvelteKit

• Cloudinary Upload Widget with an Upload Preset (Unsigned)
• Svelte Cloudinary - CldImage
• Svelte Cloudinary - CldOgImage
• Svelte Cloudinary - CldUploadWidget
• Transformations & Effects
• Uploading Images

Streamlit

• Transformations & Effects

Tina

• Cloudinary Media Manager Integration

Vue

• Cloudinary AdvancedImage
• Cloudinary Product Gallery
• Cloudinary Upload Widget with an Upload Preset (Unsigned)

Vercel

• Countdown Timer

🧐 Not seeing an example?

Create an issue detailing the project and how Cloudinary would integrate.

If the use case seems like it would be broadly helpful for others as well, I'll try to work it into this repository!

🛠️ Contributing

Each project is independently maintained, though uses pnpm workspaces for dependency management.

To create a new example, first check if an existing example is avaiable for the given framework. If so, it's recommended to copy the directory for your new example to maintain consistency between the examples.

If no existing example exists, you can create a new directory that includes the basic example.

All examples should be minimal with as little dependencies as needed (ideally no additional dependencies).

✨ Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!