Reports

Report

Form to finished branded report, as a PDF download or inline HTML

<roxy-report>

Preview and code

Theme

Loading the component...

HTML

<!-- Optional: Rosewater theme (drop this line for the default look) -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css"> -->
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" defer></script>
<roxy-report report="natal" publishable-key="pk_live_YOUR_KEY" hide-sections="hint"></roxy-report>

With a publishable key the component draws its own form and fetches the reading. Set data instead to render a response you already have.

Install

npm install @roxyapi/ui-react

React

import { RoxyReport } from '@roxyapi/ui-react';

export function Report({ data }) {
  return <RoxyReport data={data} />;
}

Install

npm install @roxyapi/ui-vue

Vue

<script setup>
import { RoxyReport } from '@roxyapi/ui-vue';

defineProps(['data']);
</script>

<template>
  <RoxyReport :data="data" />
</template>

Install

npx shadcn@latest add https://cdn.jsdelivr.net/gh/RoxyAPI/ui@latest/registry/report.json

app/page.tsx

import { createRoxy } from '@roxyapi/sdk'
import { RoxyReport } from '@/components/roxy-ui/report'

const roxy = createRoxy(process.env.ROXY_API_KEY!)

export default async function Page() {
  const { data } = await roxy.reports.generateNatalReport({ body: { date: '1990-07-15', time: '14:30:00', latitude: 40.7128, longitude: -74.006, timezone: 'America/New_York' } })
  return <RoxyReport data={data} />
}

The registry adds a typed component file to your repo. The page fetches with your secret key on the server, so no key reaches the browser.

Paste into your site

<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/widgets.js" defer></script>
<div data-roxy-widget="report" data-publishable-key="pk_live_YOUR_KEY" data-hide-sections="hint"></div>

Paste into WordPress, Squarespace, Wix, Shopify or any page that accepts HTML. Add your publishable key and a theme on the widgets page.

Endpoints

Endpoint	Returns
POST `/reports/natal`	Natal chart report - Branded PDF report API
POST `/reports/synastry`	Synastry report - Branded PDF report API
POST `/reports/kundli`	Kundli report - Branded PDF report API
POST `/reports/matchmaking`	Kundli matching report - Branded PDF report API
POST `/reports/yearly-forecast`	Yearly forecast report - Branded PDF report API
POST `/reports/human-design`	Human Design report - Branded PDF report API
POST `/reports/bazi`	BaZi report - Branded PDF report API
POST `/reports/numerology`	Numerology report - Branded PDF report API
POST `/reports/tarot`	Tarot reading report - Branded PDF report API

Attributes

Attribute	Type	Description
`report`	`'natal' \| 'synastry' \| 'kundli' \| 'matchmaking' \| 'yearly-forecast' \| 'human-design' \| 'bazi' \| 'numerology' \| 'tarot'`	Which report the form asks for and the visitor receives, by its id. Unset, the first report is used.
`format`	`'pdf' \| 'html'`	pdf offers the finished document as a download; html shows it in place on the page. Defaults to pdf.
`brand-name`	`string`	Your business or practitioner name, printed on the cover and every page.
`brand-logo`	`string`	An HTTPS URL of your logo, printed on the cover.
`brand-footer`	`string`	A line printed at the foot of every page, such as a disclaimer or a booking note.
`theme`	`'practitioner' \| 'eucalyptus' \| 'kiln' \| 'moonlit' \| 'celeste'`	The theme preset the document is printed in, a key from `themes[]` in components-catalog.json. Any other value is ignored.
`data-endpoint`	`string`	Endpoint path for built-in self-fetch, e.g. "astrology/natal-chart". Optional: with a publishableKey or submitUrl and no endpoint, the component fetches its default endpoint, or the one its config prop (mode, period, type, spread, detail) selects. Set it to render any other endpoint the component draws. Pass `data` and no key for controlled mode.
`method`	`'GET' \| 'POST'`	HTTP method for the self-fetch request. Defaults to the method of the endpoint in use, and to POST beside an explicit endpoint.
`publishable-key`	`string`	Browser-safe publishable key (pk_) for self-fetch. A secret key is refused client-side and never sent.
`base-url`	`string`	Override the API origin for self-hosted or proxied deployments. Absolute, or relative to the page for a same-origin route.
`spec-url`	`string`	Override the OpenAPI spec URL the self-fetch form introspects.
`submit-url`	`string`	Your own backend route, which holds the secret key. Every request the component makes, the city search included, is POSTed there as `{ path, method, body, query }` instead of calling RoxyAPI directly, and the component renders the JSON your route returns, so no key of any kind reaches the browser.
`submit-context`	`string`	An object of your own, sent to your submitUrl route as `context` beside the request, so a page can attach its own verification data to a proxied submission. Passed through untouched and never read by the component: what it holds is for your page and your route to agree on. Unset, nothing is added and the route receives the request exactly as before. Rides the submitUrl path only; a direct call sends what the endpoint declares.
`location-url`	`string`	Where the self-fetch form city search sends its GET, absolute or relative to the page. Optional beside submitUrl, which carries the city search too; set it only to send the city search somewhere else. Unset with no submitUrl, the search calls the public location endpoint.
`remember`	`boolean`	Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default.
`hide-readings`	`boolean`	Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely.
`hide-sections`	`string`	Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error.
`brand-color`	`string`	Brand colour as `#rgb` or `#rrggbb`, painted as `--roxy-primary` on this component. Any other value is ignored.
`brand-accent`	`string`	Brand accent as `#rgb` or `#rrggbb`, painted as `--roxy-accent` with its ink and focus ring re-derived. Any other value is ignored.
`font`	`'fraunces-jost' \| 'jost' \| 'geist' \| 'system'`	A font pair from `fonts[]` in components-catalog.json, for body text and headings; import `@roxyapi/ui/styles/fonts/{key}.css` once to load its files. Any other value is ignored.
`hemisphere`	`'north' \| 'south'`	The hemisphere a Moon the component draws is seen from: `south` turns it half a circle. Absent reads as north.
`submit-label`	`string`	Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast).
`error-message`	`string`	Your own words for a failed self-fetch the API did not explain (a dropped connection, a response with no message). A failure the API explains, such as a spent quota, reads as the API worded it.
`attribution`	`string`	Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode.

Sections you can hide

Pass any of these to hide-sections, or style them with ::part().

carddocumentdownloadheader

Events

Each event bubbles out of the component, so listen on the element or any ancestor.

Event	Description
`roxy-location-select`	Provides the selected city with its coordinates and timezone.
`roxy-render-error`	Reports a failed render before showing the response as structured data or an empty state.
`roxy-spec-error`	Reports a failure to load the form schema, including the spec URL and error message.
`roxy-submit`	Provides validated form values, the endpoint, query fields, and whether the form stays visible.
`roxy-validation-error`	Reports missing required inputs or a refused client-side API key.