JavaScript SDK v2 quickstart guide

In this quickstart guide you'll learn how to start delivering your media from Cloudinary using JavaScript, and optionally, a frontend framework.

  • The JavaScript SDK v2 is comprised of:
  • You can either use the cloudinary-js-base library by itself, or together with one of the frontend-framework libraries (see the relevant tabs in the instructions below).
  • To get a more in-depth understanding of the libraries, you may want to start from the JavaScript SDK v2 overview.

Install packages

Install the required packages using the NPM package manager:

JS:
Copy to clipboard
npm install --save @cloudinary/base
React:
Copy to clipboard
npm install --save @cloudinary/base
npm install --save @cloudinary/react
Angular:
Copy to clipboard
npm install --save @cloudinary/base
npm install --save @cloudinary/angular

Add Cloudinary to your code

1. Import classes

JS:
Copy to clipboard
// Import the Cloudinary class.
import {Cloudinary} from "@cloudinary/base";

// Import any actions required for transformations.
import {fill} from "@cloudinary/base/actions/resize";
React:
Copy to clipboard
// Import React classes.
import React, {Component} from 'react'

// Import the AdvancedImage component. 
import {AdvancedImage} from '@cloudinary/react';

// Import the Cloudinary class.
import {Cloudinary} from "@cloudinary/base";

// Import any actions required for transformations.
import {fill} from "@cloudinary/base/actions/resize";
Angular:
Copy to clipboard
// In your app.module.ts:

// Import the CloudinaryModule.
import {CloudinaryModule} from '@cloudinary/angular';

imports: [
  ...,
  CloudinaryModule,
],
...

// In your component.ts: 

// Import the Cloudinary class.
import {Cloudinary} from "@cloudinary/base";

// Import any actions required for transformations.
import {fill} from "@cloudinary/base/actions/resize";

2. Set your cloud name

JS:
Copy to clipboard
// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
});
React:
Copy to clipboard
// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
});
Angular:
Copy to clipboard
// Create a Cloudinary instance and set your cloud name.
const cld = new Cloudinary({
  cloud: {
    cloudName: 'demo'
  }
});

3. Get your image

JS:
Copy to clipboard
// Instantiate a CloudinaryImage object for the image with the public ID, 'sample'.
const myImage = cld.image('sample');
React:
Copy to clipboard
// Instantiate a CloudinaryImage object for the image with the public ID, 'sample'.
const myImage = cld.image('sample');
Angular:
Copy to clipboard
// Instantiate a CloudinaryImage object for the image with the public ID, 'sample'.
img = cld.image('sample');

4. Transform your image

JS:
Copy to clipboard
// Resize to 250 x 250 pixels using the 'fill' crop mode.
myImage.resize(fill().width(250).height(250));
React:
Copy to clipboard
// Resize to 250 x 250 pixels using the 'fill' crop mode.
myImage.resize(fill().width(250).height(250));
Angular:
Copy to clipboard
// Resize to 250 x 250 pixels using the 'fill' crop mode.
img.resize(fill().width(250).height(250));

5. Deliver your image

JS:
Copy to clipboard
// Render the image in an 'img' element.
const imgElement = document.createElement('img');
imgElement.src = myImage.toURL();
React:
Copy to clipboard
// Render the image in a React component.
<AdvancedImage cldImg={myImage} />
Angular:
Copy to clipboard
// In your view, render the image in an Angular component.
<advanced-image [cldImg]="img"></advanced-image>

6. See the result!

Transformed sample image

Ready to learn more?

  • See some complete code examples in our sample projects.
  • Understand the architecture of the JavaScript SDK v2 and get a more detailed overview of the libraries.
  • Find out more about transforming images using cloudinary-js-base.
  • Learn about transforming videos using cloudinary-js-base.
  • Discover ways to improve load times and make your images responsive and accessible using plugins in React and Angular.

✔️ Feedback sent!

Rate this page: