Skip to content
Build guide

Pillar B — Build guides

Published 2026-06-02 · Updated 2026-06-18 · By Avinash Chandan, Founder, Navamsha

Add a Daily Panchang Widget in 10 Lines of Code

A daily Panchang widget shows today's Hindu calendar elements — tithi, nakshatra, yoga, karana, and vara — for a given location. With Navamsha's Panchang API you can fetch all of that in a single lightweight call and render it in roughly ten lines of client or server code.

The minimal fetch

Pass today's date plus latitude and longitude. Mumbai coordinates work for a quick test; swap in the user's location for production. Full endpoint docs live at /apis/panchang.

TypeScript — ~10 lines (via your server proxy)

const today = new Date().toISOString().slice(0, 10);
const q = new URLSearchParams({ date: today, latitude: "19.0760", longitude: "72.8777" });
const res = await fetch(`/api/panchang?${q}`); // your Route Handler adds X-API-Key
const { data } = await res.json();
const row = `${data.tithi?.name ?? data.tithi} · ${data.nakshatra?.name ?? data.nakshatra} · ${data.vara}`;
document.getElementById("panchang")!.textContent = row;

JavaScript — direct server call (Node / edge function)

const res = await fetch(
  `https://api.navamsha.in/api/v1/panchang/daily?date=2026-06-16&latitude=19.0760&longitude=72.8777`,
  { headers: { "X-API-Key": process.env.NAVAMSHA_API_KEY } }
);
const { data, meta } = await res.json();
console.log(data.tithi, data.nakshatra, meta.ayanamsa);

curl — verify before wiring UI

curl -G "https://api.navamsha.in/api/v1/panchang/daily" \
  -H "X-API-Key: YOUR_API_KEY" \
  --data-urlencode "date=2026-06-16" \
  --data-urlencode "latitude=19.0760" \
  --data-urlencode "longitude=72.8777"

Where to put this in your app

  • Homepage hero — 'Today's Panchang for Mumbai' with a city picker.
  • Sidebar widget on a temple, festival, or muhurta landing page.
  • React Server Component that revalidates once per day (next: { revalidate: 86400 }).
  • Mobile WebView shell — one fetch on app open, cache until local midnight.

Optional: richer daily data

The daily endpoint covers core elements in one credit. When you need choghadiya windows or hora periods, add /api/v1/panchang/choghadiya and /api/v1/panchang/hora as separate calls — still lightweight on the free tier.

Python — dashboard cron job

import httpx, os
from datetime import date

r = httpx.get(
    "https://api.navamsha.in/api/v1/panchang/daily",
    headers={"X-API-Key": os.environ["NAVAMSHA_API_KEY"]},
    params={"date": date.today().isoformat(), "latitude": 28.6139, "longitude": 77.2090},
)
p = r.json()["data"]
print(f"Delhi · {p.get('tithi')} · {p.get('nakshatra')}")
Panchang day boundaries follow local sunrise at the given coordinates. Always pass accurate latitude and longitude — not just city name strings.

FAQ

Why proxy through /api/panchang instead of calling Navamsha from the browser?

Your API key must stay secret. A thin server proxy (Next.js Route Handler, Cloudflare Worker, etc.) attaches the X-API-Key header. The widget then calls your own /api/panchang URL with no credentials in client code.

How often should I refresh the widget?

Tithi and nakshatra can change mid-day. For a homepage widget, refreshing every few hours or at least once after local sunrise is reasonable. For a static 'today' card, revalidate daily at midnight local time.

Which Panchang endpoint is best for a simple widget?

GET /api/v1/panchang/daily returns tithi, nakshatra, yoga, karana, and vara in one call (1 credit). See /apis/panchang for choghadiya, hora, and muhurta routes when you expand.

Does timezone matter?

Navamsha computes local sunrise and day boundaries from latitude and longitude. You do not pass a separate timezone string for daily Panchang — coordinates define the location context.