# ActiveReportsJS: Installation Learn how to install ActiveReportsJS and what you can find in the product ## Content ActiveReportsJS consists of the cross-platform designer application and several JavaScript libraries. This page provides an overview of these components and installation instructions for each of them. ## Installation package ActiveReportsJS offers [Windows](https://cdn.mescius.com/activereportsjs/release/ActiveReportsJS_6.0_Win.zip), [macOS](https://cdn.mescius.com/activereportsjs/release/ActiveReportsJS_6.0_Mac.zip), and [Desktop Linux](https://cdn.mescius.com/activereportsjs/release/ActiveReportsJS_6.0_Linux.zip) installation packages. Download the package for your operating system and extract the archive. ## Standalone Report Designer Application The standalone report designer is the cross-platform desktop application built with [Electron](https://www.electronjs.org/). You can use the standalone designer to build reports. Visit the [Report Author Guide](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App) for more information. The installer resides in the `designer` folder of the downloaded installation package. You can try out the evaluation version for 30 days. ## Core library This library contains the core functionality and exposes several [types](https://developer.mescius.com/activereportsjs/api/modules/Core) that you can use within an application's code. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ar-js-core.js` script that you can find in the `dist` folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: [https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-core.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-core.js) ## PDF Export library This library contains the code that allows exporting reports to PDF format. Visit [Export Reports](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export) page for more information on this topic. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package, which includes the PDF Export functionality, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ar-js-pdf.js` script that you can find in the `dist` folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: [https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-pdf.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-pdf.js) ## HTML Export library This library contains the code that allows exporting reports to HTML format. Visit [Export Reports](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export) page for more information on this topic. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package, which includes the HTML Export functionality, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ar-js-html.js` script that you can find in the `dist` folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: [https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-html.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-html.js) ## Tabular Data Export library This library contains the code that allows exporting reports to Tabular Data(CSV) format.Visit [Export Reports](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export) page for more information on this topic. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package, which includes the Tabular Data Export functionality, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ar-js-tabular-data.js` script that you can find in the `dist` folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: [https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-tabular-data.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-tabular-data.js) ## Report Viewer Library This library contains the [JavaScript Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Overview) component. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package, which includes the Report Viewer component, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ar-js-viewer.js` script that you can find in the `dist` folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: [https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-viewer.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-viewer.js) ## Report Designer Library This library contains the [JavaScript Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) component. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package, which includes the Report Designer component, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ar-js-designer.js` script that you can find in the `dist` folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: [https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-designer.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/ar-js-designer.js) ## Angular NPM package This package contains the [Angular Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Angular-Component) and [Angular Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Angular-Component) components. To use them in an Angular application, add the [@mescius/activereportsjs-angular](https://www.npmjs.com/package/@mescius/activereportsjs-angular) NPM package to the dependencies list of your application. Visit the [Get Started with Angular Report Viewer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-Angular) and [Get Started with Angular Report Designer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Angular) pages for basic tutorials. ## React NPM package This package contains the [React Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/React-Component) and [React Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/React-Component) components. To use them in a React application, add the [@mescius/activereportsjs-react](https://www.npmjs.com/package/@mescius/activereportsjs-react) NPM package to the dependencies list of your application. Visit [Get Started with React Report Viewer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-React) and [Get Started with React Deport Designer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-React) pages for basic tutorials. ## Vue NPM package This package contains the [Vue Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component) and [React Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/Vue-Component) components. To use them in a Vue application, add the [@mescius/activereportsjs-vue](https://www.npmjs.com/package/@mescius/activereportsjs-vue) NPM package to the dependencies list of your application. Visit [Get Started with Vue Report Viewer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-Vue) and [Get Started with Vue Deport Designer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Vue) pages for basic tutorials. ## Svelte NPM package This package contains the [Svelte Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/svelte-component) and [Svelte Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration/svelte-component) components. To use them in a Svelte application, include the [@mescius/activereportsjs-svelte](https://www.npmjs.com/package/@mescius/activereportsjs-svelte) NPM package to the dependencies list of your application. Visit the [Get Started with Svelte Report Viewer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/svelte) and [Get Started with Svelte Deport Designer](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/svelte) pages for basic tutorials. ## Report Viewer Localization Library ActiveReportsJS includes translations of the [Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization) User Interface to Chinese, Japanese, Korean, Dutch, German, Italian, and Brazilian Portuguese languages. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs-i18n](https://www.npmjs.com/package/@mescius/activereportsjs-i18n) NPM package, that includes these translations, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ar-js-locales.js` script that you can find in the `dist\locales` folder of the downloaded installation package. Alternatively, this script is available via the CDN reference: [https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/ar-js-locales.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/ar-js-locales.js) ## Report Designer Localization Library ActiveReportsJS includes translations of the [Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Localization) User Interface to Chinese, Korean, and Japanese languages. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs-i18n](https://www.npmjs.com/package/@mescius/activereportsjs-i18n) NPM package, that includes these translations, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to the `ja-locale.js`, `ko-locale.js`, and `zh-locale.js` scripts that you can find in the `dist\locales\designer` folder of the downloaded installation package. Alternatively, these scripts are available via the CDN references: * [https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/designer/ja-locale.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/designer/ja-locale.js) * [https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/designer/ko-locale.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/designer/ko-locale.js) * [https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/designer/zh-locale.js](https://cdn.mescius.com/activereportsjs/6.latest/dist/locales/designer/zh-locale.js) ## Report Viewer UI themes ActiveReportsJS includes several pre-defined color themes for the [Report Viewer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Overview) component. Visit the [Report Viewer Themes page](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Themes) for more information. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package, that includes these themes, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to `ar-js-ui.css` and `ar-js-viewer.css` files that you can find in the `styles` folder of the downloaded installation package. Alternatively, these scripts are available via the CDN reference: * [https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-ui.css](https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-ui.css) * [https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-viewer.css](https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-viewer.css) ## Report Designer UI themes ActiveReportsJS includes several pre-defined color themes for the [Report Designer](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Overview) component. Visit the [Report Designer Themes page](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Themes) for more information. Suppose you plan to use ActiveReportsJS in the application that compiles using a module bundler, such as [webpack](https://webpack.github.io/). In that case, you can add the [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) NPM package, that includes these themes, to the dependencies list in the `package.json` file. A pure JavaScript application can include the reference to `ar-js-ui.css` and `ar-js-designer.css` files that you can find in the `styles` folder of the downloaded installation package. Alternatively, these scripts are available via the CDN reference: * [https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-ui.css](https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-ui.css) * [https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-designer.css](https://cdn.mescius.com/activereportsjs/6.latest/styles/ar-js-designer.css) ## ActiveReportsJS CLI Tool The ActiveReportsJS CLI is a developer toolkit designed to streamline project management and maintenance through command-line utilities. Currently, the tool provides migration automation, with more commands planned for future releases. You can execute the CLI tool without manual installation using npx: ```bash npx @mescius/activereportsjs-cli ``` ### Available Commands #### migrate The `migrate` command automates the transition from legacy `@grapecity` packages to the updated `@mescius` packages. This is particularly useful for upgrading existing projects to the latest version of ActiveReportsJS. When you run this command, the tool performs the following actions: * **Package Updates**: Uninstalls legacy `@grapecity` packages and installs the corresponding `@mescius` versions. * **Code Refactoring**: Automatically updates imports and code identifiers (e.g., changing `GC.ActiveReports` to `MESCIUS.ActiveReportsJS`) throughout your project. * **Safety Backup**: Creates a `mescius-backup` directory containing copies of all modified files before changes are applied. #### help Displays help information for the CLI or a specific command. ```bash npx @mescius/activereportsjs-cli help [command] ``` ### Options | Option | Description | | :----- | :---------- | | `-v, --version` | Outputs the current version of the CLI tool. | | `-h, --help` | Displays help documentation for the tool and its commands. |