# Get Started with ActiveReportsJS Report Viewer JavaScript Component
Learn how to integrate ActiveReportsJS Report Viewer component into a JavaScript-based application.
## Content
### Create a JavaScript Application
Such an application consists of HTML markup, CSS styles, and JavaScript code. You can create an `index.html` file in your favorite text editor and insert the following code into that file.
```html
ARJS Report Viewer
```
### Install ActivereportsJS
We distribute ActiveReportJS scripts and styles via both CDN and NPM. The easiest way to install the ActiveReportsJS report viewer for a JavaScript application is to add CDN-based references inside the HTML page's `head` tag. Check [Installation](/activereportsjs/docs/v6.1/GettingStarted/Installation) for more information about required scripts and styles.
```html
```
### Add the Report Viewer Host element
Add the `div` element that will host the report viewer inside the `body` tag.
```html
```
Add styles for the `viewer-host` element inside the `head` tag.
```html
```
### Add ActiveReportsJS report to the application
ActiveReportsJS uses [JSON format](https://www.json.org/json-en.html) and `rdlx-json` extension for report template files.
In the application's root folder, create the new file called `report.rdlx-json` and insert the following JSON content into that file.
```json
{
"Name": "Report",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Hello, ActiveReportsJS Viewer",
"Style": {
"FontSize": "18pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
}
```
### Initialize Report Viewer component
Add the following script in the `body` tag right after the `viewer-host` element so that this script would run after the element is rendered. This code initializes the instance of the [Report Viewer Component](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/VanillaJS) and opens the report template that you added in the previous step.
```html
```
### Run and test the application
You can use any [static web-server](https://gist.github.com/willurd/5720255) to run the application. For example, if the [http-server](https://www.npmjs.com/package/http-server) package is [installed globally](https://docs.npmjs.com/downloading-and-installing-packages-globally), you can run the `http-server` command from the application's root folder. Make sure that you open the app that runs on the `localhost`.
When the application starts, the ActiveReportsJS Viewer component will appear on the page. The viewer will display the report that shows "Hello, ActiveReportsJS Viewer" text. You can test the basic functionality by using buttons on the toolbar or exporting a report to one of the available formats.
### Related links
* [Live Demo](/activereportsjs/demos/features/viewer-integration/purejs)
* [JavaScript Developer Guide](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Integration/VanillaJS)