# Quick Start

## Step 1: Load the Library

```html
<script src="https://cdn.jsdelivr.net/npm/nexabase-report/dist/nexabase-report.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexabase-report/dist/style.css">
```

## Step 2: Define Your Report

A minimal report JSON with a header band and one data band:

```json
{
  "metadata": {
    "name": "My First Report",
    "version": "1.0"
  },
  "layout": {
    "page": { "format": "A4", "orientation": "portrait" },
    "bands": [
      {
        "id": "rh",
        "type": "ReportHeader",
        "height": 80,
        "elements": [
          {
            "id": "title",
            "type": "Text",
            "x": 20,
            "y": 10,
            "width": 750,
            "height": 50,
            "content": "Sales Report",
            "style": { "fontSize": "24px", "fontWeight": "bold" }
          }
        ]
      },
      {
        "id": "db",
        "type": "DataBand",
        "height": 40,
        "dataSource": "main",
        "elements": [
          {
            "id": "client",
            "type": "Text",
            "x": 20,
            "y": 5,
            "width": 300,
            "height": 30,
            "content": "{{clientName}}",
            "style": { "fontSize": "12px" }
          },
          {
            "id": "amount",
            "type": "Text",
            "x": 330,
            "y": 5,
            "width": 150,
            "height": 30,
            "content": "{{amount}}",
            "style": { "fontSize": "12px", "textAlign": "right" }
          }
        ]
      }
    ]
  },
  "dataSources": [
    { "id": "ds1", "collection": "sales", "alias": "main", "enabled": true }
  ]
}
```

## Step 3: Mount the Viewer

```html
<nexa-viewer id="viewer"></nexa-viewer>

<script>
  window.NexaReport.registerNexaReport();

  const viewer = document.getElementById('viewer');

  viewer.definition = { /* paste report JSON above */ };
  viewer.data = [
    { clientName: 'Acme Corp', amount: 12500.00 },
    { clientName: 'Globex Inc', amount: 8300.50 },
    { clientName: 'Soylent Corp', amount: 15200.00 }
  ];
</script>
```

## Step 4: Export (optional)

```javascript
// Export to PDF
await viewer.exportPdf();

// Export to Excel
await viewer.exportExcel();

// Export to CSV
await viewer.exportCsv();
```

## Complete HTML Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NexaReport Quick Start</title>
  <script src="https://cdn.jsdelivr.net/npm/nexabase-report/dist/nexabase-report.umd.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexabase-report/dist/style.css">
</head>
<body>
  <nexa-viewer id="viewer" minimal></nexa-viewer>

  <script>
    NexaReport.registerNexaReport();

    const reportDef = {
      metadata: { name: 'Quick Start Demo', version: '1.0' },
      layout: {
        page: { format: 'A4', orientation: 'portrait' },
        bands: [
          {
            id: 'rh', type: 'ReportHeader', height: 80,
            elements: [{
              id: 't1', type: 'Text', x: 20, y: 10,
              width: 750, height: 50,
              content: 'Client Report',
              style: { fontSize: '24px', fontWeight: 'bold' }
            }]
          },
          {
            id: 'db', type: 'DataBand', height: 40, dataSource: 'main',
            elements: [
              { id: 'c1', type: 'Text', x: 20, y: 5, width: 300, height: 30,
                content: '{{clientName}}', style: { fontSize: '12px' } },
              { id: 'c2', type: 'Text', x: 330, y: 5, width: 150, height: 30,
                content: '{{amount}}', style: { fontSize: '12px', textAlign: 'right' } }
            ]
          }
        ]
      },
      dataSources: [{ id: 'ds1', collection: '', alias: 'main', enabled: true }]
    };

    const data = [
      { clientName: 'Acme Corp', amount: 12500 },
      { clientName: 'Globex Inc', amount: 8300 },
      { clientName: 'Soylent Corp', amount: 15200 }
    ];

    const viewer = document.getElementById('viewer');
    viewer.definition = reportDef;
    viewer.data = data;
  </script>
</body>
</html>
```

## Try the Examples

See the `examples/` folder in the repository for React, Angular, Blazor, and jQuery integrations.