# Report editor > A block based report editor for headings, rich text, key figures, charts, tables and callouts, with a live preview and a read only print friendly report viewer. Source: https://docs.nasaqui.com/components/report-editor ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/report-editor.json ``` Write a report as a stack of blocks. Each block edits in a collapsible, reorderable row (built on `Repeater`); Preview shows the finished report through `ReportViewer`, which you can also use alone to show a saved report. ## When to use - Periodic reports that mix words, numbers and charts: monthly summaries, client updates. ## When not to use - Free writing without structure: use `RichTextEditor`. - Slides: use `PresentationEditor`. ## Import ```tsx import { ReportEditor, ReportViewer } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx { await api.save(report); }} /> ``` ## API | Prop | Type | Default | Description | | --- | --- | --- | --- | | `value`, `defaultValue`, `onValueChange` | `Report` | empty | Title, subtitle, author, date and blocks. | | `onSave` | `(report) => Promise` | none | Adds Save and the unsaved state. | | `onPrint` | `() => void` | `window.print()` | Print button in the preview. | | `defaultView` | `"edit" \| "preview"` | `"edit"` | Start tab. | | `readOnly` | `boolean` | `false` | Shows the viewer only. | | `labels`, `className` | | | English and Arabic built in. | `ReportViewer` props: `report`, `showToc` (default when two or more headings), `onPrint`, `hidePrint`, `labels`, `className`. `ReportChart` draws a chart block (bars, lines or area) mirrored for RTL. Blocks: `heading` (level 1 to 3), `text` (HTML from the rich text editor), `metrics` (labels, values, change, currency), `chart`, `table`, `callout` (info, success, warning, danger) and `divider`. Switching the type of a block keeps its text. ## Behaviour - Blocks with no content show a badge and a count in the toolbar; nothing stops saving. - Numbers typed in Arabic digits are understood. - The viewer hides its Print button on paper, and keeps charts, tables, figures and callouts from splitting across pages. Printing uses the browser print of the whole page, so place the viewer on a page of its own for a clean result. ## Accessibility Charts are images with a summary label (title, type, number of points). The contents list links to headings. Callouts use `role="note"`. ## RTL Charts flip their axes, the contents indent from the reading start, and numbers, dates and currency codes stay left to right. ## Code ### React ```tsx { await api.save(report); }} /> ``` ### shadcn ```tsx { await api.save(report); }} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $saved = [ 'title' => 'May summary', 'subtitle' => 'Orders and delivery', 'author' => 'Sara', 'date' => '2026-05-31', 'blocks' => [ ['id' => 'h1', 'type' => 'heading', 'text' => 'Highlights', 'level' => 1], ['id' => 't1', 'type' => 'text', 'html' => '

Orders grew 12%.

'], ['id' => 'm1', 'type' => 'metrics', 'items' => [['id' => 'f1', 'label' => 'Revenue', 'value' => 12400, 'delta' => 0.124, 'currency' => 'USD', 'deltaLabel' => 'vs April'], ['id' => 'f2', 'label' => 'Orders', 'value' => 320]]], ['id' => 'h2', 'type' => 'heading', 'text' => 'Trend', 'level' => 2], ['id' => 'c1', 'type' => 'chart', 'title' => 'Orders by week', 'kind' => 'bar', 'series' => ['Orders'], 'rows' => [['label' => 'W1', 'values' => [60]], ['label' => 'W2', 'values' => [80]]], 'caption' => 'Weekly'], ['id' => 'tb', 'type' => 'table', 'title' => 'Top items', 'columns' => ['Item', 'Sold'], 'rows' => [['Tea', '40'], ['Coffee', '31']]], ['id' => 'co', 'type' => 'callout', 'tone' => 'warning', 'title' => 'Note', 'text' => 'Stock is low.'], ['id' => 'dv', 'type' => 'divider'], ], ]; @endphp

``` ### HTML + Alpine ```html

0 words

Saved

Report title Subtitle Author Date

May summary

Orders and delivery

By Sara · May 31, 2026 · 29 words · 1 min read

Highlights

Orders grew 12%.

Revenue

$12,400

+12.4% vs April

Orders

320

Trend

Orders by week

Weekly

Item	Sold
Tea	40
Coffee	31