Vail/Configuration

Configuration

Every option in settings.json: site details, theme, announcement, footer and incidents.

Vail is set up in settings.json in its folder. The file is read on the server each time the page loads, so changes show on the next refresh. Visitors never see the file.

settings.json

{
  "site": {
    "title": "Zero Development",
    "description": "Live status for our services.",
    "logo": "",
    "icon": "/icon.png",
    "favicon": "/favicon.ico",
    "links": [{ "label": "Home", "url": "https://zerodev.ca" }]
  },
  "theme": { "primaryColor": "blue", "defaultColorScheme": "dark", "radius": "sm" },
  "announcement": { "enabled": false, "type": "info", "title": "Scheduled Maintenance", "message": "Upgrades on Sunday at 02:00 UTC." },
  "footer": { "text": "%sitename% • Made with Vail Status" },
  "discord": { "enabled": false, "webhookUrl": "", "apiKey": "", "username": "Vail Status", "avatarUrl": "" },
  "groups": [],
  "incidents": []
}

groups holds your services. See Monitors. discord is covered in Discord Alerts.

site

Option	What it does
`title`	The page name, shown in the header and the browser tab.
`description`	A line under the title.
`icon`	A square icon next to the title, such as `/icon.png`. Without one, a pulse icon is shown.
`logo`	Reserved. Not shown yet.
`favicon`	The browser tab icon.
`links`	Header buttons, each with a `label` and `url`.

Images can be a full URL or a file in the public/ folder, such as /icon.png.

theme

Option	What it does
`primaryColor`	The accent colour. Any Mantine colour, such as `blue`, `cyan`, `teal`, `violet`, `orange` or `red`.
`defaultColorScheme`	`dark`, `light` or `auto` to follow the visitor's device. Visitors can switch with the button in the header.
`radius`	Corner roundness: `xs`, `sm`, `md`, `lg` or `xl`.

announcement

A banner above the status summary, for maintenance or news.

Option	What it does
`enabled`	Show the banner.
`type`	`info` (blue), `warning` (yellow) or `error` (red).
`title`	The heading.
`message`	The text.

footer

Placeholder	Becomes
`%sitename%`	`site.title`.
`%year%`	The current year.

"footer": { "text": "© %year% %sitename%" }

incidents

Incidents show under Incident History. Updates are shown in the order you list them, so put the newest first.

"incidents": [
  {
    "id": "api-latency",
    "title": "API Latency",
    "status": "resolved",
    "severity": "minor",
    "createdAt": "2026-09-12T14:00:00.000Z",
    "updates": [
      { "timestamp": "2026-09-12T14:30:00.000Z", "status": "resolved", "message": "Response times are back to normal." },
      { "timestamp": "2026-09-12T14:00:00.000Z", "status": "investigating", "message": "We are looking into slow API responses." }
    ]
  }
]

Option	What it does
`id`	Any unique text.
`title`	The incident name.
`status`	`investigating`, `identified`, `monitoring` or `resolved`.
`severity`	`minor`, `major` or `critical`.
`createdAt`	When it started, as an ISO date.
`updates`	The timeline, each with a `timestamp`, `status` and `message`.

Dates are shown with their time zone, as rendered by your server.

PreviousSetup Guide NextMonitors