> ## 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 sample projects


[app-gallery-link]: https://app-gallery.cloudinary.com/gallery?tag=JavaScript

We've created some sample projects to get you started with integrating Cloudinary into your JavaScript application. 

> **TIP**: Check out our collection of [JavaScript code explorers](code_explorers) too!

## Photo Album

Adhering to JavaScript best practices, the [Photo Album app](https://github.com/cloudinary-devs/javascript-photo-album) demonstrates uploading and displaying images. See how to upload images to your product environment using the [Upload widget](upload_widget) and the [REST API](client_side_uploading#direct_call_to_the_api), automatically [tagging](tags) them as they're uploaded. Then see how each of the tagged images is transformed on the fly and displayed on the site.

This is the Photo Album app in action:

Here's an excerpt from the code showing the [HtmlImageLayer object](javascript_image_transformations#plugins) being used to deliver a [square thumbnail image](javascript_image_transformations#resizing_and_cropping), automatically focused on the most interesting part of the image, and automatically [optimized for format and quality](javascript_image_transformations#image_optimizations). The [placeholder plugin](javascript_image_transformations#image_placeholders) is used to load a low quality image initially until the full image is downloaded, preserving the layout.

album-page.js

```js
  createCldImage(publicId) {
    const myImage = new CloudinaryImage(publicId, {
      cloudName: import.meta.env.VITE_CLOUD_NAME,
    });
    myImage
      .resize(thumbnail().width(300).height(300).gravity(autoGravity()))
      .delivery(format('auto'))
      .delivery(quality('auto'));
    return myImage;
  }

  displayPhotos(photos) {
    if (photos && photos.length > 0) {
      photos.forEach((photo) => {
        const photoContainer = document.createElement('div');
        photoContainer.classList.add('lg:w-1/3', 'md:w-1/2', 'w-full', 'p-4');
        const img = document.createElement('img');
        img.classList.add('rounded-lg', 'shadow-lg');
        img.style.maxWidth = '100%';
        photoContainer.appendChild(img);
        new HtmlImageLayer(img, this.createCldImage(photo.public_id), [
          placeholder(),
        ]);
        photoGallery.appendChild(photoContainer);
      });
    } else {
      noPhotosMessage.style.display = 'block';
    }
  }
```

> **See the full code**:
>
> * [Explore the Photo Album app on GitHub](https://github.com/cloudinary-devs/javascript-photo-album).

## Image and video transformations

See all the [image](javascript_image_transformations) and [video](javascript_video_transformations) transformations that are shown in the JavaScript SDK guide.

This is the image and video transformations app in action:

Here's an excerpt from the code showing an image being [cropped](javascript_image_transformations#resizing_and_cropping) to 200 x 300 pixels, automatically focusing on the most interesting part of the image.

autoGravity.js

```js
import {Cloudinary} from "@cloudinary/url-gen";
import {fill} from "@cloudinary/url-gen/actions/resize";
import {autoGravity} from "@cloudinary/url-gen/qualifiers/gravity";

export default function getAutoGravityImage() {

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

    // Use the image with public ID, 'basketball_in_net'.
    const myImage = cld.image('basketball_in_net');

    // Apply the transformation.
    myImage.resize(fill().width(200).height(300).gravity(autoGravity()));

    return myImage;
}
```

> **See the full code**:
>
> * [Explore the image and video transformations app on GitHub](https://github.com/cloudinary-devs/cld-js-sdk-docs-examples).

> * [Open the code explorer](https://stackblitz.com/edit/github-jvzjjw?file=src%2Findex.js,src%2Fquickstart.js&initialpath=/index.html).

## JavaScript plugins

The Cloudinary JavaScript library provides plugins to render the media on your site in the optimal way and improve your user's experience.  This app demonstrates how to implement:

* [Image accessibility](javascript_image_transformations#image_accessibility) to make your images more accessible to your users with visual disabilities.
* [Responsive images](javascript_image_transformations#responsive_images) to resize your images automatically based on the viewport size.
* [Lazy loading](javascript_image_transformations#lazy_loading) to delay loading images if they are not yet visible on the screen.
* [Image placeholders](javascript_image_transformations#image_placeholders) to display a lightweight version of an image while the target image is downloading.

This is the JavaScript plugins app in action: 

Here's an excerpt from the code showing images being rendered with the different plugins.

index.js

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

import {
  lazyload,
  responsive,
  accessibility,
  placeholder,
  HtmlImageLayer
} from "@cloudinary/html";

// Render the images in an 'img' element.
const imgTag = document.createElement("img");
document.body.appendChild(imgTag);

const imgTag2 = document.createElement("img");
document.body.appendChild(imgTag2);

const imgTag3 = document.createElement("img");
document.body.appendChild(imgTag3);

const imgTag4 = document.createElement("img");
document.body.appendChild(imgTag4);

// Create your images
const myImage = new CloudinaryImage("docs/colored_pencils", {
  cloudName: "demo"
});

const myImage2 = new CloudinaryImage("docs/piechart", {
  cloudName: "demo"
});

const myImage3 = new CloudinaryImage("flowers", {
  cloudName: "demo"
});

const myImage4 = new CloudinaryImage("sample", {
  cloudName: "demo"
});

// Wire up Cloudinary to work with the elements and use the responsive and placeholder plugins
new HtmlImageLayer(imgTag, myImage, [
  responsive(),
  placeholder("predominant-color")
]);

// Use the responsive and colorblind plugins
new HtmlImageLayer(imgTag2, myImage2, [
  responsive(),
  accessibility("colorblind")
]);

// Use the lazyload and responsive plugins
new HtmlImageLayer(imgTag3, myImage3, [lazyload(), responsive()]);

// Use all four plugins
new HtmlImageLayer(imgTag4, myImage4, [
  lazyload(),
  responsive(),
  accessibility(),
  placeholder()
]);
```

> **See the full code**:
>
> * [Explore the JavaScript plugins app on GitHub](https://github.com/cloudinary-devs/cld-js-plugins).

> * [Open the code explorer](https://stackblitz.com/edit/github-gsbqy1?file=src%2Findex.js).

## App Gallery
The [Cloudinary app gallery][app-gallery-link] provides a variety of fully working apps that incorporate Cloudinary as part of the tech stack, built in various popular programming languages.

Each app in the gallery presents an overview of the functionality, a link to the open-source repo, and complete setup instructions, so that you can grab the code and easily build your own version.