Skip to content
ariana-report

Your first designer

The designer edits a template visually. Give it a starting template (or none for a blank report), some sample data so it can list the fields, and a function that saves the result.

SalesDesigner.tsx
import { ReportDesigner } from '@ariana-reports/react';
import template from './sales.template.json';
import data from './sales.data.json';


export function SalesDesigner() {
  return (
    <div style={{ height: '100vh' }}>
      <ReportDesigner
        template={template}
        sampleData={data}
        onSave={async (_template, json) => {
          await fetch('/api/reports/sales', { method: 'PUT', body: json });
        }}
      />
    </div>
  );
}

Try it

Section titled “Try it”

Drag a Text from the left panel onto a band, drag a field from the Data tree to bind it, and press Preview to see the report with the sample data.

designer-basic.tsx
import { useState } from 'react';
import { ReportDesigner, type ReportTemplate } from '@ariana-reports/react';
import { salesData, salesTemplate } from './report-data';


export default function DesignerBasic() {
  const [template, setTemplate] = useState<ReportTemplate>(salesTemplate);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ flex: 1, minHeight: 0 }}>
        {/* The template prop is only the starting point; changes are reported through onChange. */}
        <ReportDesigner
          template={salesTemplate}
          sampleData={salesData}
          onChange={setTemplate}
          onSave={async (_template, json) => {
            // Send `json` to your backend here.
            console.log('save', json.length, 'bytes');
          }}
        />
      </div>
      <div style={{ padding: '4px 10px', background: '#fff', font: '12px system-ui', color: '#555' }}>
        Template JSON: {JSON.stringify(template).length} characters
      </div>
    </div>
  );
}

What you can do in the designer

Section titled “What you can do in the designer”
  • Add components (text, image, line, rectangle) by dragging them from the toolbox, or by clicking one to add it to the selected band. Drag data fields from the tree onto a band to create a bound text.
  • Move and resize with the mouse. Handles sit on the edges of every selected component, so you can resize a whole row at once. Snapping to the grid and to other components helps with alignment, and Alt disables it while dragging.
  • Move components between bands by dragging them over another band.
  • Select several by dragging a rubber band, also from the empty strip below a band or from the page margin.
  • Edit text in the properties panel, or double-click a text to open a large editor with formatting buttons and a searchable list of fields and functions.
  • Add bands: headers and footers, data bands, groups and master-detail, from the Report properties.
  • Style with fonts, colors, borders and conditions, and save styles by name.
  • Undo and redo, copy and paste, and keyboard shortcuts.
  • Preview the real report with your sample data.

Read the designer guide for the full list of props, shortcuts and the controller API.

Saving and loading

Section titled “Saving and loading”

The designer does not own your storage. It calls onSave(template, json) when the user clicks Save (and downloads a .json file when you give no handler). To load a template, pass it as the template prop when the designer mounts. See Saving and loading templates.