Designer

The report designer runs in the browser. Drag tools and data fields onto bands, move and resize them, edit their properties, switch to the preview with real data, and save the definition as JSON. Start from a sample or a blank report.

Code for this demo

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

const designer = createDesigner(document.getElementById('designer'), {
  definition,                 // start from a saved report, or leave out for a blank one
  data: { rows },             // sample data: fills the field list and the preview
  lang: 'en',
  onChange: def => draft(def), // the definition as JSON, after every change
  onSave: def => fetch('/api/reports/sales', { method: 'PUT', body: JSON.stringify(def) }),
});