How to Add a JavaScript Report Viewer to Your Web Application

4 min readJun 9, 2025

What You Will Need
• ActiveReportsJS
• Visual Studio

Controls Referenced
• ActiveReportsJS Report Viewer

Tutorial Concept
Learn how to seamlessly integrate a JavaScript Report Viewer into your web application. Allow your users to interact with dynamic reports with ActiveReportsJS, a client-side JavaScript reporting tool.

As web technologies continue to evolve, so do the expectations for modern business applications. With the rise of always-on connectivity, users now demand access to data and business intelligence anytime, anywhere. That’s where ActiveReportsJS comes in, offering a fully client-side reporting solution that enables users to view and analyze reports directly from any web browser.

Whether you’re building a dashboard or integrating reporting into an existing platform, ActiveReportsJS makes it simple with its powerful JavaScript components for report viewing and designing. In this tutorial, we’ll walk through the steps to integrate the JavaScript Report Viewer into a web application.

What We’ll Cover

Setting up your JavaScript project
Referencing ActiveReportsJS dependencies
Adding a viewer container
Creating a sample report file
Initializing the viewer
Running the application locally

Let’s dive in!

1. Set Up Your JavaScript Project in VS Code

To get started, create a new directory for your project. Open Visual Studio Code and run the following command in the terminal:

mkdir arjs-viewer-app

Next, open the newly created folder:

Go to File > Open Folder
Choose the arjs-viewer-app directory

Now, create an HTML file to serve as your entry point:

touch index.html

Paste this basic HTML boilerplate into index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ARJS JavaScript Viewer Application</title>
    <meta name="description" content="JavaScript Report Viewer" />
    <meta name="author" content="MESCIUS" />
  </head>
  <body></body>
</html>

2. Add ActiveReportsJS Dependencies

To keep things simple for this example, we’ll load the necessary ActiveReportsJS libraries directly from the MESCIUS CDN. Add the following stylesheets and scripts within the <head> tag of your HTML file:

<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>

💡 Tip: For larger projects, you might prefer installing these packages via NPM. See the official installation docs for more options.

3. Add the Viewer Container

Next, we’ll create a container element where the report viewer will be rendered. Add the following <div> inside the <body> tag:

<div id="viewer-host"></div>

To ensure the viewer takes up the full browser window, apply this CSS (also within the <head> tag):

<style>
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

4. Create a Sample Report File

ActiveReportsJS uses .rdlx-json files to define report layouts. For this demo, we'll create a simple report using JSON.

In your terminal, run:

touch report-test.rdlx-json

Open the file and paste in the following JSON:

{
  "Name": "Report-test",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "textBox1",
        "Value": "Thanks for reading the article!",
        "Style": {
          "FontSize": "20pt"
        },
        "Width": "8.5in",
        "Height": "1in"
      }
    ]
  }
}

This basic report displays a single text box with a message.

5. Initialize the Report Viewer

To bring it all together, you’ll need to instantiate the Viewer component and load your JSON report file. Add the following <script> at the bottom of your HTML's <body> tag:

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report-test.rdlx-json");
</script>

This script tells the viewer to bind to the #viewer-host div and render the specified report.

6. Run the Application Locally

To preview your application in the browser, you have two simple options:

Option 1: Use http-server

If you prefer the command line, install the lightweight http-server package globally:

npm install -g http-server

Then launch the server from your project root:

http-server

Open your browser and navigate to the provided local URL (e.g., http://localhost:8080).

Option 2: Use Live Server Extension

Alternatively, install the Live Server extension in VS Code. Once installed:

Right-click index.html
Click “Open with Live Server”

You should now see your report rendered beautifully inside the viewer!

Final Thoughts

Congratulations, you’ve just built a simple yet functional JavaScript Report Viewer using ActiveReportsJS!

From here, you can:

Customize viewer themes and toolbars
Explore advanced API capabilities
Implement localization support for global users

MESCIUS inc.