Introducing the Cloudinary VS Code Extension: Manage Your Media Development Flow Without Leaving Your IDE!

Context switching kills productivity. You’re deep in code when you need to upload an image, grab a URL for a video, or find an asset in your Cloudinary account. Browser tabs pile up, you lose your place, and what should be a 30-second task becomes a five-minute detour.

The Cloudinary VS Code Extension solves this.

Our new VS Code extension (Beta) brings essential Cloudinary operations directly into your editor. Find and preview assets, copy URLs, upload files, or switch environments, all from inside VS Code. No more jumping between your IDE and browser just to work with media assets. Just code and media, in one place.

See it in action…

Theory is nice, but here’s what it actually looks like when you’re building:

1. Start coding with media assets. You need specific images or videos, but you’re not sure what’s already available in your account.
2. Open the Cloudinary extension and browse through your folders, the same structure you see in the Console, now right in your editor. Find the assets you need organized exactly as expected.
3. Preview assets before committing your code. Click any image or video to verify it’s the right one and see how it looks with Cloudinary’s optimizations applied.
4. Right-click any asset and copy its public ID or optimized URL. Paste it directly into your code, whether you’re using image/video tags or Cloudinary SDKs. No manual URL construction, no switching to your browser to hunt for assets.
5. Upload new assets when you need something that doesn’t exist yet. Click Upload, select your preset, and add your files. They appear in the tree view immediately, ready to reference.

All without leaving your IDE. No browser tabs. No breaking your focus. Just seamless media workflow integrated into your development process.

The extension complements other Cloudinary developer tools:

• MCP servers. Use the extension for visual asset browsing while the Cloudinary MCP servers can handle more programmatic operations, e.g., adding tags or metadata to specific asset sets.
• SDKs. The extension helps you discover and reference assets that your SDK code will process, you can find your public IDs from the extension to pass to your SDK image building functions.

1. Install from the VS Code Marketplace.
2. Configure your credentials using an environments.json file.
3. Start browsing assets from the VS Code sidebar.

The extension reads credentials from a simple JSON file, supporting both global and workspace-specific configurations:

{
  "your-cloud-name": {
    "apiKey": "your-api-key",
    "apiSecret": "your-api-secret",
    "uploadPreset": "your-upload-preset"
  }
}
Code language: JSON / JSON with Comments (json)

Global config goes in ~/.cloudinary/environments.json. Workspace-specific config goes in .cloudinary/environments.json at your project root.

You can find your credentials for your product environment in the API keys section of the Cloudinary Console settings.

For the upload preset, this will be the default preset used for uploads and you can find a list of your presets in the Upload Presets section of the Cloudinary Console settings

• Asset Explorer. Browse your entire Cloudinary Media Library through a VS Code tree view. Navigate folders and locate files without opening a browser. The folder structure matches your Cloudinary console exactly.

• Search and Filtering. Search assets by public ID or filter by media type (images, videos, raw files). Results appear instantly in the sidebar.

• Quick Actions. Right-click any asset to copy its public ID or secure URL. No more manual URL construction or copy-pasting from the browser.

• Direct Upload. Upload files directly to your Cloudinary account from within VS Code. Choose upload presets, target specific folders, and handle the upload without switching contexts.

• Asset Preview. Preview images and videos with Cloudinary’s automatic optimizations applied (f_auto, q_auto). See how assets will actually look to your users.

• Environment Management. Switch between multiple Cloudinary environments (staging, production, different projects) via the status bar. Credentials are managed through local configuration files.

We’re actively developing based on feedback. Potential future features include:

• Bug fixes.
• Advanced transformation previews.
• Bulk asset operations.
• An integration with popular framework tooling.

The extension is open source. If you find bugs, need features, or want to contribute, check out our GitHub repository, report issues, or create a pull request.

Reduce the friction between your code and your media assets. Install the extension and see if it fits your workflow. It’s great if you’re frequently referencing or uploading lots of assets during development.

Links:

• VS Code Extension
• GitHub Repository
• Cloudinary Documentation
• Other Developer Tools