1.0.0-beta.11 • Public • Published

    Cloudinary Frontend Frameworks

    About this project

    This project contains SDKs designed to work with Cloudinary base These SDKs will render CloudinaryImage or CloudinaryVideo object into the DOM.

    Packages contained within this project:

    • The React SDK used to render an image & video component. NPM | {@link ReactSDK|Reference}
    • The Angular SDK used to render an image & video component. NPM | {@link AngularSDK|Reference}

    Each SDK also contains advanced features in the form of plugins, which extend the native HTMLImage and HTMLVideo elements.

    • {@link accessibility|accessibility} - Used to make your images more accessible to your users with visual disabilities.
    • {@link lazyload|lazyload} - Used to delay loading images if they are not yet visible on the screen.
    • {@link placeholder|placeholder} - Used to display a lightweight version of an image while the target image is downloading.
    • {@link responsive|responsive} - Used to resize your images automatically based on the viewport size.


    To get started, install the npm client package of your choice along with our base package. For example, to use Cloudinary in a React environment, the following packages should be installed:

    npm i @cloudinary/react @cloudinary/url-gen

    Note: To use Angular install @cloudinary/angular

    For more information on our supported frameworks, navigate to the frameworks tab.

    Simple usage

    The following is a simple example using React. For more information on React and other frameworks, navigate to the frameworks tab.

    // Import the cloudinary class, and the plugins you want to use
    // In this case, we import a Cloudinary image type and accessibility and responsive.
    import React, { Component } from 'react'
    import {Cloudinary} from "@cloudinary/url-gen";
    import { AdvancedImage, accessibility, responsive } from '@cloudinary/react';
    // Once per project/app - configure your instance,
    // See the documentation in @cloudinary/url-gen for more information 
    const myCld = new Cloudinary({ cloudName: 'demo'});
    // render your component
     const App = () => {
        // Create your image
        // This creates a new image object
        let img = myCld().image('sample');
        return (
                <AdvancedImage cldImg={img} plugins={[responsive(), accessibility()]}/>

    Plugin Order

    We recommended the following order when using our plugins to achieve the best results.

    <AdvancedImage plugins={[lazyload(),responsive(), accessibility(), placeholder()]}/>

    You can omit any plugin, but the order from above should remain.




    npm i @cloudinary/react

    DownloadsWeekly Downloads






    Unpacked Size

    96 kB

    Total Files


    Last publish


    • cloudinary