# ActiveReportsJS Report Designer component
Learn how to use ActiveReportsJS Report Designer in a pure JavaScript application
## Content
This page provides a detailed overview of the ActiveReportsJS Report Designer component. You can check the [Get Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Vanilla) tutorial for a concise guide for integrating this component into a pure JavaScript application.
### ActiveReportsJS scripts and styles
To use ActiveReportsJS Designer component in a pure JavaScript application, it should include the following scripts and styles:
* ar-js-core.js: required, provides the core functionality
* ar-js-designer.js: required, provides the designer component
* ar-js-ui.css: required, provides the common style for ActiveReportsJs components
* ar-js-designer.css: required, provides the default style for designer component
The easiest way to include these scripts is to use CDN references, for example:
```html
```
Alternatively, you can download these scripts and styles from the ActiveReportsJS [Download Page](https://developer.mescius.com/activereportsjs/download). You can find them in the `dist` and `styles` folders of the download package, respectively.
Finally, [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs/) package can be installed in an application's folder and these scripts can be referenced from `node_modules\@mescius/activereportsjs\dist\` and `node_modules\@mescius/activereportsjs\styles\` folders
### Initializing ActiveReportsJS Designer Component
Once scripts and styles are loaded, the Designer component can be initialized by invoking `MESCIUS.ActiveReportsJS.ReportDesigner.Designer` constructor and passing the CSS selector of the hosting element into it, for example:
```html
```
The report designer instance exposes [methods and properties](https://developer.mescius.com/activereportsjs/api/classes/ReportDesigner.Designer) that can be used to set the application's behavior with regard to report loading, saving, and previewing.