Installing Svelte Cloudinary

To install Svelte Cloudinary, you can use your favorite package manager including npm, pnpm or yarn:


Next, you need to setup the environment variable. Insert the following variable into your .env.local or .env file:

Don't have a Cloudinary account? Sign up for free on!

Using Svelte Cloudinary

Check out our comprehensive guides on how to use the Svelte Cloudinary library. Whether you’re rendering images, generating social media cards, or looking to leverage our built-in upload UI, we’ve got you covered:

  • CldImage: Optimize and transform images including dynamic cropping and resizing and background removal.
  • CldOgImage: Create and add dynamically generated, custom Social Media cards to your site.
  • CldUploadButton: Drop in a button that allows your visitors to upload files.
  • CldUploadWidget: Gain full control of how you build your UI for uploading files.
  • CldVideoPlayer: Add videos with optimization and transformations using the Cloudinary Video Player.

Or use the helper methods to generate URLs:

  • getCldImageUrl: Create an optimized Cloudinary URL with whatever trasnformations using the same API as CldImage.
  • getCldOgImageUrl: Generate a custom social media card URL with the same API as CldOgImage.

MIT 2023 ©