> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure the Javascript SDK in Svelte (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/sveltekit-transformations-effects

## Overview

Learn how to install and configure the [Cloudinary Javascript SDK](javascript_integration) using the [Svelte](https://svelte.cloudinary.dev/) community-developed library. 

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Introduction
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | With the [Cloudinary Javascript SDK](javascript_integration), you can easily access, transform and optimize your media assets directly in your SvelteKit application.
|

### Install the dependency
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=12 :player=cld} | First, install the corresponding dependency, `@cloudinary/url-gen`:
|

```javascript
install @cloudinary/url-gen
```

### Run the SvelteKit application
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=20 :player=cld} | Launch the sample SvelteKit application with the following command:
|

```javascript
npm run dev
```

### Import the Cloudinary package
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=28 :player=cld} | On the SvelteKit page, import the Cloudinary package:
|

```javascript
import { Cloudinary } from '@cloudinary/url-gen';
```

### Configure Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=33 :player=cld} | You can configure Cloudinary by passing your cloud name, accessible from your Cloudinary [Dashboard](https://console.cloudinary.com/app/home/dashboard). This configuration will generate an object that allows you to access the various methods from the library. Remember to replace `tutorials` in this example with your own cloud name:
|

```javascript
const cld = new Cloudinary({
    cloud: {
        cloudName: 'tutorials'
    }
})
```

### Add an image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=48 :player=cld} | Create a variable to store the image reference. Use the `image` method, which accepts the asset's public ID (the identifier of a Cloudinary image) as its parameter. You can view this sample image of a sneaker with public ID `cld-sample-5` inside your Media Library.
|

```javascript
const myImage = cld.image("cld-sample-5")
```

### Optimize the image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=08 :player=cld} | Configure your image to be automatically delivered in the best format for the requesting browser and optimized for compression, resulting in the smallest file size while maintaining visual quality.
|

```javascript
myImage.format("auto").quality("auto")
```

### Render the image 
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=19 :player=cld} | Use a simple image tag with the `image.toURL()` method, placing the image's delivery URL in the `src` attribute of the image tag. Verify the delivery URL through Developer Tools to ensure Cloudinary delivers the image with the `f_auto` and `q_auto` qualifiers. |

```javascript
<img src={myImage.toURL()} alt="from cloudinary" width={300}">
```

## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Follow the [Javascript SDK quick start](javascript_quick_start) to get up and running in five minutes.

> * Learn how to transform your [images](javascript_image_transformations) and [videos](javascript_video_transformations) using the JavaScript SDK.

> * Explore Cloudinary's [Svelte](https://svelte.cloudinary.dev/) community-developed library.

> * Learn how to [transform](transformation_basics_tutorial) and [optimize](optimization_tips_tutorial) your assets.

> * Delve into some more advanced transformation features, such as adding [complex transformations](complex_transformations_tutorial) and the [Zoompan effect](zoompan_effect_tutorial).

#### If you like this, you might also like...

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

  
  
  
    Named Transformations
    Simplify & standardize complex delivery URLs 
  

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

&nbsp;

&nbsp;Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.
&nbsp;