--- title: "Status page generator, hosted or in your code | Logdash" description: "Publish a hosted status page from your uptime monitors, or generate one in your own code with a Next.js starter or one shadcn command. Free plan included." url: https://logdash.io/tools/status-page-generator --- # Status page generator Logdash generates a status page from the uptime monitors you already run: publish the hosted page from the dashboard, or put one in your own code with the Next.js starter or a single shadcn command. A generator that only draws the page leaves the hard part to you. Something still has to call your API every minute and decide it is down, and until you wire that up the page says operational through every outage. Logdash starts from the other end. Every HTTP monitor records the status code and response time of each check, and a status page is just the list of monitors you choose to make public. The page cannot say green while the check says red, because they are the same data. ## Three ways to generate the page - Hosted. Switch on a public page in the dashboard and it lives at `logdash.io/d/` straight away. One status page on the free plan, 5 on Builder at $9 a month, 15 on Pro at $15 a month. Your own domain on the hosted page needs Pro. - Next.js starter. A small app with one page and one component, deployed to Vercel with one click. It renders on the server and revalidates every 60 seconds, so the page arrives complete in the HTML and runs on any domain you point at Vercel, on any Logdash plan. - Component. One shadcn command copies a single file into the React or Svelte app you already have. It uses Tailwind and the shadcn CSS variables, so it takes your theme, and its only dependency is `@logdash/status`. ## Status page builder in your own code terminal ```bash # The Next.js starter: server-rendered, revalidates every 60 seconds npx create-next-app@latest status-page \ --example https://github.com/logdash-io/logdash.io \ --example-path templates/status-page-next cd status-page && cp .env.example .env.local # set LOGDASH_STATUS_PAGE_ID in .env.local, then npm run dev # Or add the component to an app you already have npx shadcn add https://logdash.io/r/react/status-page.json npx shadcn-svelte add https://logdash.io/r/svelte/status-page.json ``` Both give you the same page: an overall status banner, a row per monitor with its uptime, and 90 days of daily bars with a tooltip. The data comes from one public endpoint, `GET https://api.logdash.io/v1/status_pages/:id`, with no API key and a 60-second cache. Statuses are computed on the server, so every copy of the page agrees: a monitor is down when its latest check failed and degraded when any of its last 10 did. If the API cannot be reached, the page keeps showing the last data it had instead of going blank. For developers this is a headless status page: the data is ours, the markup is yours. Wherever you generate it, host it apart from your app. People open a status page when your app is down, and a page that shares servers, deploys or DNS with the app goes down with it. ## From monitor to public page 1. **Add the monitor** Paste your health URL into a new service. It is checked every 5 minutes on the free plan, every minute on Builder and every 15 seconds on Pro, and the first check runs straight away. 2. **Publish the page** Add the monitor to a status page and publish it. Share the hosted URL, or copy the id from the Build your own section into LOGDASH\_STATUS\_PAGE\_ID for the starter. 3. **Break it on purpose** Connect a Telegram channel, then make the health endpoint return 503\. The next check flips the monitor to down, the page follows within a few minutes, and a Telegram alert with the status code lands on your phone. ### Logdash vs Instatus | Feature | Logdash | Instatus | | -------------------------------- | ------------------------------------------------------------------- | ------------------------------------------------ | | Monitors on the free plan | 5 services, checked every 5 minutes | 15 monitors, checked every 2 minutes | | Status page on your own domain | Hosted page on Pro at $15 a month, starter or component on any plan | Paid plans only, from Pro | | Page in your own code | Next.js starter, shadcn component, typed client | Public JSON, you write the page | | Incident updates and maintenance | None, the page shows the checks | Incident posts, templates, scheduled maintenance | | Telling your customers | Nothing is sent, they open the page | 200 email subscribers free, 5,000 on Pro | | Alerts to you | Telegram and webhook | Email on free, SMS from Pro | ### When Instatus is the better pick - You need to write incident updates in words and schedule maintenance windows. Logdash has no incident posts at all, only check results. - Customers expect to subscribe and get an email when something breaks. Logdash alerts you, never them. - You want more than 5 monitors without paying. Instatus gives 15 on its free plan. ### Is there a free status page generator? Yes. The free Logdash plan covers 5 services checked every 5 minutes, one hosted status page and Telegram alerts. The Next.js starter, the shadcn component and @logdash/status are MIT licensed and free to run anywhere. Only a custom domain on the hosted page needs Pro. ### Which status page maker works with Next.js? The Logdash starter is a Next.js app: one-click Vercel deploy, server-rendered, revalidated every 60 seconds, with the component in components/status-page.tsx for you to edit. In an existing Next.js app, the shadcn command adds the same component. ### Is there an open source status page creator? Logdash is AGPL-3.0, and the starter, component and client are MIT. You can host the page yourself today. The monitoring behind it cannot be self-hosted with one command yet, so the data still comes from Logdash. ### Can a status page builder use my own domain? The hosted Logdash page takes a custom domain on Pro, $15 a month. The starter and the component run on whatever domain serves your app or your Vercel project, on any plan, because the status page API is public. ## Keep reading [All free tools](https://logdash.io/tools): One page per tool, each with the tool itself, the command or formula behind it and a monitor that keeps checking after you leave. [Uptime badge generator](https://logdash.io/tools/uptime-badge-generator): The generator turns any Logdash monitor on a published status page into a live SVG badge, in classic, status or card style, and gives you the markdown or HTML to paste into a README or a site. [Cron expression generator](https://logdash.io/tools/cron-expression-generator): The cron expression generator builds a schedule once and writes it in four dialects: classic 5-field Unix cron, 6-field cron with seconds for node-cron and Spring, Quartz, and AWS EventBridge, each with its own field order and weekday numbering. [Is my site down](https://logdash.io/tools/is-my-site-down): Enter your URL and Logdash requests it from its own servers, outside your network, and shows the status code and response time within a few seconds, so you know whether the site is down for everyone or just for you. [Uptime monitoring](https://logdash.io/features/monitoring): HTTP checks as often as every 15 seconds. When one fails, Telegram tells you before your users do.