# ActiveReportsJS Report Viewer component
Learn how to use ActiveReportsJS Report Viewer in a pure JavaScript applications
## Content
This page provides a detailed overview of the ActiveReportsJS Report Viewer component. You can check [Get Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/QuickStart-Vanilla) tutorial for a concise guide for integrating this component to a pure JavaScript application.
### ActiveReportsJS scripts and styles
To use ActiveReportsJS Viewer 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-viewer.js: required, provides the viewer component
* ar-js-ui.css: required, provides the common style for ActiveReportsJs components
* ar-js-viewer.css: required, provides the default style for viewer component
* ar-js-pdf.js: optional, provides export to PDF
* ar-js-tabular-data.js: optional, provides export to Tabular Data(CSV) format.
* ar-js-html.js : optional, provides export to HTML
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 Viewer Component
After the scripts and styles are loaded, the Viewer component can be initialized by invoking the `MESCIUS.ActiveReportsJS.ReportViewer.Viewer` constructor and passing the CSS selector of the hosting element and optional [initialization options](/activereportsjs/api/v6.1/interfaces/ReportViewer.ViewerOptions), for example:
```html
```
The instance of `MESCIUS.ActiveReportsJS.ReportViewer.Viewer` exposes the [methods and properties](/activereportsjs/api/v6.1/classes/ReportViewer.Viewer) that you can use to customize the viewer appearance, preview, print, or export reports.
### Related links
* [Live Demo](https://developer.mescius.com/activereportsjs/demos/features/viewer-integration/purejs)
* [Customization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization)
* [Localization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization)
* [Print](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Print)
* [Export](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export)
* [Themes](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Themes)