Fluxo UIFluxo UIv0.4.1

Report Builder

A full-featured visual report designer. Connect datasources, define parameters, drag-and-drop components onto a canvas, and export a pure JSON definition that can be rendered anywhere with ReportViewer.

Drag components from the Toolbox. Configure datasources, parameters, and styles in the side panels. Four sample datasource plugins are pre-loaded: Static JSON, HTTP, Jira, and CSV.

Quarterly Sales Report
FY 2025 — Regional sales performance across product lines and quarters.
Revenue Overview
Revenue by Region
regionSummary
Quarterly Trend
quarterlySummary
Revenue by Product
productSummary
Regional Distribution
regionSummary
Detailed Transactions
Click column headers to sort. Use "Copy Data" to export to clipboard.
RegionProductQuarterRevenue ($)Units Sold
Disclaimer: This report contains sample data for demonstration purposes only. Revenue figures are fictional and do not represent actual business performance. Generated by FluxoUI Report Viewer.
View live definition JSON
{
  "id": "e34bce87-bd92-4aa0-9d87-4a2a412ab132",
  "metadata": {
    "title": "Quarterly Sales Report",
    "version": "1.0.0",
    "createdAt": "2026-05-02T16:24:54.901Z",
    "updatedAt": "2026-05-02T16:24:54.901Z"
  },
  "datasources": [
    {
      "id": "ds-sales",
      "name": "sales",
      "type": "static-json",
      "config": {
        "json": "[{\"region\":\"North\",\"product\":\"Widget A\",\"revenue\":12500,\"units\":150,\"quarter\":\"Q1\"},{\"region\":\"North\",\"product\":\"Widget B\",\"revenue\":8200,\"units\":90,\"quarter\":\"Q1\"},{\"region\":\"North\",\"product\":\"Widget A\",\"revenue\":14100,\"units\":170,\"quarter\":\"Q2\"},{\"region\":\"North\",\"product\":\"Widget B\",\"revenue\":9500,\"units\":105,\"quarter\":\"Q2\"},{\"region\":\"South\",\"product\":\"Widget A\",\"revenue\":15800,\"units\":200,\"quarter\":\"Q1\"},{\"region\":\"South\",\"product\":\"Widget B\",\"revenue\":6400,\"units\":75,\"quarter\":\"Q1\"},{\"region\":\"South\",\"product\":\"Widget A\",\"revenue\":16200,\"units\":210,\"quarter\":\"Q2\"},{\"region\":\"South\",\"product\":\"Widget B\",\"revenue\":7800,\"units\":88,\"quarter\":\"Q2\"},{\"region\":\"East\",\"product\":\"Widget A\",\"revenue\":11000,\"units\":130,\"quarter\":\"Q1\"},{\"region\":\"East\",\"product\":\"Widget B\",\"revenue\":9700,\"units\":110,\"quarter\":\"Q1\"},{\"region\":\"East\",\"product\":\"Widget A\",\"revenue\":12400,\"units\":145,\"quarter\":\"Q2\"},{\"region\":\"East\",\"product\":\"Widget B\",\"revenue\":10200,\"units\":118,\"quarter\":\"Q2\"},{\"region\":\"West\",\"product\":\"Widget A\",\"revenue\":14200,\"units\":180,\"quarter\":\"Q1\"},{\"region\":\"West\",\"product\":\"Widget B\",\"revenue\":7100,\"units\":85,\"quarter\":\"Q1\"},{\"region\":\"West\",\"product\":\"Widget A\",\"revenue\":15600,\"units\":195,\"quarter\":\"Q2\"},{\"region\":\"West\",\"product\":\"Widget B\",\"revenue\":8400,\"units\":96,\"quarter\":\"Q2\"}]"
      }
    },
    {
      "id": "ds-region",
      "name": "regionSummary",
      "type": "static-json",
      "config": {
        "json": "[{\"region\":\"North\",\"totalRevenue\":44300},{\"region\":\"South\",\"totalRevenue\":46200},{\"region\":\"East\",\"totalRevenue\":43300},{\"region\":\"West\",\"totalRevenue\":45300}]"
      }
    },
    {
      "id": "ds-product",
      "name": "productSummary",
      "type": "static-json",
      "config": {
        "json": "[{\"product\":\"Widget A\",\"totalRevenue\":111800},{\"product\":\"Widget B\",\"totalRevenue\":67300}]"
      }
    },
    {
      "id": "ds-quarterly",
      "name": "quarterlySummary",
      "type": "static-json",
      "config": {
        "json": "[{\"quarter\":\"Q1\",\"revenue\":84900},{\"quarter\":\"Q2\",\"revenue\":94200}]"
      }
    }
  ],
  "parameters": [],
  "variables": [],
  "components": [
    {
      "id": "hdr-main",
      "type": "header",
      "props": {
        "level": "h1",
        "content": "Quarterly Sales Report"
      },
      "styles": {
        "marginBottom": 2
      }
    },
    {
      "id": "txt-subtitle",
      "type": "text",
      "props": {
        "content": "FY 2025 — Regional sales performance across product lines and quarters."
      },
      "styles": {
        "textColor": "var(--eui-text-muted)",
        "marginBottom": 8
      }
    },
    {
      "id": "hr-top",
      "type": "horizontal-line",
      "props": {
        "thickness": 2,
        "color": "var(--eui-primary)",
        "marginTop": 0,
        "marginBottom": 16
      },
      "styles": {}
    },
    {
      "id": "hdr-overview",
      "type": "header",
      "props": {
        "level": "h3",
        "content": "Revenue Overview"
      },
      "styles": {
        "marginBottom": 8
      }
    },
    {
      "id": "cols-charts-row1",
      "type": "columns",
      "props": {
        "columnCount": 2
      },
      "styles": {
        "marginBottom": 12
      },
      "children": [
        {
          "id": "col-bar",
          "type": "column",
          "props": {},
          "styles": {},
          "children": [
            {
              "id": "chart-bar",
              "type": "chart-bar",
              "props": {
                "datasourceId": "ds-region",
                "title": "Revenue by Region",
                "xAxisField": "region",
                "yAxisField": "totalRevenue",
                "barColor": "#4f87f7",
                "showLegend": false
              },
              "styles": {}
            }
          ]
        },
        {
          "id": "col-line",
          "type": "column",
          "props": {},
          "styles": {},
          "children": [
            {
              "id": "chart-line",
              "type": "chart-line",
              "props": {
                "datasourceId": "ds-quarterly",
                "title": "Quarterly Trend",
                "xAxisField": "quarter",
                "yAxisField": "revenue",
                "lineColor": "#48c774",
                "lineTension": 0.3,
                "showPoints": true,
                "areaFill": true,
                "showLegend": false
              },
              "styles": {}
            }
          ]
        }
      ]
    },
    {
      "id": "cols-charts-row2",
      "type": "columns",
      "props": {
        "columnCount": 2
      },
      "styles": {
        "marginBottom": 16
      },
      "children": [
        {
          "id": "col-donut",
          "type": "column",
          "props": {},
          "styles": {},
          "children": [
            {
              "id": "chart-donut",
              "type": "chart-donut",
              "props": {
                "datasourceId": "ds-product",
                "title": "Revenue by Product",
                "labelField": "product",
                "valueField": "totalRevenue",
                "colors": [
                  "#4f87f7",
                  "#f76f6f"
                ],
                "showLegend": true
              },
              "styles": {}
            }
          ]
        },
        {
          "id": "col-pie",
          "type": "column",
          "props": {},
          "styles": {},
          "children": [
            {
              "id": "chart-pie",
              "type": "chart-pie",
              "props": {
                "datasourceId": "ds-region",
                "title": "Regional Distribution",
                "labelField": "region",
                "valueField": "totalRevenue",
                "showLegend": true
              },
              "styles": {}
            }
          ]
        }
      ]
    },
    {
      "id": "hr-mid",
      "type": "horizontal-line",
      "props": {
        "thickness": 1,
        "marginTop": 8,
        "marginBottom": 12
      },
      "styles": {}
    },
    {
      "id": "hdr-detail",
      "type": "header",
      "props": {
        "level": "h3",
        "content": "Detailed Transactions"
      },
      "styles": {
        "marginBottom": 8
      }
    },
    {
      "id": "txt-detail-desc",
      "type": "text",
      "props": {
        "content": "Click column headers to sort. Use \"Copy Data\" to export to clipboard."
      },
      "styles": {
        "textColor": "var(--eui-text-muted)",
        "fontSize": 12,
        "marginBottom": 8
      }
    },
    {
      "id": "tbl-1",
      "type": "table",
      "props": {
        "datasourceId": "ds-sales",
        "columns": [
          {
            "id": "c-region",
            "field": "region",
            "label": "Region",
            "sortable": true
          },
          {
            "id": "c-product",
            "field": "product",
            "label": "Product",
            "sortable": true
          },
          {
            "id": "c-quarter",
            "field": "quarter",
            "label": "Quarter",
            "sortable": true
          },
          {
            "id": "c-revenue",
            "field": "revenue",
            "label": "Revenue ($)",
            "align": "right",
            "sortable": true
          },
          {
            "id": "c-units",
            "field": "units",
            "label": "Units Sold",
            "align": "right",
            "sortable": true
          }
        ],
        "enableSorting": true,
        "enableCopyData": true
      },
      "styles": {}
    },
    {
      "id": "hr-bottom",
      "type": "horizontal-line",
      "props": {
        "thickness": 1,
        "marginTop": 16,
        "marginBottom": 8
      },
      "styles": {}
    },
    {
      "id": "txt-disclaimer",
      "type": "text",
      "props": {
        "content": "Disclaimer: This report contains sample data for demonstration purposes only. Revenue figures are fictional and do not represent actual business performance. Generated by FluxoUI Report Viewer."
      },
      "styles": {
        "fontSize": 10,
        "textColor": "var(--eui-text-muted)",
        "fontStyle": "italic"
      }
    }
  ],
  "globalStyles": {
    "fontFamily": "Inter, system-ui, sans-serif",
    "headings": {},
    "table": {
      "headerBackground": "var(--eui-bg-subtle)",
      "headerColor": "var(--eui-text)",
      "alternateRowColor": "var(--eui-hover)",
      "cellBorder": "1px solid var(--eui-border-subtle)"
    },
    "pageSetup": {
      "size": "A4",
      "orientation": "portrait",
      "marginTop": 10,
      "marginRight": 10,
      "marginBottom": 10,
      "marginLeft": 10
    }
  },
  "breakpoints": [
    {
      "key": "xs",
      "maxWidth": 480,
      "label": "Mobile"
    },
    {
      "key": "sm",
      "maxWidth": 768,
      "label": "Tablet"
    },
    {
      "key": "md",
      "maxWidth": 1024,
      "label": "Laptop"
    },
    {
      "key": "lg",
      "maxWidth": 1440,
      "label": "Desktop"
    },
    {
      "key": "xl",
      "maxWidth": null,
      "label": "Wide"
    }
  ]
}

