Live Atlas data on any page.
Each widget below is rendering against https://demo.atlas.fyi right now. Pick the embed style you prefer — a single web-component tag, an iframe, or the typed React hook from @atlas/widgets.
Quick start
pnpm add @atlas/widgets import "@atlas/widgets/web-component"; // then drop <atlas-widget kind="..." base-url="..." /> anywhere.
Catalog
slot-freshness
Slot Freshness
Live freshness budget for one vault — slots remaining vs the 150-slot stale threshold.
web-component snippet
<script type="module" src="https://demo.atlas.fyi/sdk/widgets/web-component.js"></script> <atlas-widget kind="slot-freshness" base-url="https://demo.atlas.fyi" vault-id="0x46c1f2c7e5c7e51b2a2cb0b1c4f2f6f7f9b1c2d3e4f5061728394a5b6c7d8e90" theme="dark" refresh-ms="5000"> </atlas-widget>
iframe fallback
<iframe src="https://demo.atlas.fyi/sdk/playground/freshness.html?embed=1&vault=0x46c1f2c7e5c7e51b2a2cb0b1c4f2f6f7f9b1c2d3e4f5061728394a5b6c7d8e90" loading="lazy" width="100%" height="220" style="border:1px solid var(--color-line);border-radius:6px" title="Atlas widget"></iframe>
rpc-latency
RPC Latency
Tier-A vs Tier-B p99 with budget colour bands. Refreshes every 5s.
web-component snippet
<script type="module" src="https://demo.atlas.fyi/sdk/widgets/web-component.js"></script> <atlas-widget kind="rpc-latency" base-url="https://demo.atlas.fyi" theme="dark" refresh-ms="5000"> </atlas-widget>
iframe fallback
<iframe src="https://demo.atlas.fyi/sdk/playground/infra.html?embed=1&panel=rpc-latency" loading="lazy" width="100%" height="200" style="border:1px solid var(--color-line);border-radius:6px" title="Atlas widget"></iframe>
proof-gen-latency
Proof-gen Latency
Current p50/p99 proof generation against the 75s SLO.
web-component snippet
<script type="module" src="https://demo.atlas.fyi/sdk/widgets/web-component.js"></script> <atlas-widget kind="proof-gen-latency" base-url="https://demo.atlas.fyi" theme="dark" refresh-ms="5000"> </atlas-widget>
iframe fallback
<iframe src="https://demo.atlas.fyi/sdk/playground/infra.html?embed=1&panel=proof-gen" loading="lazy" width="100%" height="200" style="border:1px solid var(--color-line);border-radius:6px" title="Atlas widget"></iframe>
bundle-landed-rate
Bundle Landed Rate
Last-5m landed-bundle ratio with healthy / warn / bad colour bands.
web-component snippet
<script type="module" src="https://demo.atlas.fyi/sdk/widgets/web-component.js"></script> <atlas-widget kind="bundle-landed-rate" base-url="https://demo.atlas.fyi" theme="dark" refresh-ms="5000"> </atlas-widget>
iframe fallback
<iframe src="https://demo.atlas.fyi/sdk/playground/infra.html?embed=1&panel=bundle-landed" loading="lazy" width="100%" height="220" style="border:1px solid var(--color-line);border-radius:6px" title="Atlas widget"></iframe>
tps
Solana TPS
True TPS + vote-removed TPS. Same series the public Observatory shows.
web-component snippet
<script type="module" src="https://demo.atlas.fyi/sdk/widgets/web-component.js"></script> <atlas-widget kind="tps" base-url="https://demo.atlas.fyi" theme="dark" refresh-ms="5000"> </atlas-widget>
iframe fallback
<iframe src="https://demo.atlas.fyi/sdk/playground/infra.html?embed=1&panel=tps" loading="lazy" width="100%" height="200" style="border:1px solid var(--color-line);border-radius:6px" title="Atlas widget"></iframe>
last-rebalance
Last Rebalance
Most recent rebalance event for one vault — slot, ratio diff summary, proof status.
web-component snippet
<script type="module" src="https://demo.atlas.fyi/sdk/widgets/web-component.js"></script> <atlas-widget kind="last-rebalance" base-url="https://demo.atlas.fyi" vault-id="0x46c1f2c7e5c7e51b2a2cb0b1c4f2f6f7f9b1c2d3e4f5061728394a5b6c7d8e90" theme="dark" refresh-ms="5000"> </atlas-widget>
iframe fallback
<iframe src="https://demo.atlas.fyi/sdk/playground/freshness.html?embed=1&vault=0x46c1f2c7e5c7e51b2a2cb0b1c4f2f6f7f9b1c2d3e4f5061728394a5b6c7d8e90&panel=last-rebalance" loading="lazy" width="100%" height="240" style="border:1px solid var(--color-line);border-radius:6px" title="Atlas widget"></iframe>
proof-of-reserve
Proof of Reserve
Most recent reserve attestation: attested vs reported balance + delta + age.
web-component snippet
<script type="module" src="https://demo.atlas.fyi/sdk/widgets/web-component.js"></script> <atlas-widget kind="proof-of-reserve" base-url="https://demo.atlas.fyi" vault-id="0x46c1f2c7e5c7e51b2a2cb0b1c4f2f6f7f9b1c2d3e4f5061728394a5b6c7d8e90" theme="dark" refresh-ms="5000"> </atlas-widget>
iframe fallback
<iframe src="https://demo.atlas.fyi/sdk/playground/freshness.html?embed=1&vault=0x46c1f2c7e5c7e51b2a2cb0b1c4f2f6f7f9b1c2d3e4f5061728394a5b6c7d8e90&panel=proof-of-reserve" loading="lazy" width="100%" height="220" style="border:1px solid var(--color-line);border-radius:6px" title="Atlas widget"></iframe>
Theming
Widgets read three CSS variables: --atlas-bg, --atlas-border, --atlas-fg. Set them on the parent element to match your design system, or pass theme="light" for the bundled light variant.