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

# JavaScript SDK (Legacy)


> **INFO**:
>
> This is the **legacy** version of the JavaScript SDK (`cloudinary-core` v2.x).
> For details on migrating to the [current version](javascript_integration) of the SDK (`js-url-gen` v1.x), see the [JavaScript SDK migration guide](javascript1_migration_guide).

## Overview
Cloudinary's JavaScript SDK provides simple, yet comprehensive image and video upload, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing JavaScript application.

You might also want to know...

* If you're brand new to Cloudinary, you may want to start with the [Developer Kickstart](dev_kickstart) for a hands-on, step-by-step introduction to Cloudinary features. 
* You may also find our [Glossary](cloudinary_glossary) helpful to understand Cloudinary-specific terminology.
* Keep in mind that this guide focuses on how to set up and implement popular Cloudinary capabilities using the JavaScript SDK, but it doesn't cover every feature or option. The complete documentation for all Cloudinary features including sample code for each SDK can be found in our [Guides](programmable_media_guides) and [References](cloudinary_references).

> **READING**: :no-title  

**This guide relates to the latest released version of the JavaScript [cloudinary-core v2.x](https://github.com/cloudinary/cloudinary_js) library.**

For details on all new features and fixes from previous minor versions, see the [CHANGELOG](https://github.com/cloudinary/cloudinary_js/blob/master/CHANGELOG.md).

 
> **NOTE**: This guide describes Cloudinary's JavaScript `cloudinary-core` frontend library. For the backend Node.js library, see the [Node.js documentation](node_integration).

 
### Quick example   
 
Take a look at the following transformation code and the image it delivers:

![sample transformation](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png "secure: true, disable_all_tab: true, with_url: false, frameworks:js")

```js
cloudinary.imageTag('front_face.png', {transformation: [
  {gravity: "face", height: 150, width: 150, crop: "thumb"},
  {radius: 20},
  {effect: "sepia"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon")},
  {effect: "brightness:90"},
  {opacity: 60},
  {width: 50, crop: "scale"},
  {flags: "layer_apply", gravity: "south_east", x: 5, y: 5},
  {angle: 10}
  ]}).toHtml();
```

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:

* **Crop** to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
* **Round the corners** with a 20 pixel radius
* Apply a **sepia effect**
* **Overlay the Cloudinary logo** on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
* **Rotate** the resulting image (including the overlay) by 10 degrees
* **Convert** and deliver the image in PNG format (the originally uploaded image was a JPG)

And here's the URL that would be included in the image tag that's automatically generated from the above code:

![sample transformation](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png "secure: true, disable_all_tab: true, with_code:false, with_image:false")

In a similar way, you can [transform a video](javascript1_video_manipulation#video_transformation_examples).

> **Learn more about transformations**:
>
> * See all possible transformations in the [Transformation URL API reference](transformation_reference).

> * See more examples of [image](javascript1_image_manipulation) and [video](javascript1_video_manipulation) transformations using the `cloudinary-core v2.x` library.
  
### JavaScript SDK features
 
* Build URLs for [image](javascript1_image_manipulation#deliver_and_transform_images) and [video](javascript1_video_manipulation) transformation
* JavaScript view [helper tags](javascript1_image_manipulation#the_imagetag_method) for embedding and transforming images, and more

 
## Get started 

This section describes the information you need to know for installing and setting up JavaScript.

### Installation
 
Install the files using the NPM package manager: 
 
``` 
npm install cloudinary-core
```

> **NOTE**: Instead of installing the files, the latest minor version of the `cloudinary-core` library can also be directly referenced from `https://unpkg.com/cloudinary-core@latest`. For production use, we recommend that you use a specific version, and not the latest, to protect yourself from any breaking changes.

### Setup

#### 1. Instantiate the cloudinary-core library
 
If you installed the files with NPM, instantiate a new variable with the cloudinary-core library within your code.
 
```js
var cloudinary = require("cloudinary-core"); // If your code is for ES5
import {Cloudinary} from "cloudinary-core";    // If your code is for ES6 or higher
```

Or, if using ES6 or higher without a bundler, for example, in a script:

```js
import cld from "cloudinary-core";
const {Cloudinary} = cld;
```
 
Otherwise, you can include the files in your HTML page. For example:
 
```html
<script src="/lodash/lodash.js" type="text/javascript"></script>
<script src="/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
```

#### 2. Set Cloudinary configuration parameters
 
To use the Cloudinary `cloudinary-core` library you have to configure at least your product environment `cloud_name`. You can additionally define a number of optional [configuration parameters](cloudinary_sdks#configuration_parameters) if relevant. You can find your **Cloud name** in the [Dashboard](https://console.cloudinary.com/app/home/dashboard) of the Cloudinary Console, and you can find all of your credentials, including **API Key** and **API Secret**, on the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings.
> **NOTES**:
>
> * Most functionality implemented on the client side doesn't require authentication, so only your `cloud_name` is _required_ to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use [signed uploads](upload_images#authenticated_requests) or [generate delivery signatures](delivery_url_signatures), you'll also need server-side code, for which you can use one of our [backend SDKs](cloudinary_sdks#cloudinary_sdks).* For backward compatibility reasons, the default value of the optional `secure` configuration parameter is `false`. However, for most modern applications, it's recommended to configure the `secure` parameter to `true` to ensure that your transformation URLs are always generated as HTTPS.
 
You set configuration parameters while instantiating a new Cloudinary class, for example:
 

* If using `import {Cloudinary} from "cloudinary-core";`:

  ```js
  var cl = new Cloudinary({cloud_name: "demo", secure: true});
  ```

* If using `var cloudinary = require("cloudinary-core");` or `<script src="/cloudinary-core/cloudinary-core.js"...`:

  ```js
  var cl = new cloudinary.Cloudinary({cloud_name: "demo", secure: true});
  ```

### JavaScript capitalization and data type guidelines

When using the `cloudinary-core` library, keep these guidelines in mind: 

* Parameter names: `snake_case`. For example: **public_id**
* Classes: `PascalCase`. For example: **ImageTag**
* Methods: `camelCase`. For example: **toHTML**
* Pass parameter data as: `Object`

> **READING**:
>
> * [JavaScript image and video upload](javascript1_image_and_video_upload)

> * [JavaScript image transformations](javascript1_image_manipulation)

> * [JavaScript video transformations](javascript1_video_manipulation)