Import

// Base styles (once in your app entry)
import 'fluxo-ui/styles';

// Report Builder component and types
import { ReportBuilder } from 'fluxo-ui/report-builder';
import type {
  ReportDefinition,
  ReportBuilderProps,
  DatasourcePlugin,
  AvailableSubReport,
} from 'fluxo-ui/report-builder';

Basic Usage

const [definition, setDefinition] = useState<ReportDefinition>();

<ReportBuilder
  definition={definition}
  onChange={setDefinition}
  datasourcePlugins={[myPlugin]}
  availableSubReports={[{
    id: 'detail',
    label: 'Detail Report',
    parameters: [{ name: 'id', label: 'Record ID', type: 'string' }],
  }]}
/>

ReportBuilder Props

definition
ReportDefinition

Initial or controlled report definition JSON.

onChange
(def: ReportDefinition) => void

Fires on every definition change.

datasourcePlugins
DatasourcePlugin[]

Registered datasource type plugins.

parameterPlugins
CustomParameterPlugin[]

Optional custom parameter type plugins.

availableSubReports
AvailableSubReport[]

Sub-reports the designer can reference. Include parameters array for auto-discovery.

layoutState
DockedLayoutState

Controlled panel layout state for persistence.

onLayoutChange
(state: DockedLayoutState) => void

