CDN

The CDN links are provided individually for all the scripts and style sheets of Syncfusion Essential JS components.

External dependency libraries

The basic syntax follows below,

http://cdn.syncfusion.com/js/assets/external/[fileName]

Example: http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js

NOTE

The first three script libraries listed below are mandatory to render any of the Syncfusion Essential JS widgets.

Name Details CDN link
jQuery 1.10.2 Common jQuery script to render any of the Syncfusion widgets Secured Link: https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js
jQuery.easing Supports animation Secured Link: https://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js
JsRender Supports template rendering Secured Link: https://cdn.syncfusion.com/js/assets/external/jsrender.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/jsrender.min.js
AngularJS Minified AngularJS file to support custom directives. Secured Link: https://cdn.syncfusion.com/js/assets/external/angular.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/angular.min.js
excanvas To support canvas element rendering in IE8 browser Secured Link: https://cdn.syncfusion.com/js/assets/external/excanvas.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/excanvas.min.js
KnockoutJS Minified KnockoutJS file to support the observable binding. Secured Link: https://cdn.syncfusion.com/js/assets/external/knockout.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/knockout.min.js
RequireJS Supports loading of required dependencies Secured Link: https://cdn.syncfusion.com/js/assets/external/require.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/require.min.js
jQuery.validate Supports client-side validation Secured Link: https://cdn.syncfusion.com/js/assets/external/jquery.validate.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/jquery.validate.min.js
jQuery.validate.unobtrusive To enable unobtrusive validation options in data-* attributes Secured Link: https://cdn.syncfusion.com/js/assets/external/jquery.validate.unobtrusive.min.js
Unsecured Link: http://cdn.syncfusion.com/js/assets/external/jquery.validate.unobtrusive.min.js

Syncfusion Dependency Libraries - Based on latest build version

The CDN script files are maintained for each version of the Essential Studio individually. Refer the following syntax:

http://cdn.syncfusion.com/[version]/js/web/[fileName]

Example, to access the ej.web.all.min.js file in 17.1.0.38 version – http://cdn.syncfusion.com/17.1.0.38/js/web/ej.web.all.min.js

Name Details CDN link
ej.web.all.min Combined script file which includes the script of all the Syncfusion UI web widgets. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/ej.web.all.min.js
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/ej.web.all.min.js 
ej.webform.min supports server-side event functionalities in ASP.NET controls Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/common/ej.webform.min.js
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/common/ej.webform.min.js
ej.unobtrusive.min Supports Syncfusion widgets to render in HTML5 format. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/common/ej.unobtrusive.min.js
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/common/ej.unobtrusive.min.js
ej.widget.angular.min Provides support for AngularJS Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/common/ej.widget.angular.min.js
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/common/ej.widget.angular.min.js
ej.widget.ko.min Provides support for KnockoutJS Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/common/ej.widget.ko.min.js
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/common/ej.widget.ko.min.js

The KnockoutJS and AngularJS dependencies can be accessed through the following syntax,

http://cdn.syncfusion.com/[version]/js/common/[fileName]

Example, to access the ej.widget.angular.min.js file in 17.1.0.38 version – http://cdn.syncfusion.com/17.1.0.38/js/common/ej.widget.angular.min.js

The CDN links for all the CSS files are provided in the below table. Refer the following syntax:

http://cdn.syncfusion.com/[version]/js/web/[fileName] – Core

http://cdn.syncfusion.com/[version]/js/web/[theme-name]/[fileName] – Theme related

