Promoting your content on social media is an important part of the publishing process, but as anyone who has attempted to share their work online knows, social media is a black hole of content. It's really easy to publish, and then see your work lost in the endless stream of tweets and posts. But by sharing images or "Open Graph Images" for your content, you can stand out more!

Automatically Generate Social Sharing Images

When displaying video on your site, adding your logo to the video makes the content look branded and more polished. In this tutorial, we’ll look at how we can automatically add our logo to a video using Cloudinary, and display it in a React component.


Add a Branding Watermark to Video With React

A video streaming application that leverages Cloudinary for video and image manipulation and storage, Next.js and Airtables

Video Streaming the Jamstack way

In this article, we'll build a responsive and optimized video playlist application using Next.js and Cloudinary.

Build a Responsive Video Playlist with Next.js 

Sometimes you need to see how things are spread across an image using a heatmap that dynamically moves. In this post, we'll set up a heatmap that moves based on user input and we'll save the images to Cloudinary for later review.

Making a Picture Heatmap in Redwood

There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.

Creating an Asteroid Map with a NASA API

This article illustrates how to upload media assets to Cloudinary with Azure function.

Upload to Cloudinary with Azure Functions

Bringing AR to web apps seems like something that's pretty common, but it still takes some custom work to get things going. In this post, we'll go through how you can add AR.js to a Redwood app to enable AR functionality.

Building an AR App with Markers

In this article, we'll see how to prevent layout shifts with the Next.js Image component.

Fix Layout Shifts with Next.js Image Component

Social media is amongst the main sources of website traffic in this day. Let us learn how we can ensure our websites look elegant by dynamically generating relevant social sharing images. 


Automatic Social Share Images In Nuxtjs

As e-commerce and video consumption adoption increases, an interesting intersection of the two is emerging. Giving the users an in-depth experience of the product by displaying not just static images but a sample usage/adoption video. These are called Shoppable videos. Let us learn how we can add them to our Nuxt.Js websites.


Adding Shoppable videos to your Nuxt.Js website

HTML allows us to easily embed video players on web pages. Video playlists however are outside of the scope of the standard Video element. Let us explore how we can add video playlists on our Nuxt.Js websites


Embedding video playlists on your Nuxt.Js website

Users are now interacting with videos more and more every day. In this article, we explore how to add action points within and after our video has finished playing. 


Customising videos with custom CTAs in Nuxt.Js

Floating videos are a common sight whether on YouTube, Facebook, or Twitter. In this tutorial, we explore how we can easily create such a floating video player on a Nuxt.Js website.



Floating video player in Nuxt.Js

Use face-api.js to detect facial landmarks(eyes, nose, mouth, etc), and apply overlays using cloudinary transformations.

Detecting face landmarks and add filters overlays 

For video-intensive applications, video recommendations are a standard feature to ensure a smooth user experience. We see recommendations seamlessly function in video apps such as   Netflix and Youtube. Let us learn how we can add them into our own custom applications.


Displaying video recommendations in Nuxtjs

Convert audio waveform data into images using audio-visualizer and serve them using cloudinary


Audio waveform data to video with Next.js

In this article, we create an application that facilitates real-time audio and video communication using a peer-to-peer (webrtc) protocol. The application will also contain cloudinary online storage relevant for a user’s future reference.


Real Time Communication Web App

In this jam, we'll learn how to use one of HTML's responsive image features -  resolution switching to make images responsive across a range of device screens. We will be using Cloudinary to host, transform and generate different file formats and sizes of our image.

Responsive Images with Resolution Switching 

In this article, we will build an app that uses an image compression module to compress images and display the resulting size. As bonus steps, we will add the options to communicate with a serverless function to upload the compressed file to Cloudinary or download the image to your computer.


Build an Image Compressor with Next.js

In this article, we will build an application that dynamically generates social images. Using Cloudinary, we will dynamically layer texts on a base image or a banner that suits your brand to generate custom social images for your blog posts.


Generate Social Images for Blog Posts

In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.

Build Customized Video Players with React

Convert string/text to a photo of a handwritten notebook page using Cloudinary + Next.js


Convert text to handwritten pages using Nextjs

Apply the CCTV grayscale and noisy effect to any video using Cloudinary and Svelte.js


CCTV video effect using cloudinary and svelte kit

Create a holiday card generator using Nuxt.js and Cloudinary

Create a holiday card generator in Nuxt.js

Have you ever watched one of those programming videos where the person's face is overlayed over their computer screen? That's made possible using green screens. They're widely used especially in the media and filming industries. Even though green screens are preferred more, you can achieve the same using any solid color. I won't go over why green is more suitable compared to say blue or some other color. There are tons of youtube videos explaining that. You can check out this video or this one. That said, even though the title of this tutorial focuses on green screens, you can do the same for any video with a contrasting solid background color. In this tutorial, we'll be using Cloudinary and SvelteKit. SvelteKit is to Svelte.js just as Next.js is to React.js or Nuxt.js to Vue.js.

