Media Library Widget Demo

This demo project shows how to embed the Cloudinary Media Library widget into a web page using a Vite-based setup.

The widget lets you open Cloudinary's media library UI, select one or more assets, and then handle the selected assets in JavaScript (for example, logging them or inserting them into your app).

Tech Stack

• Build tool: Vite
• Language: Vanilla JavaScript

Getting Started

1. Install dependencies

npm install

2. Run the dev server

npm run dev

3. Open the app

Vite will print a local URL (usually http://localhost:5173). Open it in your browser to see the widget.

How It Works

• The main logic lives in src/index.js.
• A Cloudinary media library instance is created with configuration options such as:
  • cloud_name
  • api_key
  • inline_container
  • button_caption, button_class
  • max_files, insert_caption, and others
• An insertHandler callback receives the selected assets array; in this demo, the assets are simply logged to the console.

Customization

• Update the options in src/index.js (for example, cloud_name, api_key, max_files, captions, and container selectors) to match your own Cloudinary account and UI requirements.
• Adapt the insertHandler to integrate the selected assets into your own application instead of just logging them.

Scripts

• npm run dev: Start the Vite development server.
• npm run build: Build the project for production.
• npm run preview: Preview the production build locally.