This quick start lets you get an end-to-end implementation up and running using the JavaScript SDK in 5 minutes or less.
This quick start walks you through Cloudinary setup step by step, which is great for learning the JavaScript SDK hands-on. To have your AI coding assistant handle setup for you instead, use the
Get Started prompt.
Install the @cloudinary/url-gen package using the NPM package manager:
If you prefer not to use a bundler, you can import the SDK directly from a CDN. See
CDN import for details.
Create a basic JavaScript app, and in index.js copy and paste the following:
If you changed the cloud name in the previous step to your own, you need to use an image that's stored in your Cloudinary product environment for the next steps. All new accounts come with sample images, so you can use one of those, or, if you want to use the same image as us, save this image locally, then upload it to Cloudinary.
For convenience, the instruction below shows you how to manually upload files in the Cloudinary console UI, but as a developer, you'll probably be interested in uploading files programmatically. There are several ways to do this in client-side only applications, as explained in
JavaScript SDK image and video upload or you can use the
CLI.
For the purposes of this quick start, the quickest way to upload a single image is as follows:
- Log into your Cloudinary Console.
- Select Media Library from the left panel.
- Click Upload to open the Upload Widget, then click Advanced and type "docs/models" into the public ID field.
- Click Browse to find the image to upload. Once uploaded, you can see the image in the listed assets (set Creation date to Today in the Search to find it quickly).
In the next step, you'll need the public ID of whichever image you use (in our case, we set the public ID on upload to docs/models). If using one of the sample images, double click the asset to open the Manage page, navigate to the Summary tab, and copy the Public ID:
If your product environment uses the legacy
fixed folder mode, you won't see the public ID at the bottom of the
Summary tab. Instead, it's located at the top left corner of the Manage page.
Copy and paste this import statement below the existing one:
Copy and paste the following code, under the configuration code:
If you're using an image with a public ID other than
docs/models, make sure to update your code with the public ID of the image you're delivering.
Run the code to see the transformed image.
Here's the full example:
Fork the repo and try it yourself
This code is also available in GitHub.
- Enjoy interactive learning? Check out more sample apps!
- Understand the architecture of the JavaScript SDK and get a more detailed overview of the libraries.
- Find out more about transforming images using
@cloudinary/url-gen.
- Learn about transforming videos using
@cloudinary/url-gen.
- Discover ways to improve load times and make your images responsive and accessible using plugins.
