@astroway/ui

Astrology web components for any page: plain custom elements that work in HTML, WordPress, Vue, Svelte and React 19 without a wrapper. Charts are drawn by @astroway/render, the same code behind the AstroWay API /v1/render/* endpoints, so a wheel on your page matches the wheel the API returns.

npm install @astroway/ui

import '@astroway/ui';                 // every element
import '@astroway/ui/natal-wheel';     // or just one

Or from a CDN, no build step:

<script type="module" src="https://cdn.jsdelivr.net/npm/@astroway/ui/dist/cdn/index.js"></script>

A. Your data. Fetch on your server, hand the element the JSON. No request leaves the page, and any key class works because the browser never sees one.

document.querySelector('aw-natal-wheel').data = chartFromYourServer; // a /v1/chart response

A server template can write the same JSON into the attribute instead: <aw-natal-wheel data='<?= json_encode($chart) ?>'>.

B. Keyless. Elements backed by /v1/public/* need no key. They share the visitor's public budget of 30 units an hour; aw-synastry-score costs 3.

<aw-moon-phase lang="uk"></aw-moon-phase>
<aw-horoscope sign="leo" period="daily" lang="de"></aw-horoscope>
<aw-tarot-spread spread="three-card"></aw-tarot-spread>

C. Publishable key. Elements backed by keyed endpoints take a pk_ key created for your site in the dashboard, with its origin list, credit cap and endpoint scope. A secret aw_ key is refused before any request is made. key works too, outside React.

<aw-natal-wheel api-key="pk_live_..." date="1990-05-15" time="14:30"
  latitude="50.45" longitude="30.52" timezone-offset="3"></aw-natal-wheel>

React 19 renders custom elements directly. Two things differ from plain HTML: React keeps key for itself, so pass the key as api-key; and on a server-rendered page pass layer A data as a string, because React drops object props on the server and does not set them while hydrating.

'use client';
import '@astroway/ui/natal-wheel';
import '@astroway/ui/jsx'; // types the <aw-*> tags for TypeScript

export default function Chart({ chart }: { chart: unknown }) {
  return <aw-natal-wheel data={JSON.stringify(chart)} />;
}

The modules can be imported on the server: the tag goes out as plain HTML and draws once the browser loads the element.

aw-aspect-grid is about 560 px wide at its own size; in a narrower column it scales down and the orb labels get small. Add scroll to keep it at full size with horizontal scrolling instead.

Common attributes: lang (21 languages, falls back to the page's <html lang>), theme (light, dark, css), size. Theme with CSS custom properties: --aw-accent, --aw-fg, --aw-bg, --aw-bg-soft, --aw-border, and --aw-chart-bg for the chart background (transparent by default). With theme="css" the charts (aw-natal-wheel, aw-aspect-grid, aw-moon-phase) paint every colour through a variable with the light colour as fallback, so a page sets --aw-ring, --aw-fg, --aw-muted, --aw-chart-bg, --aw-benefic, --aw-malefic and the rest of the list on the SVG charts page on any ancestor and the chart follows. Variables cross the shadow root; class rules from the page do not, so style through variables here. Each element emits aw-error with { kind, message }, where kind is error, rate-limited or key.

MIT