Headless-Statusseite.
Deine UI, unsere Daten.
Unsere Statusseite gefällt dir nicht? Bau deine eigene. Jedes Byte, das die gehostete Version zeigt, ist über eine public REST API und einen Realtime-SSE-Stream verfügbar. Volle OpenAPI-Spec.
Warum Headless
Alle anderen Statusseiten-Anbieter sperren dich in ihr Template. Wir lassen dich mit den Daten weggehen und trotzdem weiter nutzen.
Deine Marke, deine Pixel
Exakt zu deiner Hauptseite passen. Custom-Fonts, Animationen, Layouts. Kein Vendor-Footer, keine branded Headers.
Überall rendern
Next.js Server Component, Astro Island, statisches HTML, Slack-Bot, CLI, In-App-Banner. Derselbe Endpoint.
Auf deiner Domain halten
Kein CNAME nötig. Vom eigenen Server abrufen, in der App rendern. Kunden sehen nie eine Drittanbieter-URL.
Integrieren statt migrieren
Status-Widget in deine Doku, Admin-Panel oder Kundenportal einfügen, ohne Nutzer off-site zu leiten.
Ein Fetch. Alles, was du brauchst.
GET auf den Status-Endpoint mit deinem Slug. JSON parsen. Rendern.
curl https://api.pulseapi.tech/status/acme{
"page": {
"id": "acme",
"title": "Acme API Status",
"language": "en",
"customDomain": "status.acme.com"
},
"overallStatus": "operational",
"endpoints": [
{
"id": "ep_1",
"name": "API",
"status": "operational",
"uptime24h": 99.98,
"avgResponseTime": 127,
"sparkline": [120, 118, 131, 127, 125],
"uptime90d": [100, 100, 99.9, 100, ...]
}
],
"components": [...],
"incidents": [...]
}In deinen Stack einbauen
React
export default async function Status() {
const res = await fetch('https://api.pulseapi.tech/status/acme', {
next: { revalidate: 30 },
})
const data = await res.json()
return (
<section>
<h1>{data.page.title}</h1>
<StatusBanner status={data.overallStatus} />
{data.endpoints.map((ep) => (
<EndpointRow key={ep.id} endpoint={ep} />
))}
</section>
)
}Vue / Nuxt
<script setup lang="ts">
const { data } = await useFetch('https://api.pulseapi.tech/status/acme', {
key: 'status',
server: true,
})
</script>
<template>
<h1>{{ data.page.title }}</h1>
<p>Status: {{ data.overallStatus }}</p>
<ul>
<li v-for="ep in data.endpoints" :key="ep.id">
{{ ep.name }} — {{ ep.status }} ({{ ep.uptime24h }}%)
</li>
</ul>
</template>Vanilla JS
async function renderStatus() {
const res = await fetch('https://api.pulseapi.tech/status/acme')
const data = await res.json()
document.getElementById('status').innerHTML = `
<h2>${data.page.title}</h2>
<p>${data.overallStatus}</p>
`
}
renderStatus()
setInterval(renderStatus, 30_000)Realtime via SSE — kein Polling
Abonniere Incident-Updates, Status-Übergänge und Check-Ergebnisse, sobald sie ankommen.
const es = new EventSource('https://api.pulseapi.tech/sse/status/acme')
es.addEventListener('status:changed', (e) => {
const payload = JSON.parse(e.data)
updateBanner(payload.status)
})
es.addEventListener('incident:created', (e) => {
showNotification(JSON.parse(e.data))
})
es.addEventListener('check:completed', (e) => {
const check = JSON.parse(e.data)
appendToSparkline(check.endpointId, check.responseTime)
})Framework-spezifische Guides
Wähle deinen Stack — wir haben einen Guide mit Copy-Paste-Code.
FAQ
Was ist eine Headless-Statusseite?
Eine Headless-Statusseite trennt Daten (Uptime, Komponenten, Incidents) von der UI. Statt im Template eines Anbieters festzusitzen, holst du die Daten per API und renderst sie wie du willst — eigene React-Komponente, Server-rendered Page, sogar ein Terminal-Dashboard.
Warum nicht einfach die gehostete Statusseite nutzen?
Kannst du — funktioniert out-of-the-box. Aber wenn deine Marke ein Custom-Layout, enge Integration mit der Hauptseite oder Rendering auf eigener Domain ohne CNAME braucht, gibt dir Headless volle Freiheit. Dieselben Daten, beliebige UI.
Hat die API Rate-Limit?
Der öffentliche Status-Endpoint ist auf heavy read traffic ausgelegt (er treibt unsere eigenen gehosteten Statusseiten und Badges). Vernünftiges Polling ist okay. Bei sehr hohem Traffic Antworten 10–30s cachen oder SSE-Stream abonnieren.
Kann ich das mit einem Static-Site-Generator nutzen?
Ja. API zur Build-Zeit holen mit Next.js getStaticProps, Astro-Frontmatter oder Äquivalent. Für Live-Updates ISR/Revalidate mit kurzer TTL nutzen oder die Seite auf Server-rendered umstellen.
Was liefert die API zurück?
Statusseiten-Metadaten (Titel, Branding), Gesamtstatus, Endpoints mit Status und Uptime, Komponenten, aktive Incidents, 90-Tage-Uptime-Arrays für Uptime-Bars und Response-Time-Sparkline-Daten. Volle Spec unter api.pulseapi.tech/docs.
Brauche ich Authentifizierung?
Für den public Status-Endpoint — nein. Das ist dieselbe URL, die deine Kunden auf der gehosteten Version sehen würden. Für Dashboard-APIs (Endpoints erstellen, Incidents schreiben) brauchst du einen API-Key.
Kann ich Realtime-Updates statt Polling abonnieren?
Ja. Verbinde dich mit dem SSE-Endpoint unter /sse/status/:slug und empfange Statusänderungen, neue Incidents und Check-Ergebnisse live.
Wie handhabe ich Authentifizierung für private Statusseiten?
Org-API-Key im Dashboard generieren und als Authorization-Header senden, wenn du den Status-Endpoint vom Server abrufst. Key niemals im Browser exponieren.
Ship eine Statusseite nach deinen Bedingungen
Kostenloser Tarif, keine Kreditkarte. Gehostet, headless, oder beides.