Skip to content
Switches

Features

Everything here works on the real site, for anyone with the link. Nobody needs an account or anything installed to pick.

Flip versions on the live page

A round button sits at the bottom left of every page that has versions. It opens a small panel listing each section on the current page that has more than one version:

  • a section with two versions gets a switch (off is the first version in the page, on is the second);
  • a section with three or more gets a row of buttons, one per version.

When you pick a version, the page scrolls to that section if it isn’t on screen.

The panel finds the versions on the page by itself, including sections that appear later, for example after moving to another page of the site. Section names are shown in plain words (signup-form becomes “Signup form”), and a version can have its own label. Press Esc or click outside the panel to close it. It follows the light or dark setting of the device.

As you pick, the address bar updates, for example ?switches=hero%3Asplit. Copy that address and anyone who opens it sees the same versions. Picks are also saved in your browser, so a refresh keeps them; if the link and the saved picks disagree, the link wins.

On server-rendered sites (Next.js) the picked version is in place before the page first appears. There is no flash of the default version.

A note on any pick

Under each section there is an Add note link. Notes are one line, up to 280 characters, for things like “this one, but with a bigger headline”. They go out with the picks.

Copy my picks

The button at the bottom of the panel copies every pick as plain text, ready to paste into an email, a chat message or Claude Code. Picks are site-wide, and each line says which page the pick was made on (unless that address has unusual characters). If the browser blocks the clipboard, the text appears in a box, selected, to copy by hand.

Clipboard
Switches picks: hero: split · pricing: simple
hero: split (/) — note: bigger headline
pricing: simple (/pricing)
Link: https://preview.example.com/pricing?switches=hero%3Asplit%2Cpricing%3Asimple
Apply these picks: keep the chosen version of each section and delete the others.

The format is described in Claude Code.

Works on deployed previews

Switches is meant to run on the site you share: a Vercel preview, a staging address, any deployed URL. The panel shows in production builds on purpose, so a client can open the link and pick on their own. That also means you must remove it before launch; see the FAQ.

No backend

There is no server, database or account. Picks live in the link and in the browser, and they reach you by copy and paste.

Version-first modes

A setting in CLAUDE.md decides whether Claude Code offers versions on its own when it builds a new section or page layout:

  • Off: one version, unless you ask for several.
  • Ask (the default): Claude asks “want 3 versions?” before building a new section.
  • Always: Claude builds 2 or 3 versions of new sections without asking.

Small edits, fixes and copy changes never get versions. Change the mode with npx switches init --mode always (or off, ask), or edit the line in CLAUDE.md by hand.