Edit green screen videos using  Sveltekit

There are many scenarios in which you want to present website screenshots in a neat manner. This can be when displaying your portfolio as a consultant or consulting company to when you want to show your company’s platform on a pitch deck. In this article, we review how we can achieve this in a Nuxt.Js app.

Website screenshot framing in Nuxt.Js

Converting video formats can be quite a difficult process requiring purchasing licensed software. In this tutorial, we review how we can convert a video into many common video formats without the additional cost or complexity. We will do this programmatically using Nuxt.Js enabling you to do this at scale.

Nuxtjs video format converter

In this Mediajam, we are going to see how we can use Chart.js to create visualization graphs from data and combine different visualizations into one image using Cloudinary.

Data visualization using Chart.js, and Next.js 

With virtual and physical events happening every weekend, the need to have interactive features such as dynamic tag generators has increased.
In this tutorial, we learn how we can generate virtual tags/badges dynamically. This tutorial is fully inspired by [Jamstack Conf](https://jamstackconf.com/badge/make/)'s badge maker. The resources and the designs are obtained from their website. Feel free to register as well ;-D

Virtual event badge using Cloudinary and Nuxt.js

Video subtitles provide a better viewing experience and also improve accessibility for persons with disabilities. Manually adding subtitles to videos, however, proves to be repetitive, boring, and a lot of work. Luckily, there’s a way we can automate this. In this tutorial, we’ll take a look at how to automatically add subtitles to videos using Google video intelligence, Cloudinary, and Next.js.

Subtitling videos using Google Video Intelligence

This post describes how to create an Avatar service, managing an image upload to Cloudinary.

Build a Gravatar Service in Next.js - Image Upload

Media transformations have been at the edge of the new wave of social media apps. Allowing our users to do a lot with their images improves the user experience of our applications. Let us explore how we can enable our users to Cartoonify their images easily.

Cartoonifying images using Nuxt.Js

Trimming videos can be challenging especially if we want to do it programmatically. Using server-side tools can be too heavy for simple JAMStack applications. In this tutorial, we learn how we can trim videos easily programmatically.


Video trimming using Nuxt.Js

Getting profile images seems like a simple task until we realize that most users just have normal solo photos of themselves. This means that they are not just headshots and the user’s face can be anywhere in the image. We thus need a smart way to obtain the headshots from user uploads. Let us learn how we can build this into our applications.


Nuxtjs Profile Picture Generator

One of the best features of modern video streaming is adaptive streaming. The video automatically adjusts quality based on the quality of your network connection. Let us learn how we can implement this in our own applications.

Adaptive bitrate video streaming using Nuxt.Js

Extracting the audio track from existing videos can be very useful. This is for example when we want to make our video playlists accessible on the go in audio format. Without any server-side code, let’s explore how we can easily get audio tracks from videos.

Nuxtjs Video To Audio Converter

When testing webpages, you may need to take a screenshot of that particular site programmatically. You can then use these screenshots to detect layout shifts, test different viewports, and more. In this brief tutorial, let's take a look at how we can achieve this using Puppeteer, Cloudinary) and Next.js.

Screenshot  websites using puppeteer, next.js 

There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.

Making a User Interface for DApps

Create an instagram stories clone with a countdown using Next.js and remote images.

Build an Instagram Stories UI in Next.js

Build the familiar image zoom lens in ecommerce products using React image magnify and Next.js

Build a Product Image Zoom Lens in Next.js

Most of the time the only media types that get attention in web development are videos and images. We're going to make a small app that will let users work with audio in the browser and make their own beats!

Building a Virtual Beat Box in Redwood

Getting started with blockchain and smart contract development can seem like a lot of new things to learn. When you start by building simple apps, it makes it easier to learn the core concepts. In this tutorial, we'll learn how to write smart contracts and a Dapp to handle user profiles using a few different tools.

Working with User Profiles on a Blockchain

Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.

Handling Orders using Web3 and Ethereum

This second part of a two-part post discusses how to apply transformations to an uploaded image, making it into an avatar.

Build a Gravatar Service in Next.js

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est quam, fermentum sed varius vitae, consectetur sed nunc. Integer sed libero pellentesque, finibus arcu eget, interdum odio. Morbi in pretium dui, ut vehicula orci. Donec bibendum vulputate est sit amet scelerisque. Vestibulum ac rutrum metus. Integer placerat odio massa, finibus. 

Browser Compression


In this post, we will explore how to use some of the advanced features of the Cloudinary-React library to build and apply various transformations to our React image component.

Create a Responsive React Image Component

In this Mediajam, we will learn how to automatically generate promotional posters/discount posters for shops/supermarkets, etc using Cloudinary and Next.js


Generate promotional posters using Next.js

In this tutorial, we learn how we can easily and dynamically change the audio track on a video file. This is useful when rendering the same content to an audience of multiple languages


Audio track Changer with Nuxt.js

We need to consider accessibility when giving our users content at all times. In this tutorial, we learn how to automatically generate transcripts for our videos

Video Transcription In Nuxtjs

Video aspect ratio editor using Nuxt.Js

The [Jamstack Conference 2021](https://jamstackconf.com), is right around the corner. Those who wish to attend the virtual conference can generate an amazing-looking badge on the [website](https://jamstackconf.com/#/). I thought that this was super cool and wanted to make an attempt at it using [Cloudinary's](https://cloudinary.com/?ap=em) chained transformations and [Next.js](https://nextjs.org/).

Virtual event badge using Cloudinary and Next.js

VR is a relatively new area of tech and now's a good time to learn about how to make AR apps with JavaScript. This tutorial will take you through everything you need to get started with VR in Redwood.

Creating a VR App with Redwood

When you're building components to use in an app, it helps to work with them in isolation. With Storybook, you can test and create components in isolation from the entire app. In this tutorial, we'll go over writing stories for components in Redwood.

Making Better Components With Storybook

Having a customizable media library can help you keep track of relevant content and manage settings around it. In this post, we'll create a media library that can be extended to cover a lot of different needs.

Making a Media Library with Redwood

Dashboards are a common part of many apps, but they are so complex with the amount of data they handle. We're going to use Redwood to make a user dashboard with a database, back-end, and front-end all connected.

Building a User Dashboard with Redwood

Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.

How To Make A Custom Video Player in Redwood

Users expect to be able to see their data in a format that's easy for them to read. When you allow them to download custom reports as PDFs, it gives them something they can use to see their data quickly. In this tutorial, we'll make a new Redwood app that stores user data and generates reports for them.

Creating Custom User Reports with Redwood

You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.

Adding Custom Branding to a Redwood App

Going back to the drawing board is more fun when you're the one that made the board. In this tutorial, we'll use Redwood to make a drawing board that we can save the drawing of.

Building a Drawing Board with Redwood

This article will show how we can resize and crop images to the specified dimensions using different scaling and cropping methods Cloudinary provides.

Fix Mismatched Aspect Ratio with Cloudinary


In this article, we'll learn how to create an application that allows us to take pictures using a webcam and then use Cloudinary's image transformation features to add filters to our pictures.

React Selfie App with Cloudinary

In this jam, we'll look at how to upload images to Cloudinary using Netlify's serverless functions.

Upload Images to Cloudinary with Netlify Functions

Working with WebRTC has gained more use as we've all turned to online video calls. It's one of the things that's good to have in your toolbox as a JavaScript developer. In this tutorial, we'll make a quick photo booth to allow user's to take and store images from their camera.

Build A Virtual Photo Booth with Redwood

Everybody has at least one meme that they like, it's really hard not too. But what if you could make the next big meme? Or even better, the next big meme generation app? The entertainment could be endless. That's why we're making a meme generator in this tutorial!

Creating a Meme Generator with Redwood

E-commerce sites are popping up every day and maybe you might want to make one. In this tutorial, you'll learn how to make a basic shopping cart and checkout flow using Stripe. This can be extended to work with more complex functionality as you need.

 Building a Shopping Cart with Redwood

Feeding yourself as an adult is hard sometimes. There are times it's too hard to make a choice on what to eat because there are too many options. That's why we're going to make an app to pick a meal for us!

Making a Meal Picker with Redwood

In this Mediajam we will learn how to read text from cloudinary images using an open-source solution called Tesseract OCR. 


Extract text from images using tesseract.js

This article shows how to create a screen recording software that turns screen output to video that is stored and retrievable from Cloudinary. The videos can be used to teach an application or to promote a product by demonstrating its features.

Screen recorder with next js

Insert video Ads in between videos, store the videos in cloudinary, and offer the user a skip ad button while the Ad is playing.


Insert Ads in between videos  using Next.js

Learn how to use Google’s video intelligence to detect explicit content, then use cloudinary to store the videos and blur explicit video frames.

Blur explicit content in videos 

MDsveX is the answer from the Svelte world to the need of authoring rich media content using a powerful media like Markdown. This is a markdown pre-processor for Svelte components, this preprocessor allows you to use Svelte components in your markdown, or vice versa. It supports all Svelte syntax and almost all Markdown

Embed media components using MDX and SvelteKit

In this blog post, we learn how to use cloudinary to transform videos to boomerang style gifs


Convert Video to Boomerang Using Next.js

Sometimes you need to make custom graphics to show complex data. In this tutorial, you'll learn how to do that with D3js and then upload snapshots to Cloudinary!

Data Visualizations with D3.js and Redwood

Google Cloud’s Vision API allows us to derive insights from our images in the cloud. We will use this API to tag and classify our images in Nuxt.Js and Cloudinary.


Tag and classify images using Google's Vision API 

For any product manager or app developer, it is very easy to record the screen of your latest release. It is also very easy to record yourself as you walk through the application. It is however not easy to combine these two videos together let alone in a presentable manner.
In this tutorial, we demonstrate how to create a demo walkthrough generator for easy updates of your product walkthroughs.

Mobile app demo walkthrough generator

Implement product customizations as seen on e-commerce stores using Next.js

E-commerce Product Variant Customization in Next.js

Many organizations and groups are now building custom learning management systems, but many are designed for textual content. This article teaches how to build a simple video course platform using Nuxt.js, Cloudinary, and Forestry.io.


Building a video course platform with Nuxt.js

Extract prominent colors from cloudinary images and generate a color palette that can be used to style elements surrounding the image.


Image Color Palette Generator

Use google video intelligence to analyze cloudinary videos and draw boxes over any identified faces in the video.

Use face tracking to analyze videos and draw boxes

Upload and combine multiple video files to form one single stored and retrievable through Cloudinary's transformation API.

Combine multiple videos snippets into one video

Do you have an extensive wedding invite list and need an easy way to invite everyone? Are you an event organizer who regularly needs to send out invitations to your attendees? In this article, we review how we can dynamically create invitations and send them out in Nuxt.Js.

Wedding invitation app in Nuxt.Js and Nodemailer

In this tutorial, the first part of a 2-part series, learn how to handle audio and video uploads while building a video skit maker. 

Video Skit Maker in Next.js - Video and Audio Upload

In this tutorial, the second part of a 2-part series, learn how to handle video transformations while building a video skit maker. 

Video Skit Maker in Next.js - Video Transformations

Learn to replicate the CTA options shown at the end of youtube videos

Building a Youtube-Style Post-Video Overlay CTA

This tutorial will explore how to create a secured upload component with Cloudinary, and enhance the power of serverless in your Jamstack application.

Build serverless upload with Cloudinary

Netflix uses optimized transitions to autoplay a movie when it's highlighted. Learn how to do this in React.js.

Creating Netflix Style Overlay Transitions

Learn to build a video blog in Next.js using Markdown and Cloudinary

Creating a Video Blog in Next.js

Boost e-commerce conversion using shoppable videos. Learn to utilize a shoppable video in Next.js

Using Shoppable Video in Next.js


In this Mediajam, we will learn how we can leverage Google's Dialogflow to analyze voice commands and use these commands to control video playback. We will look at how to create Dialogflow intents that translate to basic video commands such as play, pause, stop and seek video forwards or backward.

Control video playback with voice using Dialogflow

Whenever we need to deliver image content to our users, depending on business requirements and the user’s device configurations, we may need to switch formats. This is especially true for image/PDF formats. In this article, we review how we can easily achieve this.

Nuxt.js Image to Pdf Converter

Setup a Developer Blog with Social Images using SvelteKit

In this media jam, you will create a Discord Bot to send memes to the discord channel. You will select a random image from your Cloudinary account, add the meme or the text message by the user to it and send it to the discord channel.

How to build a Discord Meme Bot with Cloudinary

In this media jam, we will build a discord bot to send GIFs with Node.js.

How to build Discord GIF Bot with Nodejs

Every business always has a change in staff on an annual basis. Contacting the graphic designer for new designs and new cards is always a hustle. In this article, we review how we can develop a digital business card generator to remove the hustle from this process.


Digital business card generator using Nuxt.Js

In this Mediajam, we shall create an eCommerce sample application and add stripe integration to it. Once the transaction is successful an email containing the transaction receipt and the product images will be sent to a user's email as proof of purchase.  


Stripe-Cloudinary Transaction Receipts Generator

Hosting an event with cool merch? Running a printing business? In this article, we review how we can create a t-shirt design visualizer with some dynamic features such as color options.


Clothing design visualizer with Nuxt .Js

A meme generator is a video or image maker that allows you to add custom resizable text to images. In this Mediajam we shall build one using Next.js and Cloudinary.

Meme generator using Next.js Images and videos

In this Mediajam we will learn how to use Tagged Markers in navigating specific sections in videos using Cloudinary and the different addons they provide. We'll use the Next.js framework to build the application.

Navigating Real-Estate Videos With Tagged Markers 

In this Mediajam, we’ll explore a simple way to receive and display the tweets in real-time as they are sent using Pusher, Zapier, and Cloudinary.


Learn Media for Apps