Free for any website
Embed live sky widgets on your site
Twelve live sky widgets, led by the Observing Planner: when tonight is clear and moonless at your site, and what to aim at. Also the dark nights ahead, the next eclipse from your site, a live moon phase, sunrise and sunset and more. Paste one snippet and the widget keeps itself current.
- Nine of the twelve computed for your location
- Free, with no account, no API key and no ads
- One copy-paste snippet per widget
Build your widget Design a whole page
Just want tonight's Moon? Copy the Moon card
<iframe src="https://www.cyclecalcs.com/embed/moon.html?theme=auto&size=card"
title="Moon phase and illumination - CycleCalcs" width="360" height="220" frameborder="0" loading="lazy"
style="border:0;width:100%;max-width:360px"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe>
<p style="font:12px/1.4 system-ui,sans-serif;margin:.35em 0 0;max-width:360px;text-align:right;opacity:.8">
<a href="https://www.cyclecalcs.com/moon-phase-calendar.html">Powered by CycleCalcs</a>
</p>The live moon phase card, sized for a sidebar, in each reader's own light or dark theme. It needs no location and no account.
Pick a widget and see it on a page
Every widget here runs live in a sample web page, and the ones that need a place use the location you set. Dress it to match your website, then copy the code below. The page around it is a mock-up, scaled to fit.
Choose a widget
For observatories and imagers
Tonight's clear, moonless window from the cloud forecast, the nights ahead, and what to aim at, with photos of the showpieces.
Moonless dark for the next 7 to 30 nights: tonight's window, the best run ahead, and a dusk-to-dawn strip for every night.
The weeks ahead at your site: new and full Moons, meteor peaks judged against your Moon, planet events, the best dark run and clock changes.
Sunset, the three dusks, moonrise and moonset, the three dawns and sunrise, with the next event marked. Add your own rules, such as roof open at civil dusk, in the widget playground.
The best Messier and Caldwell objects tonight, with altitude curves and distance from the Moon. Add a smart telescope's frame check in the widget playground.
For any sky site
The next solar eclipse seen from your site: how much of the Sun is covered, a countdown, a sky view you can play from first to last contact, and the contact times.
Tonight's Moon and the planets up after dusk, with a horizon map and the next eclipse.
A live countdown to the next eclipse anywhere on Earth, with the next solar and lunar eclipse by type, date and Saros series.
The next morning or evening when three or more planets are up together, with a horizon map.
Tonight's phase drawn live, the percent lit, and the next full and new Moon. Its in-page version, with no iframe, adds moonrise and moonset once you set a location.
Sunrise, sunset, day length and twilight, with a day arc showing where the Sun is now, on your site's own clock.
Where we are in the sky's great cycles: the Moon phase, the seasons, the Jupiter-Saturn conjunction and the solar cycle. No location needed.
Set your location
Showing Central USA (a sample, for the preview only)
Your snippet carries the location you choose here. Widgets that print clock times carry its time zone too, so they show that place's clock with daylight saving applied.
Fit it to your site
The moon widget comes two ways. The iframe works on any host that allows one. The in-page version renders straight into your HTML with no iframe, and reserves its own box so the card does not resize once the numbers arrive.
The live preview needs JavaScript. The snippet below is complete either way.
- The CycleCalcs mark goes, so the embed carries no visible branding
- An accent color of yours, if you want one
Nothing else changes. Same numbers, same engine, same accuracy, and the widget keeps working when a license lapses: the branding simply comes back.
Copy the embed code
Paste this where you want the widget to appear. Please keep the caption link: that one visible link back to CycleCalcs is what supports the free widget, and it is the only thing the widgets ask for.
The preview above uses a sample location. Your code carries no location until you set yours in the builder.
Plain iframe (recommended: works on any host that allows iframes)
<iframe src="https://www.cyclecalcs.com/embed/planner.html?theme=auto&size=card"
title="Observing planner - CycleCalcs" width="360" height="1000" frameborder="0" loading="lazy"
style="border:0;width:100%;max-width:360px"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" allow="geolocation"></iframe>
<p style="font:12px/1.4 system-ui,sans-serif;margin:.35em 0 0;max-width:360px;text-align:right;opacity:.8">
<a href="https://www.cyclecalcs.com/today.html">Powered by CycleCalcs</a>
</p>Auto-resizing script (the card grows and shrinks with its content)
<a class="cyclecalcs-widget" data-widget="planner" data-theme="auto" data-size="card"
href="https://www.cyclecalcs.com/today.html">Powered by CycleCalcs</a>
<script async src="https://www.cyclecalcs.com/embed.js"></script>The plain iframe has a fixed height. Widgets whose content changes from night to night, such as the Observing Planner, can run taller, and the card then scrolls inside its frame; the auto-resizing script sizes itself. Some platforms strip script tags from posts but still allow iframes. On those, use the plain iframe version; it needs no JavaScript from us and works anywhere iframes are allowed. WordPress.com removes both until a paid plan's hosting features are on, so there the WordPress recipe applies.
In your page, no iframe
<a href="https://www.cyclecalcs.com/moon-phase-calendar.html"
class="cyclecalcs-moon" data-size="card" data-theme="auto">Powered by CycleCalcs</a>
<script async src="https://www.cyclecalcs.com/widget.js"></script>This one renders straight into your page inside its own isolated style scope: no iframe, about 6 KB compressed (14 KB of source), fetched once, and one cached call to the public API per view. Its own box is reserved before anything loads, so the card does not resize once the numbers arrive; the anchor itself is only a line of text until the script replaces it, so give its wrapper a min-height if it sits above your own content and you do not want that content to move when it loads.
Take the caption off: the widget license
Every widget on this page reads a license key, and a key valid for the domain it is running on does exactly two things. The CycleCalcs mark stops being shown, so the embed carries no visible branding, and an accent color replaces the CycleCalcs accent with one of yours. That is the whole list. A license changes how the widget looks and never what it says: the numbers, the engine, the refresh and the accuracy are the same free ones, and there is no paid accuracy tier here.
For one domain and every subdomain under it. One year is 366 days, counted from the moment you go to the payment page. No auto-renewal.
A bare hostname: no https://, no path, no port.
Payment is taken by Stripe on a page Stripe hosts, and Stripe is the merchant of record. Your key is on screen and in your inbox the moment it settles. Refunds within 30 days, no reason needed: the terms of sale say exactly what the license covers.
Already bought one?
Paste the key from your purchase email. It is checked here against the same endpoint the widget itself calls, and then written into the snippet above.
No key yet. The snippet above is the free one until you paste one in.
Building a whole page?
The widget playground starts you on a sample observatory status page or astronomy blog. Drag widgets on, resize and arrange them around your own content, check the layout on a phone, and copy the code for the whole page in one go.
Who these are for
The observing planner with its cloud forecast, beside your roof status and your seeing forecast.
Try the Observing PlannerNew Moons, meteor showers and dark runs judged for your site, so guests can pick their night.
Try Coming UpTonight's best targets, with the hours each one is well placed, on your homepage.
Try Tonight's TargetsA live Moon, tonight's sky or an eclipse countdown beside your posts.
Try What's Up TonightIf we change the widget
The two loader files a snippet points at, /embed.js and /widget.js, are frozen public contracts: a breaking change ships as a new file beside them and never as an edit to the one your pages already load. Everything behind them is versioned and cached immutably. That is not a promise you have to take on trust from this page: it is the same commitment written into the terms of sale.
The link under the widget
Every snippet on this page places one small caption link in your page, right under the card: the widget's name, linking to the matching CycleCalcs tool. It is the only attribution you place in your own HTML: it sits in your page rather than hidden inside the frame, it says what it links to, and you choose its wording from the Link text menu above. The card itself also carries a small CycleCalcs mark. A per-domain license removes that mark and sets an accent color of yours; it is not on sale yet, so if you want it, write to info@cyclecalcs.com and we will tell you when it is.
Troubleshooting
- The widget area is blank. If your site sends a
Content-Security-Policyheader, the iframe widgets needframe-src https://www.cyclecalcs.com; without it both of their snippet versions fail the same way. Their script version also needsscript-src https://www.cyclecalcs.com. The host-DOM moon widget creates no iframe: it needsscript-src https://www.cyclecalcs.comandconnect-src https://www.cyclecalcs.com. - The script version does nothing. Your platform probably strips
<script>tags. Use the plain iframe version instead. - Your site is a single-page app. If the anchor is rendered after the page loads, call
window.CycleCalcsWidget.scan()for the iframe widgets, orwindow.CycleCalcsMoon.scan()for the in-page moon widget, and the loader will pick it up. They are separate loaders and each exposes only its own global. - The card is clipped or shows a scrollbar. Use the auto-resizing script version, or keep the width and height the builder generated for your chosen size.
- The location-based widgets show Greenwich. That default makes no guess about where a reader is. Set your own default location in the builder, or let readers tap "use my location" inside the widget.
Frequently asked questions
Is the widget free to use?
Yes. Every widget on this page is free for any website, personal or commercial. There is no account and no API key.
The original six iframe widgets and Eclipse From Here compute everything in your visitor's browser with the open-source Astronomy Engine, so they call nothing and have no usage limit at all. Of the five observatory widgets, Tonight's Targets computes in the browser too, while Dark Nights Ahead, Tonight's Schedule and Coming Up read cached answers from our public API from inside their frame, and the Observing Planner reads those answers plus a cloud forecast that our server fetches from MET Norway. The newer moon widget instead reads one cached answer per view from our public API, which is also free and needs no key, at that API's anonymous limit of 5,000 requests a day. That limit counts each visitor's own browser separately, so your traffic cannot exhaust it. Answers are cached for 30 seconds and may be served a little after that, which moves no figure the card shows, and it keeps the widget small enough to render inside your own page.
What does a widget load, and when?
The iframe widgets load lazily after your own content. The original six and Eclipse From Here compute the astronomy in the visitor's browser. Of the five observatory widgets, Tonight's Targets computes in the browser too, while Dark Nights Ahead, Tonight's Schedule, Coming Up and the Observing Planner send the site coordinates in the snippet to our servers from inside their frame. For its cloud forecast, our server sends those coordinates to MET Norway, rounded to two decimal places (about a kilometer). The newer moon widget renders inside your page and makes one request per view to our public API, carrying the coordinates you put in the snippet if you set any. The Planet Parade, What's Up Tonight and Sunrise & Sunset widgets ask for a location only when the visitor taps their use-my-location button, and Eclipse From Here and the observatory widgets offer that button only when the snippet sets no location, and then send the visitor's coordinates instead.
Why is there a CycleCalcs link under the widget?
That caption link is part of the widget: it credits the live data and takes readers to the full tool on CycleCalcs. It sits in your page's own HTML so readers and search engines can follow it.
The widget does not appear on my site. What should I check?
It depends which widget. The iframe widgets need frame-src https://www.cyclecalcs.com in your Content-Security-Policy, and their script version also needs script-src https://www.cyclecalcs.com. The newer moon widget builds no iframe, so frame-src does nothing for it: it needs script-src https://www.cyclecalcs.com and connect-src https://www.cyclecalcs.com instead. If your platform strips script tags (common on hosted CMSs), use the plain iframe code, which needs no JavaScript. If your policy also blocks inline styles, the plain iframe code loses its own styling: add iframe[src^='https://www.cyclecalcs.com/embed/']{border:0;width:100%} to your stylesheet.
How accurate are the widget's numbers?
The widgets run the same engine as every CycleCalcs tool and are reliable for roughly the years 1700 to 2200. An angular bound is the wrong unit for a clock time, so here is the checkable one: sunrise and sunset matched the US Naval Observatory's published minute at every site we tested, 24 of 24 events across 12 locations from 70 degrees north to 34 degrees south, on 30 August 2026. Times are for the Sun's upper limb at a geometric altitude of -0.833 degrees, 16 arcminutes of semidiameter plus 34 of standard refraction, which is the definition USNO uses. Observer elevation is not applied: the horizon dips by about 1.75 arcminutes times the square root of your height in meters, so at 2,000 m sunrise arrives roughly eight minutes earlier than the widget says. That test covers ordinary rise and set at sea level on one date; it does not cover polar day or night, and it is not a claim about seconds, because USNO publishes whole minutes. Separately, a clock time is only civil time if the snippet carries a time zone: one built here does, and an older one without it shows time derived from longitude, which is three hours out in western China or western Spain. The method is public. Dates are UTC unless the widget says otherwise.
Want the full versions of these tools? See the Moon Phase Calendar, the Eclipse & Saros Explorer, the Planet Parade Tracker, Today in the Sky, the Sunrise & Sunset Calculator and Where Are We Now.
Building for WordPress, React or a hand-rolled page? The build guide put the live sky on your website walks all five routes, from this builder's two-line snippet to calling the API directly, and the developer hub collects everything else we make for developers.