DevExtreme jQuery/JS - 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.2.12/css/dx.common.css">
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.light.css">

    <!-- DevExtreme library -->
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.all.js"></script>
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.web.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.viz.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 UI components). See Predefined Themes for information about other available themes.

Specific functionality requires additional libraries. For instance, client-side export in the PivotGrid and DataGrid UI components requires the ExcelJS and FileSaver libraries. Similarly, the HtmlEditor UI component requires the DevExtreme Quill.

Local Files

You can find all required files in the DevExtreme ZIP archive or in the DevExtreme folder (%ProgramFiles(x86)%\DevExpress 20.2\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> -->
</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 UI components). See Predefined Themes for information about other available themes.

Specific functionality requires additional libraries. For instance, client-side export in the PivotGrid and DataGrid UI components requires the ExcelJS and FileSaver libraries. Similarly, the HtmlEditor UI component requires the DevExtreme Quill.

See Also