Name Details CDN link
Flat-Azure (default theme) Includes the CSS properties defined for all the widgets in flat-azure theme. (Default-theme) Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.web.all.min.css
Flat-Azure Dark Includes the CSS properties defined for all the widgets in flat-azure dark theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure-dark/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure-dark/ej.web.all.min.css
Flat-lime Includes the CSS properties defined for all the widgets in flat-lime theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/flat-lime/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/flat-lime/ej.web.all.min.css
Flat-lime Dark Includes the CSS properties defined for all the widgets in flat-lime dark theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/flat-lime-dark/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/flat-lime-dark/ej.web.all.min.css
Flat-Saffron Includes the CSS properties defined for all the widgets in flat-saffron theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/flat-saffron/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/flat-saffron/ej.web.all.min.css
Flat-Saffron Dark Includes the CSS properties defined for all the widgets in flat-saffron dark theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/flat-saffron-dark/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/flat-saffron-dark/ej.web.all.min.css
Gradient-Azure Includes the CSS properties defined for all the widgets in gradient-azure theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/gradient-azure/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/gradient-azure/ej.web.all.min.css  
Gradient-Azure Dark Includes the CSS properties defined for all the widgets in gradient-azure dark theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/gradient-azure-dark/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/gradient-azure-dark/ej.web.all.min.css
Gradient-lime Includes the CSS properties defined for all the widgets in gradient-lime theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/gradient-lime/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/gradient-lime/ej.web.all.min.css
Gradient-lime Dark Includes the CSS properties defined for all the widgets in gradient-lime dark theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/gradient-lime-dark/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/gradient-lime-dark/ej.web.all.min.css
Gradient-Saffron Includes the CSS properties defined for all the widgets in gradient-saffron theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/gradient-saffron/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/gradient-saffron/ej.web.all.min.css
Gradient-Saffron Dark Includes the CSS properties defined for all the widgets in gradient-saffron dark theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/gradient-saffron-dark/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/gradient-saffron-dark/ej.web.all.min.css
Bootstrap-theme Includes the CSS properties defined for all the widgets in bootstrap theme. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/bootstrap-theme/ej.web.all.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/bootstrap-theme/ej.web.all.min.css
ej.responsive.css To make the widget responsive, it is necessary to refer this CSS file. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/responsive-css/ej.responsive.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/responsive-css/ej.responsive.css

Below table provides the links for the Flat-Azure and Flat-Azure Dark themes . Likewise, you can refer for any of the 13 available themes just by referring the required ej.theme.min.css available under each of the theme folders along with the widget core file.

Name Details CDN link
Flat-Azure Here, the widget core file (ej.widget.core.min.css) is common and the theme file ej.theme.min.css is uniquely available under the flat-azure theme folder. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/ej.widgets.core.min.css

https://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.theme.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/ej.widgets.core.min.css

http://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.theme.min.css
Flat-Azure Dark Here, the widget core file (ej.widget.core.min.css) is common and the theme file ej.theme.min.css is uniquely available under the flat-azure-dark theme folder. Secured Link: https://cdn.syncfusion.com/17.1.0.38/js/web/ej.widgets.core.min.css

https://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure-dark/ej.theme.min.css
Unsecured Link: http://cdn.syncfusion.com/17.1.0.38/js/web/ej.widgets.core.min.css

http://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure-dark/ej.theme.min.css

NOTE

All the provided CDN links can be accessed either through http or https.

Refer local Scripts and CSS, when CDN fails

One of the major risk with CDN links is that – sometimes it may go down due to the network or connection problems. On such scenarios, we can refer the local scripts and CSS files dynamically in the application by checking if the scripts and CSS files loaded through CDN returns undefined as depicted below,

  • html
  • <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>My first HTML page</title>
        // CDN LINK references
        <link href="http://cdn.syncfusion.com/17.1.0.38/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
        <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
        <script src="http://cdn.syncfusion.com/17.1.0.38/js/web/ej.web.all.min.js"></script>
        <script type="text/javascript">
    
            if (typeof jQuery == "undefined") { // If CDN fails, jQuery returns undefined
                // Referring local scripts - Specify the path where the below files are located in your machine
                document.write(decodeURIComponent('%3Cscript src="Scripts/jquery-1.10.2.min.js" %3E%3C/script%3E'));
                document.write(decodeURIComponent('%3Cscript src="Scripts/jquery.easing.1.3.min.js" %3E%3C/script%3E'));
                document.write(decodeURIComponent('%3Cscript src="Scripts/jsrender.min.js" %3E%3C/script%3E'));
            }
    
            if (typeof ej == "undefined") { // If CDN fails, ej returns undefined.
                // So that, refer the Syncfusion stylesheets and scripts from the local path here
    
                // StyleSheet reference from the local system path
                document.write(decodeURIComponent('%3Clink rel="stylesheet" href="Content/ej/web/default-theme/ej.web.all.min.css" %3C/%3E'));
                // Script reference from the local system path
                document.write(decodeURIComponent('%3Cscript src="Scripts/ej/ej.web.all.min.js" %3E%3C/script%3E'));
            }
        </script> 
    </head>
    <body> 
        <!--Container for ejDatePicker widget-->
        <input id="startDate" type="text" />
        <script type="text/javascript">
            $(function () {
                // initialization
                $("#startDate").ejDatePicker();
            });
        </script>
    </body>
    </html>