Kitchen Mode

A free browser button that turns a recipe page into big, step-by-step instructions you can read from across the kitchen.

Live: https://kitchen-mode.com · Try it on a sample recipe: https://kitchen-mode.com/#try

What it does

Click the bookmark on a recipe page and you get:

• the ingredients to tick off, then each step one sentence at a time, in type sized to be read from a distance
• a "You'll need" panel showing only the ingredients the current sentence mentions
• a "Before you start" list of what the recipe takes as already done: ingredients that go in cooked, softened or soaked, long waits like "marinate overnight", and a preheated oven that no step turns on
• tap-to-start timers on any time in the text ("cook for 8–10 mins" starts an 8-minute timer), named after the step's verb ("Step 2 · Fry"), which say out loud which one is done and keep running in a corner of the page if you close Kitchen Mode
• glance mode: leave the screen alone for 10 seconds while a timer runs and the countdown fills it, big enough to read from across the room, with the current sentence and the next one underneath. "Keep timer small" turns it off until you close Kitchen Mode
• a ringing timer fills the screen in red, with what to do next, until you tap it
• the screen kept awake while it's open
• keyboard, tap, swipe, foot pedal or presentation clicker to move through the steps

It runs in the browser. The bookmark loads the code from this site each time it's clicked, on computers and phones alike, so everyone has the latest version. Each time it opens it sends one anonymous count: the site's name, whether it found a recipe, and which build it is. Never the page address, the recipe or anything about you (see Usage counts).

How it works

Recipe sites publish a structured copy of each recipe (schema.org Recipe JSON-LD) so Google can show rich results. Kitchen Mode reads that instead of the page layout, which is why ads, pop-ups and long introductions never get in the way, and why it works on any site that publishes the data.

• Steps are split into sentences; very short sentences ride along with the one before.
• Ingredients are matched to sentences by their distinctive words ("hot chicken stock" matches on chicken and stock), ignoring words shared by several ingredients.
• Times are found with a regex; ranges start the timer at the low end, so you check early rather than late. "1 hr 30 mins", "1½ hours", "1 1/2 hours", "an hour and a half" and "half an hour" each make one timer of the right length.
• "Before you start" looks for done-already words (cooked, softened, soaked, at room temperature and others) in the ingredient lines, and in the steps for "the cooked rice" when no earlier step mentions rice, waits of an hour or more to chill, marinate, soak, rest or prove, and "overnight". A word after "until" describes the end of a step, so "until cooked through" and "bake for 1 hr until risen" never count. Toasted sesame oil and storage notes ("defrost overnight in the fridge") are skipped.
• A timer is named after the nearest cooking verb before its time ("Leave to rest for 10 mins" is Rest). After the first beeps it says "Rest, step 4. Time's up." in Alice's voice: every piece of that line is recorded once (each verb, "Step 1" to "Step 30", "Time's up") in one MP3 inside km.js, so it makes no request and needs no permission, and the pieces are booked on the audio clock with the beeps. A step past 30, or a browser that can't decode the MP3, gets the browser's own speech synthesis instead. The landing page's "Try it" always uses the browser's voice.
• A timer's first 90 seconds of rings are booked on the Web Audio clock when it starts. Browsers slow down JavaScript timers in background tabs (Chrome to once a minute after five minutes), but not audio, so the alarm is on time and keeps ringing even if you've switched tabs. Chrome lifts the once-a-minute limit while a page is making sound, so the page's own timer can carry on ringing after that. Until 29 Sep 2026 only the first 10 seconds were booked, which could leave up to a minute of silence in a background tab. The volume is unchanged.
• The view is mounted in a shadow DOM, so the recipe site's CSS can't interfere.
• The screen stays on through the Screen Wake Lock API, re-requested when the tab becomes visible again.
• On Android, the back gesture closes the view instead of leaving the recipe page (CloseWatcher, Chrome only).

Files

