All docs
V20.1
20.2 (CTP)
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.

Add DevExtreme to a jQuery Application

DevExtreme sources are scripts and stylesheets. You can get them from a Content Delivery Network (CDN) or download and use them locally.

CDN Files

Link DevExtreme scripts and stylesheets within the <head> tag on your index page. The order of the scripts and stylesheets is important. All CDN links are listed in the CDN article. Optionally, you can verify the files by adding SRI hashes to the links.

HTML
<head>
    <!-- ... -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <!-- DevExtreme themes -->
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.1.8/css/dx.light.css">

    <!-- DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.8/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.8/js/dx.web.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.8/js/dx.viz.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.8/js/dx.viz-web.js"></script> -->
</head>
<body class="dx-viewport">
    <!-- ... -->
</body>

Stylesheets in the code above apply the Generic Light theme. The dx-viewport class ensures that theme colors and typography settings are applied to all page elements (and not only to DevExtreme widgets). See Predefined Themes for information about other available themes.

Specific functionality requires additional libraries. For instance, client-side export in the PivotGrid widget requires the JSZip library; the same feature in the DataGrid widget also needs the ExcelJS and FileSaver libraries. Similarly, the HtmlEditor widget requires Quill.

Local Files

You can find all required files in the DevExtreme ZIP archive or in the DevExtreme folder (%ProgramFiles(x86)%\DevExpress 20.1\DevExtreme\Sources) if you used the Windows installer. Copy the Lib folder into the folder with your application. Then, link jQuery and DevExtreme stylesheets and scripts in the index page's <head> tag in the following order:

HTML
<head>
    <!-- ... -->
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

    <!-- DevExtreme themes -->
    <link rel="stylesheet" href="css/dx.common.css">
    <link rel="stylesheet" href="css/dx.light.css">

    <!-- DevExtreme library -->
    <script type="text/javascript" src="js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="js/dx.web.js"></script> -->
    <!-- <script type="text/javascript" src="js/dx.viz.js"></script> -->
    <!-- <script type="text/javascript" src="js/dx.viz-web.js"></script> -->
</head>
<body class="dx-viewport">
    <!-- ... -->
</body>

Stylesheets in the code above apply the Generic Light theme. The dx-viewport class ensures that theme colors and typography settings are applied to all page elements (and not only to DevExtreme widgets). See Predefined Themes for information about other available themes.

Specific functionality requires additional libraries. For instance, client-side exporting in PivotGrid widget requires the JSZip library; the same feature in the DataGrid widget also needs the ExcelJS and FileSaver libraries. Similarly, the HtmlEditor widget requires Quill.

See Also