The demo

A page of 100 pretend users. A tile lights up when a flag is on for that user, and the page follows every change you make in the dashboard within about a second. It shows what switches, rules and percentage rollouts do at a glance.

It's a tiny Node server using the JavaScript client. Node 24 runs it directly; there's nothing to install.

#Run it

1. Start Switchyard and open the dashboard (see the main README).

2. Create a project and copy its production SDK key. Create a flag called new-checkout.

3. Run, from the repository root:

   bashCopy

   SWITCHYARD_URL=http://localhost:8080 SWITCHYARD_SDK_KEY=sdk-… node demo/server.ts

   On Windows PowerShell, set the variables first: $env:SWITCHYARD_SDK_KEY="sdk-…". Or put them in demo/.env (it's ignored by git) and run node --env-file=demo/.env demo/server.ts.

4. Open http://localhost:3000.

#Things to try

• Switch it on in production: all 100 light up, since a new flag serves On to everyone else.
• Roll out to 30%: about 30 tiles light up. Raise it to 50%: the first 30 stay lit and more join. Users keep their place in a rollout.
• Add a rule "email ends with @acme.com" serving On: every 5th user lights up whatever the rollout says.
• Add a rule "country is in IN, SG": a quarter of the users.
• Switch it off: everything goes dark at once. Off is a kill switch.
• Stop the server: the page keeps its last state and shows the client's status. Start it again and it catches up.
• A flag with variations (Text, say violet, teal, amber): each tile takes the colour of the variation that user gets. Split 50/50 and watch the colours mix; add a rule for @acme.com and every 5th tile changes.

#In the browser

http://localhost:3000/browser is a checkout page using switchyard-web with the environment's client-side ID: the Pay button takes the colour from a text flag button-color (variations violet, teal, amber), and a badge shows new-checkout. Mark both flags Available to browsers, build the browser client once (npm install && npm run build in clients/web), and add SWITCHYARD_CLIENT_ID=cli-… (from SDK keys) to the settings. Pick another visitor and the page asks again for them.

Settings: PORT (default 3000), FLAG (the flag shown first; default new-checkout). The page has a menu for the others.

View this page's source on GitHub