Referencing Wijmo in Your Applications

To use Wijmo in your applications, include it by adding a few references to your HTML pages.

First, you will want to download Wijmo from our website. We recommend downloading our zip allong with npm since it includes samples, reference applications and more.

The minimal set of files required by any Wijmo application is:

wijmo.css: Contains the CSS rules used for styling all Wijmo controls.
wijmo.js: Contains the Wijmo infrastructure including the Globalize, Event, Control, and CollectionView classes.

In addition to these, include one or more additional files, depending on which components you use:

wijmo.grid.js: Contains the FlexGrid control.
wijmo.chart.js: Contains the FlexChart and FlexPie controls.
wijmo.input.js: Contains several input controls, including ComboBox, AutoComplete, InputDate, InputTime, InputNumber, InputMask, ListBox, Menu, and Calendar controls.
wijmo.gauge.js: Contains several gauge controls, including LinearGauge, RadialGauge, and BulletGraph.
wijmo.nav.js: Contains navigation controls, including TabPanel, and TreeView.
wijmo.culture.[CultureName].js: Contains culture-specific files used to develop applications in languages other than American English.
wijmo.theme.[ThemeName].css: Contains CSS rules used to customize the appearance of the Wijmo controls. Use any of these files instead of wijmo.css.

Wijmo includes interop modules that allow you to use the controls as native components for the most popular JavaScript frameworks:

wijmo.angular2.js: Contains components that encapsulate Wijmo controls in Angular applications.
wijmo.react.js: Contains components that encapsulate Wijmo controls in React applications.
wijmo.vue2.js: Contains components that encapsulate Wijmo controls in Vue 2.x and Vue 3.x applications.

As for the actual location of the files, you have two options. You may download Wijmo and copy the required files to the appropriate folders within your application, or you may reference Wijmo files hosted in the cloud, on our Content Delivery Network (CDN). The sections below show examples.

Deploying Wijmo locally

Download the Wijmo files and copy them to a folder within your application. If you place the Wijmo script files in a folder called "scripts/vendors," and the css files in a folder called "styles," you can add the following lines to your HTML pages:

<!-- Wijmo styles and core (required) -->
<link href="styles/wijmo.min.css" rel="stylesheet"/>
<!-- 
    optionally use a custom theme instead of wijmo.min.css
    <link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="scripts/vendor/controls/wijmo.min.js"></script>

<!-- Wijmo controls (optional, include the controls you need) -->
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script>

<!-- Wijmo custom culture (optional, include the culture you want) -->
<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js"></script>

<!-- apply your Wijmo licenseKey (optional) -->
<script>
    wijmo.setLicenseKey(**'your license key goes here...'**);
</script>

Deploying Wijmo from CDN

In this case, there is nothing to download. Simply add the following lines to your HTML pages:

<!-- Wijmo styles and core (required) -->
<link href="https://cdn.mescius.com/wijmo/5.20242.21/styles/wijmo.min.css" rel="stylesheet"/>
<!-- 
    optionally use a custom theme instead of wijmo.min.css
    <link href="https://cdn.mescius.com/wijmo/5.20242.21/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="https://cdn.mescius.com/wijmo/5.20242.21/controls/wijmo.min.js"></script>

<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.mescius.com/wijmo/5.20242.21/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20242.21/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20242.21/controls/wijmo.input.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.20242.21/controls/wijmo.gauge.min.js"></script>

<!-- Wijmo custom culture (optional, include the culture you want) -->
<script src="https://cdn.mescius.com/wijmo/5.20242.21/controls/cultures/wijmo.culture.ja.min.js"></script>

<!-- apply your Wijmo licenseKey  (optional) -->
<script>
    wijmo.setLicenseKey(**'your license key goes here...'**);
</script>

If you want to always use the latest released version, replace the version number in the references with 5.latest. This should only be used for testing purposes and is not recommended for production applications. For example:

<!-- latest Wijmo version -->
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/>

Note: The markup above shows how you can add your license key to remove the Wijmo evaluation watermark. If you don't have a license key, skip that step. For more details on licensing, please see the Licensing Wijmo Applications topic.

Note: The order of the references is important. The wijmo.js module must be the first, followed by the control modules, control extensions. Interop modules such as wijmo.angular should be included last.