> ## 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 (video tutorial)

## Overview

Learn how to install and configure the [Cloudinary JavaScript SDK](javascript_integration). 

## 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.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### The Cloudinary JavaScript SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | The Cloudinary [JavaScript SDK](javascript_integration) provides image and video transformation, optimization and delivery capabilities that you can implement using code that integrates seamlessly with your existing JavaScript or JavaScript-based application.
|

### Install the JavaScript SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=19 :player=cld} | To install the JavaScript SDK, in a terminal run:
|

```
npm i @cloudinary/url-gen
```

### Import Cloudinary into your project
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=26 :player=cld} | To import Cloudinary into your project, use:
|

```js
// Import the Cloudinary class.
import {Cloudinary} from "@cloudinary/url-gen";
```

### Configure Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=34 :player=cld} | To configure the SDK for your product environment, replace `demo` in this example with your cloud name, which can be found in your Cloudinary [Dashboard](https://console.cloudinary.com/app/home/dashboard/):
|

```js
// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
});
```

### Add an image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=46 :player=cld} | Add an image to your site using `cld.image()`, and apply [transformations](image_transformations) such as [auto format](image_optimization#automatic_format_selection_f_auto) and [auto quality](image_optimization#automatic_quality_selection_q_auto). Replace the public ID in the example code with the [public ID](cloudinary_glossary#public_id) of one of the images in your product environment, which you can find in the [Media Library](https://console.cloudinary.com/console/media_library/search):
|

```js
<img src={cld.image('examples/astronaut_j2ig0e').format('auto').quality('auto').toUrl()}>;
```

## Keep learning

> **READING**:
>
> * 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.

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

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

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

  
  
  
    Named Transformations
    Simplify & standardize complex delivery URLs 
  

&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;