FAQ

Does the panel show on my deployed site?

Yes, on purpose. Switches is built to run on deployed previews (a Vercel preview, a staging address) so your client can open the link and pick without any setup. That is the point of it.

It must be removed before launch. When the design is settled, ask Claude Code to “finish Switches”. It removes the panel and the wrappers, keeps the default of anything undecided and uninstalls the package. Until you do, the production server or build output prints a one-time reminder while <Switches /> renders and the flag isn’t off. Details in Claude Code.

How is it different from Storybook?

Storybook shows components on their own, outside the site. Switches works in place: the versions sit in the real page, with the real content, navigation and spacing around them. The person choosing sees exactly what will ship.

Isn’t this just feature flags?

Feature flags need a backend and are for shipping: rolling features out to real users. Switches has no backend and is for design review. The picks end up as code changes, and Switches itself comes out before launch.

How is it different from Agentation?

Agentation is for feedback (“fix this”); Switches is for choosing (“pick one of these”). They do different jobs.

Does it need a backend, a database or an account?

No. Picks are kept in the page link and in the browser, and they reach you by copy and paste. Nothing is sent anywhere.

Which React and Next.js versions does it support?

React 18 and 19, Next.js with the App Router or the Pages Router, and plain React apps. What has been tested: React 19 with the Next.js 15 App Router (this site and its end-to-end tests); React 18.3 with the Next.js 14 Pages Router (production build and dev server: every version in the HTML, the pick script before the content, picks and links work, no hydration warnings); and React 18.3 in a Vite 5 production build (the panel, picks and links work). Other combinations are expected to work but have not been tested. Two differences in plain React apps: without server rendering, a page opened with a pick may briefly show the default version first; and the NEXT_PUBLIC_SWITCHES=off flag only works if your bundler replaces process.env.NEXT_PUBLIC_SWITCHES (in Vite, with a define entry). Otherwise Switches is simply on.

Does it work with a strict Content Security Policy?

Not fully with a nonce- or hash-only policy. Switches renders an inline pick script and a small inline <style> per Variant, and such a policy blocks them: picks apply late, and without the styles every version of a section may show at once. The preview your client reviews needs style-src 'unsafe-inline' or equivalent (and, for picks before first paint, a policy that lets the inline script run). There is no nonce prop in this version.

What if the client likes the defaults?

Then they just say so. Nothing is copied until they pick something: “Copy my picks” gives “No picks yet.”

With NEXT_PUBLIC_SWITCHES=off, what happens to the other versions?

They are still in the page’s HTML, only hidden; every section shows its default and there is no panel. Anyone reading the page source could still see them. The flag is an emergency switch, not a cleanup: to remove the other versions from your code, finish Switches.

Which browsers does it work in?

Versions are hidden with plain CSS. The rules use :is() and :not() with selector lists, which need Chrome or Edge 88+, Firefox 84+ or Safari 14+. In older browsers every version of every section shows at once.

One case also needs :has(): a default version that is not the first one in its section. In browsers without :has() (Chrome and Edge before 105, Safari before 15.4, Firefox before 121), such a section shows both its first version and its default until a version of that section is picked. Picks, links and sections whose default is the first version are not affected. If you need those browsers, put the default version first.

Does my client need to install anything?

No. They open the link you send, press the round button at the bottom left and pick. “Copy my picks” gives them text to send back to you.

Will search engines or visitors see the hidden versions?

All versions are in the HTML while Switches is installed. That is fine for a preview link and another reason to finish before launch.