Svelte Cloudinary

High-performance image delivery and uploading at scale in Svelte powered by Cloudinary.

Features • Getting Started • Community & Support • Contributing

This plugin is a community library and not officially supported by Cloudinary.

✨ Features

Automatically optimize images and deliver in modern formats
Remove backgrounds from images
Dynamically add image and text overlays to images
AI-based cropping and resizing
Transform images using color and effects
Generate Open Graph Social Media cards on the fly
...all at scale with Cloudinary

🚀 Getting Started

Installation

Install svelte-cloudinary with:

npm install svelte-cloudinary

Add an environment variable with your Cloud Name:

VITE_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

Adding an Image

<script>
import { CldImage } from 'svelte-cloudinary';
</script>

<CldImage width="600" height="600" src="<Public ID or Cloudinary URL>" alt="<Alt Text>" />

Learn more about CldImage on the Svelte Cloudinary Docs

❤️ Community & Support

🛠 Contributing

Please read CONTRIBUTING.md prior to contributing.

Working Locally

Installation

This project is currently using pnpm as a way to manage dependencies and workspaces.

With the project cloned, install the dependencies from the root of the project with:

pnpm install

Configuration

To work on the project, you need to have an active Cloudinary account. With the account, configure a .env.local file inside of docs with:

VITE_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
VITE_PUBLIC_CLOUDINARY_API_KEY="<Your Cloudinary API Key>"
CLOUDINARY_API_SECRET="<Your Cloudinary API Secret>"

# The following are used for the internal playground not the library
PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET="<Your unsigned preset>"
PUBLIC_CLOUDINARY_SIGNED_UPLOAD_PRESET="<Your signed preset>"

Note: The Cloudinary account can be free, but some features may not work beyond free tier like Background Removal

The Cloud Name is required for all usage, where the API Key and Secret currently is only used for Upload Widget usage. The Upload Preset is additionally used for the Upload Widgets.

Uploading Example Images

In order to run the Docs project, you need to have the images referenced available inside of your Cloudinary account.

To do this, navigate to the scripts directory and first create a new .env file with:

CLOUDINARY_CLOUD_NAME="<Your Cloudinary Cloud Name>"
CLOUDINARY_API_KEY="<Your API Key>"
CLOUDINARY_API_SECRET="<Your API Secret>"

Then run the upload script with:

pnpm upload

By default, the images inside of scripts/images.json will be uploaded to the "images" directory inside of your Cloudinary account. To change the location, add the VITE_CLOUDINARY_IMAGES_DIRECTORY environment variable with your preferred directory:

VITE_CLOUDINARY_IMAGES_DIRECTORY="<Your Directory>"

Running the Project

Once installed and configured, open two terminal tabs, navigating one to svelte-cloudinary and one to docs, running the following command in each: