Integrating Cloudinary with Svelte and SvelteKit

Svelte is a JavaScript-based web framework that gives developers powerful tools for building performance-first web applications. SvelteKit is a metaframework built by the Svelte team bringing full-stack functionality to Svelte serving as the recommended way to build applications with Svelte.

Adding Cloudinary to Svelte and SvelteKit apps is an easy way to complement Svelte with automatic optimization, media management like uploading, and transformations for building great experiences for the web.

Using Cloudinary with Svelte

There are several options for easily integrating Cloudinary with your Svelte or SvelteKit app.

Svelte Cloudinary

Svelte Cloudinary is a community-built solution for using Cloudinary in a Svelte project. It currently includes the CldImage component which allows you to easily drop your Cloudinary assets into an app with automatic optimization.

> Important: Community-developed libraries are developed, tested and maintained by the community. Bug fixes and feature requests should be submitted in the relevant repository.

The CldImage component wraps the Unpic Svelte Image component, giving a core set of image loading standards, extending it with the power of Cloudinary tech.

This includes features beyond automatic optimization like dynamic cropping and resizing, background removal, and image and text overlays.

For basic usage, first install the package with:

npm install svelte-cloudinary

Add your Cloudinary environment variables in `.env.local`:

VITE_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

And use the component in your project:

import { CldImage } from svelte-cloudinary';
<CldImage
  width="600"
  height="600"
  src="<Public ID>"
  alt=”<Description>”
/>

Learn more about all of the features at: https://svelte.cloudinary.dev/

Building Image & Video URLs with the Cloudinary JavaScript SDK

The JS URL Gen SDK allows developers to integrate with Cloudinary in any JavaScript-based applications.

You can use the JavaScript SDK to generate image and video URLs along with any transformations you want.

To get started, first install the JavaScript SDK with:

npm install @cloudinary/url-gen

Set up a new instance of Cloudinary with your cloud’s configuration:

import { Cloudinary } from '@cloudinary/url-gen';
const cld = new Cloudinary({
  cloud: {
    cloudName: '<Your Cloud Name>'
  }
}); 

Then use one of the available methods to generate your asset URL such as:

const myImage = cld.image('<Public ID>').format('auto').quality('auto').toURL().

Which will build an image URL that will use automatic optimization.

Learn more over on the Cloudinary Docs.

Uploading & Managing Media Assets with the Cloudinary Node.js SDK

When working in a SvelteKit application, you gain access to tools like Form Actions that allow you to work in a Node.js environment.

Inside Node, you can take advantage of the Cloudinary Node.js SDK to upload files and interact with other Cloudinary APIs like search and administration.

To get started, first install the Cloudinary Node.js SDK:

npm install cloudinary

Configure the package and your Cloudinary account:

const cloudinary = require('cloudinary').v2;
# or
import { v2 as cloudinary } from 'cloudinary';
cloudinary.config({
  cloud_name: '<Your Cloud Name>',
  api_key: '<Your API Key>', // Store in .env.local
  api_secret: '<Your API Secret'>, // Store in .env.local
  secure: true
});
const result = await cloudinary.uploader.upload('/path/to/image');

> Note: Avoid storing your credentials directly in the code to avoid compromising your account. Use environment variables instead to securely use your API key, API secret, and optionally your Cloud Name within your application.

Learn more over on the Cloudinary Docs.

More Resources

Learn more about how to use Cloudinary with Svelte:

• Svelte Code Examples