---
layout: home

hero:
  name: "NexaReport"
  text: "Professional Report Designer & Viewer"
  tagline: "Vue 3 · TypeScript · WYSIWYG · Export to PDF/Excel/Word · 100% Client-Side"
  image:
    src: /logo.svg
    alt: NexaReport
  actions:
    - theme: brand
      text: Get Started
      link: /guide/getting-started
    - theme: alt
      text: View on GitHub
      link: https://github.com/nexabase/nexabase-report

features:
  - icon: 🎨
    title: WYSIWYG Designer
    details: Drag & drop report designer with ribbon, sidebar, snap-to-grid, i18n support (ES/EN/PT) and real-time preview.

  - icon: 📦
    title: Custom Element Viewer
    details: "<nexa-viewer> works in Vue, React, Angular, Svelte, Blazor, or plain HTML — no Vue dependency in the consumer."

  - icon: 📊
    title: Charts, Crosstabs, Tables
    details: ECharts integration (bar, line, pie, area, scatter), crosstab pivot tables, banded report model with data bands.

  - icon: 📄
    title: PDF, Excel, Word, CSV
    details: 100% client-side export. Native vector PDF, SheetJS Excel, docx Word, and UTF-8 BOM CSV — no server required.

  - icon: 🔑
    title: Commercial Licensing
    details: Designer supports license key activation (personal, business, enterprise). Watermark-free with valid license.

  - icon: 🌐
    title: CDN Ready
    details: One script tag to include in any project. No build step required for HTML demos or quick integrations.
---

<div class="vp-doc flex flex-col items-center justify-center min-h-[30vh] text-center px-6">
  <h2 class="mb-4 text-2xl font-bold text-[var(--vp-c-brand-1)]">Try it now — no install needed</h2>
  <div class="code-block w-full max-w-2xl rounded-lg overflow-hidden text-left">

```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">

<nexa-viewer id="viewer" minimal></nexa-viewer>

<script>
  NexaReport.registerNexaReport();

  const viewer = document.getElementById('viewer');
  viewer.definition = { /* your report JSON */ };
  viewer.data = [ /* your data array */ ];
</script>
```

  </div>
</div>