What is Switchyy
Switchyy is a real-time mode control platform for your websites and applications. It lets you instantly switch your app between different states — like live, maintenance, or custom — without writing code, redeploying, or touching your server.
Think of it as a remote control for your app's behavior. One click in the Switchyy dashboard, and every user visiting your app sees the updated state immediately.
Why Switchyy?
- •No redeployments needed to change app behavior
- •Works with any tech stack — React, Vue, plain HTML, mobile apps
- •Sub-100ms response time for mode decisions
- •Secure, rate-limited, and built for production
How It Works
Switchyy follows a simple flow: you create a project, set a mode, and your app checks with Switchyy to know how to behave. Here's the full picture:
Create a Project
Each project represents one of your applications. You get a unique public key instantly.
Set the Mode
Choose between Live, Maintenance, or Custom. Each mode can carry a message, button text, and redirect URL.
Integrate
Add a script tag to your HTML or call the decision API directly. Your app now checks with Switchyy on every load.
Control in Real-Time
Change the mode from the dashboard. Your app updates instantly — no deploy, no restart, no code change.
Getting Started
1. Sign In
Click Login in the top-right corner and sign in with your Google account. That's it — no email verification, no forms. One click and you're in.
2. Create a Project
From the dashboard, click New Project and enter a name. Your project is created instantly with a unique public key. The default mode is set to Live.
3. Get Your Keys
Click on any project to open its control center. You'll find your:
- Public Key — used to identify your project in API calls
- Project ID — shown in the project header
Both are needed to integrate Switchyy into your app.
Integration
There are two ways to connect your app to Switchyy. Choose the one that fits your stack.
HTML / React / Vue (Easiest)
Paste this snippet in your index.html <head>:
<!-- Switchyy: Add to <head> --> <script src="https://your-domain.com/switchy.js?key=YOUR_KEY&project=YOUR_ID"></script>
Works for plain HTML, React (CRA/Vite), Vue, Angular, Svelte.
Next.js
Add to your app/layout.tsx:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<head>
<Script src="https://your-domain.com/switchy.js?key=YOUR_KEY&project=YOUR_ID" strategy="beforeInteractive" />
</head>
<body>{children}</body>
</html>
);
}API (Full Control)
For more control, call the decision API directly from your frontend or backend:
GET /api/v1/decide?projectId=YOUR_PROJECT_ID&key=YOUR_PUBLIC_KEY
The response includes the current mode, message, button text, and redirect URL:
{
"status": "ok",
"data": {
"mode": "maintenance",
"message": "We're updating things. Back soon!",
"buttonText": "Go Home",
"redirect": "https://example.com",
"timestamp": 1711234567890
}
}Modes
Switchyy offers 22 built-in modes organized into categories. Switch between them instantly from the dashboard.
Status
Live
App runs normally, no overlay
Maintenance
Scheduled maintenance screen
Custom
Custom message & redirect
Offline
Intentionally offline
Preview
Staging environment
Away & Leave
On Leave
Be Right Back
Vacation
Focus Mode
Work
Working
Launching Soon
Migrating
Deploying
Incidents
Incident
Degraded
Outage
Business
Closed
Coming Soon
Paused
Moved
Beta
Holiday
Real-Time Updates
When you change a mode in the dashboard, your app updates instantly — no page refresh needed. This is powered by Server-Sent Events (SSE).
How it works
- 1Your app connects to Switchyy via SSE when the page loads
- 2You change the mode in the dashboard
- 3Switchyy pushes the update to all connected clients
- 4Your app shows/hides the overlay immediately
SSE Endpoint
GET /api/v1/events/{projectId}?key={publicKey}Custom Presets
Save your frequently used custom mode configurations as presets. Switch between them with one click instead of re-entering the message, button text, and URL each time.
Default Templates
Switchyy comes with ready-to-use templates for common scenarios:
Under Construction
Coming Soon
Maintenance Break
Temporarily Closed
Your Saved Presets
Create your own presets with custom messages and save them for quick access. Each preset stores:
- Preset name
- Custom message
- Button text
- Redirect URL
Security & Settings
Control exactly where and how your overlays appear using local development testing and suppression features.
Custom Settings & Inheritance
By default, any new project inherits its settings globally. Toggling "Custom Settings" to ON within a project unlocks independent granular controls so your development environments act exactly how you want per-project.
Development Overlay Behavior
Switchyy is designed to show overlays on local development environments (like localhost) by default, so you can easily adapt your app's frontend to our CSS layout during development. If you don't want to see this while coding, simply toggle the Hide Overlay on Dev Sites setting to ON to blanket-hide banners across all dev environments.
Hide Overlay on Specific Links
Need granular control? Instead of hiding the overlay on ALL development sites, you can define specific links (like localhost:3000 or staging.myapp.com) where the banner should not appear. This guarantees the overlay is suppressed exactly where you need it, without affecting production links or other local servers.
Examples
Here are real-world scenarios where Switchyy fits perfectly.
Scheduled Maintenance
You're pushing a database migration at 2 AM. Switch to Maintenance mode before you start, run your migration, verify everything works, then switch back to Live. No code changes. No deploy.
Emergency Kill Switch
Your app has a critical bug in production. Switch to Maintenance instantly while your team works on a fix. Users see a clean message instead of broken pages.
Launch Countdown
Use Custom mode to show a "Coming Soon" page with a redirect to your waitlist. When you're ready to launch, flip to Live.
Multi-App Control
Managing multiple services? Create a project for each one. Control your marketing site, API docs, and admin panel independently from a single dashboard.
Best Practices
Keep your public key safe
Your public key is meant for client-side use, but avoid exposing it unnecessarily. It identifies your project and is tied to rate limiting.
Use maintenance mode proactively
Don't wait for things to break. Before every deploy or migration, switch to maintenance mode. It takes one click and saves you from showing broken states.
Test your integration
After adding the script tag or API call, switch modes from the dashboard and verify your app responds correctly. Test all three modes before going live.
One project per app
Create separate projects for each application or service. This gives you independent mode control and cleaner organization.
Handle API errors gracefully
If using the API directly, always handle the case where Switchyy is unreachable. Default to showing your app normally (fail open) rather than blocking users.
Rate limits
The decision API allows 60 requests per minute per IP per project. This is more than enough for normal usage. If you exceed this, responses return a 429 status.
Switchyy Documentation · Built for developers who ship fast