The Global Choice of JavaScript Developers for Developing Front-end Reporting Solutions.

Supports Angular, React, and Vue

Supports Next.js, Nuxt, Svelte, and Vite.js

Provides ActiveReportsJS Designer Program with cross-platform support

Develop responsive, mobile-friendly reporting apps

ActiveReportsJS Quickstart

Getting Started with the JavaScript Reporting Control

1 Download ActiveReportsJS Files
2 Create Reports Using Report Designer
3 Add Report Viewer to the Application
4 Add Host Element
5 Initialize Report Viewer Component
6 Run the Application

  • Download the ActiveReportsJS files, unzip them, and install and run the ActiveReportsJS Designer for your operating system (Windows, MacOS, or Linux).

    * The installer for the Designer program is located in the designer folder of the downloaded files.

  • Use the ActiveReportsJS Designer to create the report you want.
    Add a data source, design the report, and then save the report as "report.rdlx-json".
    (You can change the file name as needed.)

    Learn more about creating reports

    * Below is the screen of the ActiveReportsJS Designer.

  • In the <head> section at the top of the HTML file of your application where the viewer will be displayed, load the resource files as shown below.

    * These files are located in the dist and styles folders of the downloaded package.

    <Required Files>
    - ar-js-ui.css (required)
    - ar-js-viewer.css (required)
    - ar-js-core.js (required)
    - ar-js-viewer.js (required)
    - ar-js-pdf.js (optional)
    - ar-js-tabular-data.js (optional)
    - ar-js-html.js (optional)

  • In the <body> section at the bottom of the HTML file, add a host element and set its id as shown below.

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

  • In the <body> section at the bottom of the HTML file, add the following code to display the ActiveReportsJS Viewer and load the .rdlx-json file created above.

     var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
viewer.open("report.rdlx-json");
  • Install the Live Server extension in Visual Studio Code, then click the Go Live button at the bottom right to run the application.
    You will see the report displayed in the viewer in your browser as shown below.

ActiveReportsJS Report Template

ActiveReportsJS is a reporting solution for visualizing data in front-end applications. Through the Report Designer program of ActiveReportsJS,

you can easily create a report of the desired template using only JSON data. In addition, through the JavaScript Report Viewer component and library, reports can be distributed in various environments including Windows, Web, and Mobile

Electronic Ticket
Estimate
Tax Invoice
Transcript
Cosmetics Test Report
Customer List (Runtime)

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample

  • Use the slider below to explore the code. You can also download the .rdlx-json file and run it directly in ActiveReportsJS.

    Download Sample
Education
\
Finance
Healthcare
Manufacturing
HR
Sales
Service

Why Should I Use ActiveReportsJS?

ActiveReportsJS has all the reporting features that developers and end users have needed for a long time. With JavaScript technology, you can now extend your reporting solution regardless of platform.

JavaScript Reporting Engine

A powerful reporting engine lets you fetch and generate reports using JavaScript, regardless of device.

Support for Various Report Types

Supports various layouts, including continuous page layout and fixed page layout, allowing you to create reports in a format that suits your needs.

No Server Dependencies

You can integrate the ActiveReportsJS reporting engine into your frontend applications using NPM packages, CDN hosting, or app-hosted JavaScript code with no server-side dependencies.

Client-Side Export and Printing

Quickly generate WYSIWYG reports on the client side and export them to PDF, HTML, Excel(XLSX) and CSV formats. This allows end users to print complete JavaScript reports.

Full Support for JS Frameworks

Boost your productivity by using it with popular JavaScript frameworks like Angular, React, and Vue.

Interactive JS Report Design

Drilldown, drillthrough, interactive sorting, and bookmarking features allow you to interact and provide more specific information to your end users.

Ask Anything!

Share your vague concerns and questions about ActiveReportsJS with MESCIUS's expert team. We empathize with your concerns and are here to help.

Online Consultation

ActiveReportsJS Webinar

MESCIUS
The New World of Low-Code Reporting
The Busy Developer's Reporting Wizard | ActiveReportsJS


We'll introduce the various features and characteristics of ActiveReportsJS and explain how to use them. Download the free trial version of ActiveReportsJS and follow along!

Download Free Trial

No Complicated and Heavy Web Report Development!

Now, create a front-end-based reporting solution with JavaScript and JSON.

ActiveReportsJS Designer Supports data connections in JSON format, such as REST API, OData, and GraphQL, and allows you to quickly and easily create reports in the style you want with drag-and-drop, without coding.

  • Supports Windows, Mac, and Linux OS
  • Intuitive drag-and-drop GUI
  • Switch to JS Report
  • Flexible integration
  • Various customizations
  • Multilingual support
Quick Start Demo

All reports are written in JSON format, so reports can be rendered on the web without restrictions with a JavaScript Report Viewer, regardless of device.

  • Rendering reports in the browser
  • Customizing
  • Lightweight report process and view
JavaScript Angular React Vue Next.js Nuxt Vite

JavaScript Framework Support

ActiveReportsJS is built to be framework-agnostic, offering full support for popular JavaScript frameworks like React, Vue, Angular, Next.js, Vite and Nuxt.

ActiveReportsJS Online Tutorial

Learn the Various Features of the JavaScript Reporting Control.

Run Demo

ActiveReportsJS Quickstart

Getting Started with JavaScript Reporting Controls Guide

JavaScript Framework Support

ActiveReportsJS provides support for JavaScript frameworks, enabling developers to easily achieve rapid web development and efficient code maintenance.

