Cloudinary VS Code Extension (Beta)

The Cloudinary VS Code Extension brings essential media asset management capabilities directly into your development environment. Browse, search, upload, and reference your Cloudinary assets without switching between your IDE and browser.

Overview

The Cloudinary VS Code Extension eliminates the need to switch between your IDE and browser when working with media assets. Browse your Cloudinary media library, copy asset references, upload files, and preview images and videos—all from within your IDE.

The extension provides:

• Asset Explorer: Browse your complete media library in a tree view that mirrors your Console folder structure
• Search and Filtering: Find assets by public ID or filter by media type (images, videos, raw files)
• Quick Copy Actions: Copy public IDs and secure optimized URLs with a right-click
• Direct Upload: Upload files to your account with folder targeting
• Asset Preview: View images and videos directly in VS Code
• Environment Management: Switch between multiple Cloudinary accounts

This is particularly useful when you need to reference existing assets while building your apps, verify that specific assets exist, upload test assets during development, or work across multiple Cloudinary environments.

Integration with other tools

The VS Code Extension complements other Cloudinary developer tools:

• MCP servers: Use the extension for visual asset browsing while MCP servers handle programmatic operations and AI-assisted development
• SDKs: The extension helps you discover and reference assets that your SDK code can build out to Cloudinary URLs.

Installation

1. Open VS Code.
2. Navigate to the Extensions view (Ctrl/Cmd+Shift+X).
3. Search for "Cloudinary".
4. Click Install on the Cloudinary extension.

Alternatively, install directly from the VS Code Marketplace.

Configuration

The extension reads credentials from a JSON configuration file that supports both global and workspace-specific settings.

Configuration file location

Create a configuration file at one of these locations:

• Global configuration: ~/.cloudinary/environments.json (applies to all projects)
• Workspace configuration: .cloudinary/environments.json at your project root (applies only to that project)

If both files exist, workspace-specific configurations take precedence over global configurations.

Configuration format

Each entry represents a separate Cloudinary environment that you can switch between using the VS Code status bar.

Finding your credentials

You can find your credentials in the Console Settings > API Keys page:

• Cloud name: Your Cloudinary account identifier
• API Key: Your public API key
• API Secret: Your private API secret
• Upload preset: A pre-configured upload preset name. An upload preset is required for the extension to work. Create or manage upload presets in the Upload Presets page of the Console.

Using the extension

Browsing assets

The Cloudinary sidebar provides a tree view of your entire media library organized by folders, mirroring the structure you see in your Cloudinary Console.

The tree view has a limit on the number of loaded assets, click "load more" to load more assets. This keeps the interface responsive even with large media libraries containing thousands of assets.

Searching assets

The search functionality helps you quickly locate specific assets without manually browsing through folders.

1. Click in the search box at the top of the Cloudinary panel.
2. Type any part of an asset's public ID.
3. Press Enter to search.

The search is case-insensitive and searches across the full public ID path, including folder names. For example, searching for "logo" matches assets like products/logo.png, brand/company-logo.jpg, and logos/mobile/header-logo.svg.

To clear your search and return to the folder view, click the "Clear Search" option.

Filtering by media type

When you need to work with specific types of media, use the filter button to narrow down what's displayed.

1. Click the filter button in the Cloudinary panel toolbar.
2. Select the media type to display:
   • Images: Shows all image assets (JPEG, PNG, GIF, WebP, SVG, etc.)
   • Videos: Shows all video assets (MP4, WebM, MOV, etc.)
   • Raw files: Shows all other file types (PDFs, documents, audio files, etc.)

The tree view updates to show only assets matching your selected type. Filters apply to both the folder view and search results.

Copying asset information

The most common operation is copying asset identifiers for use in your code. The extension provides quick access to the information you need most.

Right-click (or Command-click on Mac) any asset to open the context menu with these options:

• Copy Public ID: Copies the asset's public ID to your clipboard. This is typically what you'll pass to Cloudinary SDKs or use in transformation URLs. The public ID includes the folder path (if any) but excludes the file extension.

Example: products/summer-collection/hero-image

• Copy Secure URL: Copies the asset's full HTTPS delivery URL to your clipboard.
• Copy Optimized URL: Copies the asset's full HTTPS optimized delivery URL to your clipboard. This is an optimized URL you can use in HTML or as an image source. The URL includes your cloud name with automatic format and quality optimization.

Uploading assets

Upload new assets directly to your Cloudinary account without leaving VS Code.

1. Click the Upload button in the Cloudinary panel toolbar or the "Upload Here" option on a folder.
2. The Cloudinary Upload Widget opens as well as a dropdown with a list of your upload presets and you can expand the settings to view the preset's options.
3. Select a file or URL and Upload to begin the upload process.
4. Once uploaded the assets will appear in the tree view.

Previewing assets

Preview images and videos directly within VS Code to verify they're the assets you need before referencing them in code.

1. Click on any image or video asset in the tree view or search results.
2. A preview panel opens showing the asset.
3. For videos, basic playback controls appear, allowing you to play and pause the video.

Previews load directly from Cloudinary's CDN.

Switching environments

If you work with multiple Cloudinary accounts or environments (such as development, staging, and production), you can easily switch between them.

1. Look at the VS Code status bar at the bottom of the window.
2. Find the Cloudinary environment indicator showing your current cloud name.

Example: my-dev-cloud

1. Click on the environment indicator.
2. Select a different environment from the dropdown list that appears.

The extension refreshes the asset tree to show assets from the newly selected environment. All operations (browsing, searching, uploading) now apply to the selected environment. Your environment selection persists across VS Code sessions, so you don't need to reselect it each time you open VS Code.

This is particularly useful when you need to: * Compare assets between environments * Upload test assets to development without affecting production * Verify that assets exist in production before referencing them in deployment-ready code * Work on multiple client projects with different Cloudinary accounts

Typical workflow

Here's how the extension integrates into a typical development session:

1. Start building an app that displays images or videos
2. Browse assets in the VS Code sidebar to see what's available
3. Copy public IDs directly into your code
4. Upload assets if needed without leaving your editor
5. Preview assets to verify they look correct
6. Switch environments to test against staging or production assets

All without opening a browser or switching contexts.

Current limitations

As a Beta release, the extension has some current limitations:

• Filtering is limited to media type (images, videos, raw files) only
• No drag-and-drop URL insertion directly into code editors
• Limited bulk operations (no multi-select for batch actions)
• Upload interface doesn't support drag-and-drop from external sources or paste from clipboard
• No in-editor transformation builder or advanced transformation preview

We're actively developing the extension and plan to address these limitations based on user feedback.

Feedback and contributions

The Cloudinary VS Code Extension is open source. We welcome your feedback and contributions:

• GitHub repository: cloudinary/cloudinary-vscode-extension
• Report issues: GitHub Issues
• Feature requests: Use GitHub Issues with the "enhancement" label
• Pull requests: Contributions are welcome

What's next

Future enhancements we're considering based on developer feedback:

• Direct URL insertion into code files with IntelliSense support
• Advanced transformation preview and editing
• Bulk asset operations (multi-select, batch tag management)
• Integration with popular framework tooling
• Asset metadata editing directly from VS Code
• Drag-and-drop upload from external sources
• Custom transformation templates

If these or other features would be valuable to your workflow, let us know through GitHub Issues.

Related resources