Página de status headless.
Sua UI, nossos dados.
Não gostou da nossa página? Construa a sua. Cada byte que a versão hospedada mostra está disponível via API REST pública e stream SSE em tempo real. Spec OpenAPI completa.
Por que headless
Todos os outros provedores te prendem no template deles. Nós te deixamos levar os dados e continuar nos usando.
Sua marca, seus pixels
Combine exatamente com seu site principal. Fontes, animações e layouts personalizados. Sem footer do fornecedor, sem headers brandeados.
Renderize em qualquer lugar
Server component Next.js, island Astro, HTML estático, bot Slack, CLI, banner in-app. Mesmo endpoint.
Mantenha no seu domínio
Sem CNAME. Busque do seu servidor, renderize dentro do seu app. Clientes nunca veem URL de terceiros.
Integre, não migre
Adicione um widget de status na sua documentação, painel admin ou portal do cliente sem redirecionar para fora.
Um fetch. Tudo que você precisa.
GET no endpoint de status com seu slug. Parse o JSON. Renderize.
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": [...]
}Coloque na sua stack
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)Tempo real via SSE — sem polling
Assine atualizações de incidentes, transições de status e resultados de checks conforme chegam.
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)
})Guias por framework
Escolha sua stack — temos um guia com código copy-paste.
FAQ
O que é uma página de status headless?
Uma página de status headless separa os dados (uptime, componentes, incidentes) da UI. Em vez de estar preso no template de um fornecedor, você consome os dados por API e renderiza como quiser — seu próprio componente React, uma página server-rendered, até um dashboard de terminal.
Por que não usar sua página hospedada direto?
Pode — funciona de cara. Mas se sua marca precisa de layout custom, integração estreita com o site principal ou renderização no seu domínio sem CNAME, headless dá liberdade total. Mesmos dados, qualquer UI.
A API tem rate limit?
O endpoint público de status é projetado para tráfego de leitura pesado (alimenta nossas próprias páginas hospedadas e badges). Polling razoável funciona. Para tráfego muito alto, cacheie respostas por 10-30s ou assine o stream SSE.
Posso usar com um gerador de sites estáticos?
Sim. Consuma nossa API no build com Next.js getStaticProps, frontmatter Astro ou equivalente. Para updates ao vivo, use ISR/revalidate com TTL curto ou troque a página para server-rendered.
O que a API retorna?
Metadados da página (título, branding), status geral, endpoints com status e uptime, componentes, incidentes ativos, arrays de uptime de 90d para barras, e dados de sparkline de tempo de resposta. Spec completa em api.pulseapi.tech/docs.
Preciso de autenticação?
Para o endpoint público de status — não. É a mesma URL que seus clientes veriam na versão hospedada. Para APIs do dashboard (criar endpoints, escrever incidentes) você precisa de uma API key.
Posso assinar updates em tempo real em vez de polling?
Sim. Conecte ao endpoint SSE em /sse/status/:slug e receba mudanças de status, novos incidentes e resultados de checks na hora.
Como lido com autenticação para páginas de status privadas?
Gere uma API key de org no dashboard e envie como header Authorization ao consumir o endpoint de status do seu servidor. Nunca exponha a key para o browser.
Publique uma página de status nos seus termos
Plano grátis, sem cartão. Hospedada, headless, ou ambas.