Design, view and print reports in the browser.

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

// a report definition is plain JSON (made in the designer or by hand)
const definition = await fetch('/reports/sales.json').then(r => r.json());

const viewer = createViewer(document.getElementById('viewer'), {
  definition,
  data: { rows },            // detail rows plus any other values
  params: { from: '2026-07-01' },
  lang: 'en',
  onOutput: e => log(e),     // every print and export; return false to cancel
});

// without a viewer: straight to PDF or Excel
const report = createReport(definition, { rows });
await report.ready();
const pdf = await report.toPdf();       // Blob
const xlsx = await report.toXlsx('form');

import { useEffect, useRef } from 'react';
import { createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';

// or use the ready-made component: import { FreeReportViewer } from '@freereportjs/react'
export function ReportViewer({ definition, data }) {
  const el = useRef(null);
  useEffect(() => {
    const viewer = createViewer(el.current, { definition, data, lang: 'en' });
    return () => viewer.destroy();
  }, [definition, data]);
  return <div ref={el} style={{ height: 720 }} />;
}

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { createViewer } from '@freereportjs/core';
import '@freereportjs/core/styles.css';

// or use the ready-made component: import { FreeReportViewer } from '@freereportjs/vue'
const props = defineProps(['definition', 'data']);
const el = ref(null);
let viewer;
onMounted(() => { viewer = createViewer(el.value, { ...props, lang: 'en' }); });
onBeforeUnmount(() => viewer?.destroy());
</script>

<template>
  <div ref="el" style="height: 720px" />
</template>