Getting started

Install @freereportjs/core from npm or load it from the CDN, import the stylesheet and show a report with createViewer in a few lines.

FreeReport is one TypeScript package with no dependencies. Install it, import the stylesheet once, and create a viewer in an element that has a height.

npm i @freereportjs/core

import { createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';

const definition = await fetch('/reports/sales.json').then(r => r.json());

const viewer = createViewer(document.getElementById('viewer'), {
  definition,
  data: { rows },     // detail rows; other keys are usable in expressions
  lang: 'ko',
});
// <div id="viewer" style="height: 720px"></div>

Without a build step (CDN)

Load the bundle with a script tag; it defines a global FreeReport. Pin a version (v0.9.0) in production; latest always points to the newest release.

<link rel="stylesheet" href="https://freereport.app/cdn/latest/freereport.css">
<script src="https://freereport.app/cdn/latest/freereport.min.js"></script>
<div id="viewer" style="height: 720px"></div>
<script>
  FreeReport.createViewer(document.getElementById('viewer'), { definition, data: { rows } });
</script>

<link rel="stylesheet" href="https://freereport.app/cdn/v0.9.0/freereport.css">
<script type="module">
  import { createViewer } from 'https://freereport.app/cdn/v0.9.0/freereport.esm.js';
  createViewer(document.getElementById('viewer'), { definition, data: { rows } });
</script>