Fires on panel layout change.

panelConfig
Record<string, { userCanMove?, userCanClose? }>

Per-panel move/close overrides (toolbox, datasource, properties, styles, console, parameters).

breakpoints
ReportBreakpoint[]

Responsive breakpoints for panel layout.

templates
ReportTemplate[]

Available report templates.

onSaveTemplate
(template: ReportTemplate) => void

Called when user saves a template.

onDeleteTemplate
(templateId: string) => void

Called when user deletes a template.

onLoadTemplate
(template: ReportTemplate) => void

Called when user loads a template.

enableMultiTab
booleanfalse

Enable multi-tab editing mode.

tabs
ReportTab[]

Array of tabs when multi-tab is enabled.

activeTabId
string

Currently active tab ID.

onTabChange
(tabId: string) => void

Called when active tab changes.

onTabClose
(tabId: string) => void

Called when a tab is closed.

className
string

Additional CSS class.

style
CSSProperties

Inline styles.

Key Types

Component Types

Drag-and-drop these from the Toolbox panel:

headertextimagehorizontal-linecolumnstabtablechart-barchart-linechart-piechart-donutcanvassub-report

Parameter Types

Available parameter input types for end-user filtering:

textmasked-editnumericdate-pickerdate-range-pickerdropdownradio-buttonmulti-selectchipscheckbox

