Report designer · drag, drop, preview

A visual editor for report definitions. Drag fields and tools onto the bands, move, resize and align elements, set their properties in the inspector, and open the Preview tab to see the laid-out pages. Every change goes back to your signal as JSON, and each one can be undone.

Start from Sales by region · 5,377 bytes of JSON
102030405060708090100110120130140150160170180
Report Header82 mm
1020304050607080
Sales by region0200k400k600kAmericas$452,002Asia Pacific$436,337Europe$415,690
Sales by month050k100k150k200k87.7k165.87k132.18k182.63k181k159.25k156.1k99.67k139.62kJanFebMarAprMayJunJulAugSep
{Title}
Orders from {Min(date):MMM d} to {Max(date):MMM d, yyyy} · {Count()} orders · {DistinctCount(country)} countries
GRAND TOTAL
{Sum(amount):C2}
Page Header7 mm
#
DATE
REP
PRODUCT
QTY
AMOUNT
RUNNING
Group Header: region10 mm
{region}{iif(Repeated, ' (continued)', '')}
{Count()} orders · {Sum(amount):C0}
Group Header: country8 mm
{country}{iif(Repeated, ' (continued)', '')}
Detail5.2 mm
{id}
{date:MMM dd}
{rep}
{product}
{qty}
{amount:N2}
{RunningSum(amount):N2}
Group Footer: country7 mm
{country}: {Count()} orders
{Sum(amount):C2}
Group Footer: region12 mm
10
{region} total — {Count()} orders, avg {Avg(amount):C2}
{Sum(amount):C2}
{Sum(amount) / Sum(amount, 'report'):P1} of all sales
Report Footer16 mm
10
Grand total · {Count()} orders · {DistinctCount(rep)} reps
{Sum(amount):C2}
Page Footer8 mm
Printed {PrintDate:MMM d, yyyy HH:mm}
This page: {Count()} orders · {Sum(amount):C2}
Page {Page} of {Pages}
Nothing pickedDrag fields and tools onto a band

Usage

JavaScript
import { signal } from "./index.js";import { ReportDesigner } from "./components/report/designer.js"; // The designer edits a report definition (the same JSON ReportViewer takes)// and writes every change back to the signal; data is sample rows for the// field list and the Preview tab.const report = signal(definition);ReportDesigner({ value: report, data: { orders }, height: "820px",                 onChange: (def) => localStorage.setItem("report", JSON.stringify(def)) }); // Mouse: drag tools and fields onto a band · drag to move (into another band too)//        handles resize · a band's lower edge sets its height · double-click edits text//        Shift-click / rubber band to pick several · Alt while dragging: no snapping// Keys:  arrows move 1 mm (Shift 5) · Alt+arrows resize · Del · Ctrl+Z / Ctrl+Y//        Ctrl+C / X / V · Ctrl+D duplicate · Ctrl+A · Enter edit · Esc// ƒx opens the expression editor: fields, functions, formats, and the value on the first row.