High-performance image delivery and uploading at scale in Svelte powered by Cloudinary.
Features • Getting Started • Community & Support • Contributing
This is a community library supported by the Cloudinary Developer Experience team.
svelte-cloudinary
with:npm install svelte-cloudinary
VITE_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
<script>
import { CldImage } from 'svelte-cloudinary';
</script>
<CldImage width="600" height="600" src="https://github.com/cloudinary-community/svelte-cloudinary/raw/main/<Public ID or Cloudinary URL>" alt="<Alt Text>" />
Learn more about CldImage on the Svelte Cloudinary Docs
Please read CONTRIBUTING.md prior to contributing.
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
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.
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>"
Once installed and configured, open two terminal tabs, navigating one to svelte-cloudinary
and one to docs
, running the following command in each:
pnpm dev
The project will now be available at https://localhost:5173 or the configured local port.
All tests are located inside of svelte-cloudinary/svelte-cloudinary
each test lives along side the corresponding component.
While inside svelte-cloudinary
, run tests with:
pnpm test:unit
Thanks cupcakearmy for handing off the original svelte-cloudinary to allow us to continue on the work for the Svelte community!
Troy Ciesco 💡 |
Lih Haur Voon 💻 |
HeetVekariya 💻 |
Carlo Taleon 📖 |