MediaFlows Demo
Default uploaded video

Smart video previews

High-performance video hero previews

Use a short Cloudinary clip for the first impression, then load the full video later.

What this demo achieves

This demo shows how Cloudinary MediaFlows PowerFlows can automate a complete video preview workflow from upload to delivery. PowerFlows is Cloudinary’s low-code, drag-and-drop workflow builder for media pipelines, designed to connect upload events, transformations, and external systems in one flow.

PowerFlow automation

In this project, a PowerFlow starts on asset upload, filters for video assets, generates a short optimized preview URL, and sends the result to the TanStack Start app through a webhook. This removes manual media steps and turns a normal upload into an automated preview pipeline.

Smart preview delivery

The flow creates an 8 second hero-ready clip using Cloudinary video transformations with start offset, duration, resizing, and automatic optimization. The app then uses that preview URL for the hero while keeping the full video available as the richer source.

Frontend upload testing

The navbar includes the Cloudinary Upload Widget, so users can upload their own video without opening the backend or the Cloudinary console. After upload, the app waits for MediaFlows to finish processing, then updates the hero with the latest saved asset.

Webhook-driven app updates

The TanStack Start app receives webhook data from MediaFlows, maps the asset into UI state, and renders the newest preview video in the hero. This shows how MediaFlows can sit between media upload and product UI delivery with very little glue code.

Flow summary

  1. 1. A user uploads a video from the app with the Upload Widget.
  2. 2. Cloudinary stores the original uploaded asset.
  3. 3. MediaFlows PowerFlows triggers automatically on video upload.
  4. 4. The flow builds a trimmed, optimized preview URL.
  5. 5. The flow sends that payload to the app webhook.
  6. 6. The app saves the latest asset and updates the hero.

Project links

Live demo: media-flows-video-preview-demo.vercel.app

GitHub repo: github.com/musebe/MediaFlows-Video-Preview-Demo