Página de estado headless.
Tu UI, nuestros datos.
¿No te gusta nuestra página? Construye la tuya. Cada byte que muestra la versión alojada está disponible vía API REST pública y stream SSE en tiempo real. Spec OpenAPI completa.
Por qué headless
Todos los otros proveedores te encierran en su template. Nosotros te dejamos llevarte los datos y seguir usándonos.
Tu marca, tus píxeles
Coincide exactamente con tu sitio principal. Fuentes, animaciones y layouts personalizados. Sin footer del vendor, sin headers con marca.
Renderiza en cualquier lugar
Server component Next.js, island Astro, HTML estático, bot Slack, CLI, banner in-app. Mismo endpoint.
Manténla en tu dominio
Sin CNAME. Llama desde tu servidor, renderiza dentro de tu app. Los clientes nunca ven una URL de terceros.
Integra, no migres
Añade un widget de estado a tu documentación, panel admin o portal cliente sin redirigir fuera del sitio.
Una llamada. Todo lo que necesitas.
GET al endpoint de estado con tu slug. Parsea el JSON. Renderiza.
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": [...]
}Colócalo en tu 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)Tiempo real vía SSE — sin polling
Suscríbete a actualizaciones de incidentes, transiciones de estado y resultados de checks a medida que llegan.
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)
})Guías por framework
Elige tu stack — tenemos una guía con código copy-paste.
FAQ
¿Qué es una página de estado headless?
Una página de estado headless separa los datos (uptime, componentes, incidentes) de la UI. En vez de estar encerrado en el template de un vendor, llamas los datos por API y los renderizas como quieras — tu propio componente React, una página server-rendered, incluso un dashboard de terminal.
¿Por qué no usar directamente la página alojada?
Puedes — funciona de fábrica. Pero si tu marca necesita un layout custom, integración estrecha con tu sitio principal o renderizar en tu dominio sin CNAME, headless te da libertad total. Mismos datos, cualquier UI.
¿La API tiene rate limit?
El endpoint público de estado está diseñado para tráfico de lectura intenso (es lo que alimenta nuestras propias páginas alojadas y badges embebidos). El polling razonable funciona bien. Para tráfico muy alto, cachea respuestas 10-30s o suscríbete al stream SSE.
¿Puedo usarlo con un generador de sitios estáticos?
Sí. Llama la API al build con Next.js getStaticProps, frontmatter de Astro o equivalente. Para actualizaciones en vivo, usa ISR/revalidate con TTL corto, o pasa esa página a server-rendered.
¿Qué devuelve la API?
Metadata de la página (título, branding), estado general, endpoints con estado y uptime, componentes, incidentes activos, arrays de uptime 90d para barras, y datos de sparkline de tiempo de respuesta. Spec completa en api.pulseapi.tech/docs.
¿Necesito autenticación?
Para el endpoint público de estado — no. Es la misma URL que tus clientes verían en la versión alojada. Para APIs del dashboard (crear endpoints, escribir incidentes) necesitas una API key.
¿Puedo suscribirme a actualizaciones en tiempo real en vez de polling?
Sí. Conéctate al endpoint SSE en /sse/status/:slug y recibe cambios de estado, nuevos incidentes y resultados de checks al instante.
¿Cómo manejo la autenticación para páginas de estado privadas?
Genera una API key de org en el dashboard y envíala como header Authorization al llamar el endpoint de estado desde tu servidor. Nunca expongas la key al navegador.
Lanza una página de estado en tus términos
Plan gratuito, sin tarjeta. Alojado, headless o ambos.