ActiveReportsJS Viewer Component

You can use the ActiveReportsJS Viewer component with other framework tools. Try incorporating the ActiveReportsJS Viewer component into your application.

Installing From NPM

You can install npm packages by typing a simple npm command.

npm install @mescius/activereportsjs

ActiveReportsJS Designer Component

Create a more efficient reporting system by embedding ActiveReportsJS designer components into your Angular, React, Vue, and pure JavaScript applications.

Standalone Report Designer

Build customizable, interactive report templates quickly and easily using our cross-platform report designer application.

Supports Various OS

It can be installed on Windows, Mac, or Desktop Linux.

User-Friendly Interface

Create printable analytics or interactive reports using an intuitive interface and a rich set of data visualization components.

JSON Report Template

Save report templates in JSON format and integrate them into your application as static resources or dynamic modules.

Ask Anything!

Share your vague concerns and questions about ActiveReportsJS with MESCIUS's expert team. We empathize with your concerns and are here to help.

Online Consultation

ActiveReportsJS v6.2 New features

[Angular 22 Support]

  • Angular wrappers for Report Designer and Report Viewer now build in Angular 22 projects


[AI-Powered Report Visualization]

  • ActiveReportsJS AI Assistant : Available in the Standalone Report Designer and the Report Designer component embedded in web applications
  • Explore Feature : Build table, tablix, and chart visualizations from a data set using AI
  • Field Metadata Only : Only field names and types are sent to the AI provider, never the actual data
  • Instant Visuals Fallback : Built-in instant visuals suggest visualizations when the AI Assistant is not configured or a request fails
  • Visualization Cards : Generated visualizations are displayed as cards with a short description of each


[Multi-Value Parameter Enhancements]

  • Enable Empty Array Option : Submit multi-value parameters without selecting any value
  • Select All Value Option : Pass a single sentinel value such as * to the query when (all) is selected


[Report Designer API Improvements]

  • Default Paper Size Setting : Set the default paper size for new reports using standard or custom sizes
Read More

Our Customers

Entercron Inc.

COVAS, A Smart Total Logistics Forwarding Platform

#Logistics #Report

YEOGISTUDY

Smart Online Education Bachelor’s Management Solution

#Education #Report #Dashboard

MYLINK

Smart Manufacturing IT Solution, LinkBiz

#Distribution #Excel #Dashboard

Introduction Case

Explore more MESCIUS product adoption examples.

ActiveReportsJS Pricing and Licensing

If you want to create a JavaScript-based reporting solution using ActiveReportsJS, you will need to purchase both a developer license and a deployment license.

* All amounts are exclusive of VAT.

Developer License (Designer)

1 developer, 1 year license


This license is required to use the ActiveReportsJS desktop designer app.

$90

* You must purchase 1 copy per developer.

* You can use the purchased main version + minor version for 1 year.

* The license will automatically expire after 1 year, and an additional license will be issued in 1-year increments.

You can purchase it.

Distribution License

Perpetual License

This license is required to deploy the ActiveReportsJS control on your server.

$1,430

 * You must purchase 1 copy per domain address or IP address you are servicing.

* Once registered, domains and IPs cannot be modified.

* The distribution license can be used without a time limit.

* Distribution keys can only be generated for the developer license version you own.

Application for Distribution Key Issuance

To deploy the ActiveReportsJS control on your server, you must purchase a deployment license and obtain a deployment key. Please apply for a deployment key through the deployment key issuance portal.

Introduction Inquiry

If you need more detailed product or purchase consultation regarding ActiveReportsJS implementation, please contact us using a method that is convenient for you.

Purchase Procedure

Click on each button to see detailed information about each step of the purchasing process.

  • 1. Price confirmation and quote request

    Please request a quotation using any of the methods below that are convenient for you.


  • 2. Order Request

    Please send the following three items to Email (asia.sales@mescius.com)


    1. Signed quotation (authorized signatory or company seal)
    2. Copy of business registration certificate (for companies)
    3. End-User information:

              1) Company Name (in English):

              2) Contact Person (in English):

              3)E-mail:


    Once your order request is received, we will issue the invoice via email.

  • 3. Payment

    Bank Transfer


    Please make the payment to the account number indicated on the invoice you received.

  • 4. License issuance &amp; tax invoice issuance

    After payment is confirmed, we will send you an email with license issuance details.


    *To deploy the ActiveReportsJS control on a server, you must purchase a deployment license and obtain a deployment key. Please request your deployment key through the Deployment Key Portal.


    Distribution Key Issuance

Controls for Web Developers

  • SpreadJS

    Pure JavaScript-based Web-Excel Component
    • Supports Excel import/export
    • Supports 450 Excel functions
    • Supports Angular, React, and VueJS
    Learn More

  • Wijmo

    UI controls such as JavaScript-based Chart, Grid, and Input
    • 80+ UI controls including grids, charts, reports, input forms, and OLAP
    • Full support for Angular, React, and VueJS
    • Filter, group, and sort functions
    Learn More

  • Forguncy

    Build Business Web Apps with Excel — No Coding Needed
    • Easy and quick web implementation with Excel features
    • Web development without HTML & CSS
    • Data collection and integration solution
    Learn More

  • DsExcel

    High-Performance Excel Spreadsheet API for Java, Kotlin, and .NET
    • Create, load, edit, and save spreadsheets
    • Parse, convert, and share spreadsheets
    • Calculate formulas and format cells
    DsExcel Java
    DsExcel .NET