Expression Syntax

Datasources.mySource.fieldName    // datasource field
Parameters.myParam                 // parameter value
Field.fieldName                    // current row field (in tables)
Sum(Datasources.sales.amount)      // aggregate function
IIf(Parameters.year > 2024, "New", "Old")  // conditional

Features

Drag & Drop Canvas

Drag components from the toolbox onto a visual design surface. Reorder, nest, and organize with intuitive DnD.

Datasource Plugins

Connect to any data source via plugins — Static JSON, HTTP/REST, CSV, or build your own custom plugin.

Expression Engine

Bind any property to dynamic expressions using Datasources, Parameters, and Field references with autocomplete.

Parameter System

Define typed report parameters (text, numeric, date, dropdown, etc.) with validation, defaults, and visibility rules.

Multi-tab Editing

Edit multiple reports in parallel with separate undo/redo stacks per tab.

Undo / Redo

Full undo/redo history (50 levels) with Ctrl+Z / Ctrl+Y keyboard shortcuts.

Component Library

14 component types: Header, Text, Image, Table, Charts (bar/line/pie/donut), Columns, Tabs, Canvas, Sub-report.

Style Editor

Visual style editor with Typography, Background, Border, Spacing, Sizing, and Visibility sections.

Template System

Save, load, and manage report templates. Let users start from pre-built designs.

Canvas Free-form

Absolute positioning with grid snapping, alignment guides, multi-select (Ctrl+Click), and lasso selection.

Docked Panel Layout

VS Code-style panel layout with dock, auto-hide, float, and resize. Fully customizable via panelConfig.

JSON Definition

Reports stored as pure JSON — serialize, persist, version control, and render anywhere with ReportViewer.