Designer

Embed the web report designer with createDesigner: toolbox, field list, bands, property panel, preview, JSON view and saving to your server.

createDesigner mounts the web designer: a toolbox, a data field list, the bands, a property panel, preview and JSON views, undo and redo. Give it sample data so the field list and the preview have something to show. Open the designer (full window)

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

const designer = createDesigner(document.getElementById('designer'), {
  definition,               // leave out to start with a blank report
  data: { rows },           // sample data for the field list and the preview
  lang: 'ko',
  onChange: def => localStorage.setItem('draft', JSON.stringify(def)),
  onSave: def => fetch('/api/reports/sales', { method: 'PUT', body: JSON.stringify(def) }),
});
designer.setMode('preview');      // 'design' | 'preview' | 'json'
const json = designer.getDefinition();