JavaScript quick start

This quick start is intended to let you quickly try using several common Cloudinary features. It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.

You can perform this quick start in a code sandbox or in a clean project in the dev environment of your choice.

You can also view the completed code of this quick start in a GitHub repo and code explorer.

In this quick start you'll learn how to start delivering your media from Cloudinary using the @cloudinary/url-gen package.

This quick start assumes you are using pure JavaScript with a bundler, however you can also use the @cloudinary/url-gen package together with one of the frontend-frameworks packages. For details, see:

• Angular SDK quick start
• React SDK quick start

Prerequisites

To perform the steps in this quick start, you'll need:

• A Cloudinary account. If you don't have one yet, you can quickly register for free.
• Your product environment credentials. You can find your credentials in the Dashboard page of your Cloudinary Console.
• A working JavaScript development environment with a supported version of JavaScript.

1. Set up and configure the SDK

Install the package

Install the @cloudinary/url-gen package using the NPM package manager:

npm i @cloudinary/url-gen

Configure Cloudinary

Create a basic JavaScript app, and in index.js copy and paste the following:

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

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

2. Transform and deliver an image

Copy and paste this import statement below the existing one:

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

Copy and paste the following code, under the configuration code:

// Instantiate a CloudinaryImage object for the image with the public ID, 'docs/models'.
const myImage = cld.image('docs/models'); 

// Resize to 250 x 250 pixels using the 'fill' crop mode.
myImage.resize(fill().width(250).height(250));

// Render the image in an 'img' element.
const imgElement = document.createElement('img');
document.body.appendChild(imgElement);
imgElement.src = myImage.toURL();

3. Run your code

Run the code to see the transformed image.

View the completed code

Here's the full example:

This code is also available in GitHub.