File	What it is
kitchen-mode.js	Readable source of the bookmarklet. Edit this one.
build.mjs	Strips comments from the source and writes it to km.js, then builds index.html: the landing page with the bookmark (loader, a short javascript: URL that loads km.js) and the sample recipe, which "Try it" runs from a copy of the code inside the page. HANDLE, SITE_URL and POSTHOG_KEY are set at the top. node build.mjs --check writes nothing and fails if the committed files don't match the source.
sites.mjs	The recipe sites checked to work (tested), the 12 featured on the landing page and the 4 named in the hero.
km.js	Generated. The same code as a file, loaded by the bookmark on every click, on computers and phones. Don't edit by hand.
vercel.json	Forwards /relay/* to PostHog's EU servers, so ad blockers that block posthog.com don't drop the counts. Skips the install step, so package.json doesn't turn deploys into builds.
tests/	Playwright tests, run offline against the built km.js and index.html. serve.js answers the site's requests from this checkout, and is shared with the scripts.
scripts/shots.mjs	Screenshots of the landing page and cook view into shots/ (not committed), and og.png.
voice/alice.mp3, voice/alice.json	Alice's recorded pieces in one MP3, and where each piece starts. build.mjs puts both inside km.js.
scripts/voice.mjs	Builds voice/ from the pieces made by scripts/voice.py in the kitchen-mode-video repo (Kokoro-82M, voice bf_alice, run locally). Needs ffmpeg.
scripts/check-sites.mjs	Runs this checkout's km.js on real recipe pages and reports what it found.
package.json	Dev tooling only: Playwright, pinned. No script, since Vercel would run it.

Working on it

npm install && npx playwright install chromium   # once
node build.mjs     # rebuild index.html and km.js after changing kitchen-mode.js or build.mjs
npm test           # the committed build matches the source, then the Playwright tests (offline, about 20 s)
npm run shots      # screenshots of the landing page and cook view, phone and desktop, light and dark, in shots/
open index.html    # "Try it on a sample recipe" runs the current code; index.html#test is the test recipe

The tests run the real loader bookmark, read out of the built index.html, on made-up recipe pages in headless Chrome, with the site's requests answered from this checkout. Timers run on Playwright's fake clock, so a test can run one to the end and see the screen turn red. There are no retries: a test that only passes sometimes is a bug.

node scripts/check-sites.mjs runs this checkout's km.js on every page in sites.mjs (or on the URLs given, and --before prints each "Before you start" list). It needs the internet, answers the counts itself so nothing reaches PostHog, and takes about two minutes.

Regenerate the preview image after changing og-image.html (it refuses if the web fonts didn't load):

npm run shots -- og

Test on Android in the emulator (a Pixel 8 with Android 17 and Chrome 145, from the Play Store image, so it's the real Chrome for Android):

~/Library/Android/sdk/emulator/emulator -avd kitchen_pixel &   # boots in about 30 s; close the window to stop it
adb reverse tcp:8765 tcp:8765 && python3 -m http.server 8765  # its Chrome can then open http://localhost:8765

chrome://inspect in Chrome on the Mac attaches DevTools to the emulator's tabs. adb is in ~/Library/Android/sdk/platform-tools. It was installed with Homebrew (openjdk@21, android-commandlinetools), then sdkmanager "platform-tools" "emulator" "system-images;android-37.0;google_apis_playstore;arm64-v8a" and avdmanager create avd -n kitchen_pixel -d pixel_8. It isn't signed in to Google, so Chrome doesn't update and the Play Store can't install other browsers.

Deploy by pushing main: Vercel's Git integration publishes it to production in about 30 seconds (static files, no build step on Vercel). Run npm test and commit index.html and km.js first, since Vercel serves them as committed. The Test workflow runs the same checks on every pull request; with main protected to require it, a red build can't reach anyone. Every bookmark loads km.js from the live site on each open, so a push reaches everyone at once (except computers set up before 30 Sep 2026, whose bookmarks hold the old full code). Check it landed:

git push origin main
vercel ls                                                     # newest row: Production, Ready
diff <(curl -s "https://kitchen-mode.com/km.js?v=$(date +%s)") km.js && echo live

Working with Claude Code

CLAUDE.md holds the rules Claude can't work out from the code. Hooks in .claude/settings.json enforce the ones that matter most:

• Editing km.js or index.html by hand is refused, with a pointer to the source. Editing kitchen-mode.js or build.mjs rebuilds both, and a build that wouldn't parse is reported straight away.
• Anything that would update main (a push, or merging a pull request) asks first, since main is every user's copy.
• Claude Code on the web runs npm install when a session starts, so the tests work from the first prompt.

Two skills: /ship goes through the checks, pushes and checks the live copy; only you can start it. /check-sites re-runs the site check and updates the lists.

Usage counts

Two free tools, neither using cookies:

• Vercel Web Analytics counts landing page visits, where they came from, countries and devices (the project's Analytics tab).
• PostHog (its own organisation and project, both called "Kitchen Mode", EU region, set to discard IP addresses) gets these events through /relay/ on this site. Each name starts with kitchen_mode_.

Event	Sent when	Properties
page_viewed	the landing page loads	from: the referring site
tried	"Try it" is pressed, or the page opens at #try
button_clicked	someone clicks the install button instead of dragging it
drag_started	the install button is picked up
drag_ended	it's let go	effect: none if the drag was cancelled; anything else means it landed, most likely on the bookmarks bar
code_copied	"Copy the code" worked (phone setup)
test_opened	the test recipe (#test) opens, from the last setup step
test_passed	a bookmark opened Kitchen Mode on the test recipe ("Try it" doesn't count)	loader: whether the bookmark loaded km.js (false only for a computer bookmark set up before 30 Sep 2026); touch: whether it's a phone or tablet
opened	the bookmarklet opens, on any site	site, found (whether it found a recipe), build (build date), loader (whether a bookmark loaded it from km.js, rather than an old full-code bookmark or "Try it"), touch (whether it's a phone or tablet: (pointer: coarse), the test the landing page uses to pick phone or computer steps)

Until 29 Sep 2026 only phones had the loader bookmark, so loader alone meant a phone. Since then computers have it too: tell them apart with touch, which events from before then don't have (read loader: true there as a phone).

The landing page events share one random ID per visit, so they work as a funnel. opened gets a new random ID every time, so it counts opens, not people.

Limits: copies installed before 27 Sep 2026 never report, since full-code bookmarks don't update. Computer bookmarks set up from then until 30 Sep 2026 report with their own build, loader: false and no touch, and still to the old shared PostHog project (see Decisions); bookmarks set up since load km.js, so they always run the current build. Sites whose security policy blocks outside requests drop the count silently. opened on kitchen-mode.com (or kitchen-mode.vercel.app, which serves the same page) is "Try it". Nothing is sent when the page is opened from a file.

Site support

Checked on 27 Sep 2026 by loading a recipe page and running the same data lookup the bookmarklet uses. Sites that turn away plain requests were loaded in headless Chrome instead. node scripts/check-sites.mjs now does the whole check, running the bookmarklet itself. Run again on 9 Oct 2026 before shipping the new sentence and timer code: 70 of the 73 opened a recipe. delicious.com.au and taste.com.au turned the check away with a 403, and Waitrose with a connection error, so those three are unknown for now rather than broken.

• Publish the data (73 sites): the list, with the recipe checked on each, lives in tested in sites.mjs. The 12 names in featured show on the landing page; the rest sit behind "N more sites".
• Don't publish usable data: Nigella, Mary Berry, Smitten Kitchen, Hairy Bikers, Rick Stein and Inspired Taste publish none; Gordon Ramsay publishes recipes without their steps
• Blocked even headless Chrome (bot protection, so unknown rather than unsupported): Taste of Home, The Kitchn, The Woks of Life, Riverford, Coles
• No recipe page found to check: EatingWell, Skinnytaste, Tesco Real Food, Donna Hay, Ambitious Kitchen (the crawl only reached collection pages)
• Left off the landing page on purpose: NYT Cooking publishes the data, but the recipes are paywalled. Big non-English sites (Marmiton, Chefkoch, Cookpad) weren't checked, since the sentence and timer rules are written for English.

Decisions

• Android setup says to open Chrome first and check the bookmark name (9 Oct 2026). Two phone setup attempts on 4 and 5 Oct showed that the bookmark never ran; the counts recorded the attempts but no execution. The steps now put the Custom Tab escape hatch before the numbered instructions, warn when the page sees Android's WebView marker, ask people to check kitchenmode has no space, and tell them to edit the name if the address-bar list has no star. What it costs: one warning on the setup page for in-app browsers and a little more text in the Android steps; the bookmark and privacy promise do not change.

• The Safari parse error is fixed (9 Oct 2026). Two lookbehind patterns stopped the whole bookmark file parsing in older Safari, before its load error handler could help. Rewrote sentence splitting and timer boundaries without lookbehind; the existing behaviour tests remain the check. Tried only in headless Chrome. The cost is a little extra boundary handling in the timer parser.

• A quick second bookmark click counts as the same tap (9 Oct 2026). It used to open and close Kitchen Mode at once. The loader now ignores a second run during the opening moment; a later click still closes it. Tried a short delay and kept it at 1.5 seconds, since an intentional close that soon is unlikely. The cost is that closing within 1.5 seconds requires waiting or using Esc.

• A bookmarklet rather than an extension. No install, store fee or review, and nothing leaves the page but an anonymous count. The costs: it's desktop-first, phone setup means pasting code into a bookmark by hand, and a site's security policy can refuse the script the bookmark loads. Every bookmark runs the live km.js, so test before pushing.

• Every bookmark is the short loader, computers included (29 Sep 2026). Phones got it first, on 27 Sep: the first phone users couldn't get the 34 KB bookmark to run (8 "Copy the code" presses and no phone opens), so they paste a 224-character bookmark that loads km.js from this site. It's short enough to check by eye, always runs the current build, and if the script can't load it says "Kitchen Mode could not load on this page." instead of doing nothing. Computers kept the full-code drag at first, because it runs even on sites whose security policy only allows scripts from listed hosts. They now drag the same loader, because a full-code bookmark never updates: everything shipped since, like "Before you start" and glance mode, reached phone users only. The drag, the ticket and the bookmark's name are unchanged. The cost, now on computers too: each open fetches km.js from this site (Vercel's default max-age=0, must-revalidate, so a quick revalidation), and a site with that kind of policy shows the message instead of opening. None of the 50 listed sites that answered a plain request has one, and BBC Food, whose policy is strict, works. Computer bookmarks set up earlier keep the old code and can't be changed from here. With about a dozen opens so far, most of them likely the author's own, the landing page doesn't ask anyone to set it up again. The landing page also shrank from 216 KB to 117 KB, since it no longer carries the whole code twice as a URL.

Not yet tested

• kitchen-mode.com (1 Oct 2026). Checked with curl before the move: the page loads over HTTPS from kitchen-mode.com, and www.kitchen-mode.com redirects to it. Not checked: the link preview on X, a bookmark set up from kitchen-mode.com on a real phone, and counts arriving in PostHog through the new address.
• The phone setup steps on a real iPhone (Safari). Checked on 27 Sep 2026 in headless Chrome emulating an Android phone and tablet, with the bookmark run the way the browser runs one: the phone bookmark loads km.js and opens the test recipe, "It works" shows for a bookmark but not for "Try it", tapping again closes it, and a failed load shows its message. Checked the same day on a real Android phone (Chrome): typing kitchenmode in the address bar and tapping the suggestion with the star opens the test recipe, and tapping the bookmark in the bookmarks menu does nothing. Checked on 28 Sep 2026 in the Android emulator (Pixel 8, Android 17, Chrome 145) by following the Android steps as written: the message after bookmarking said "Bookmark saved", with no Edit button, and went after a few seconds (tapping it opens the editor); pressing and holding the URL highlighted all of it, with no Select all; kitchenmode: put the star third and opened the test recipe; the bookmarks list still did nothing. The back gesture was checked on BBC Good Food with the new km.js run through DevTools: it closes Kitchen Mode, and the next back leaves the page as normal; Esc and the ✕ also leave back working normally. Not checked: anything on iOS; Samsung Internet and Firefox on Android (the emulator needs a Google account to install them); in-app browsers like Instagram's.
• The computer bookmark dragged onto a real bookmarks bar and clicked there, in any browser (automation can't reach the bar), and in Safari, Firefox and Edge at all. Checked on 29 Sep 2026 in headless Chrome 154 by running the install link's own code, read from the built index.html: on the test recipe it loads km.js, opens, turns the banner to "It works" and sends test_passed with loader and touch: false (true with touch emulation), and a second run closes it; "Try it" still doesn't pass the test; on BBC Good Food and BBC Food it opens the recipe with both the live and the new km.js; when km.js can't load (a failed request, or a page whose policy allows only its own scripts) it shows "Kitchen Mode could not load on this page." BBC Food's own policy turns off the screen wake lock, so the view there says "Screen may sleep".
• Real click tests on most sites in the list above. The phone bookmark was run the same way on 16 (the 12 featured, plus Budget Bytes, Delish, Minimalist Baker and Pinch of Yum) and opened with the recipe on all of them, including BBC Food despite its strict security policy. The rest have only had the data check.

Ideas

• A mobile web version: paste a recipe link and get the cook view (needs a small server function, since browsers can't read other sites' pages), with shareable links per recipe. Made installable with a share_target in its manifest, it would appear in Android's share sheet, including in apps where a bookmark can't run, and setup would be one tap. The share sheet only passes the link, so the server has to fetch the page, which breaks the "never the page address" promise. On 28 Sep 2026 a plain fetch from a home connection found the recipe on 58 of the 73 tested sites at best: 54 with an honest KitchenMode/1.0 user agent, and 48 posing as Chrome, since Cloudflare challenged the fake Chrome on 10 sites that let the honest one through. Allrecipes and the other 6 Dotdash Meredith sites answer any non-browser with a 402; Cloudflare, rate limits or a captcha stopped 7 more, and Joshua Weissman's fetched page has no steps in its data. A server's datacenter address would likely do worse, so the bookmark would stay as the fallback. Not yet measured from Vercel.
• Scale servings ("serves 4" to 2), rewriting quantities including fractions
• Read the current step aloud, and voice "next"
• A shopping list merged from several recipe links

Licence

MIT (see LICENSE). You can copy it, change it and share it, as long as the copyright notice goes with it. That includes Alice's voice in voice/.

If you fork it:

• Please give your version its own name, so people can tell the two apart.
• Change HANDLE, SITE_URL and POSTHOG_KEY at the top of build.mjs. Otherwise your bookmarks load this site's code, your counts come here, and your page credits the wrong person.

---

Made by @richyjudge.