What Is Inline Ingredient Embedding?

Every recipe on the internet follows the same layout: ingredients at the top, instructions at the bottom. You've been cooking with this structure so long it feels like a law of nature. It isn't. It's a habit inherited from print cookbooks, and it's genuinely terrible for cooking from a screen.

RecipeStripper does something different. Instead of keeping ingredients and instructions separate, it weaves the quantities directly into each cooking step. You don't have to remember that "flour" means "2 cups all-purpose flour" — the step tells you.

The Problem: Two-List Cooking

Here's the classic recipe layout in action:

• 2 cups all-purpose flour
• 1 tsp baking soda
• ½ tsp salt
• 1 cup (2 sticks) unsalted butter, softened
• ¾ cup granulated sugar

Instructions:

1. Whisk together the flour, baking soda, and salt in a medium bowl.
2. Beat the butter and sugar until light and fluffy.

Step 1 says "whisk together the flour, baking soda, and salt." How much flour? Scroll up. Find it. Scroll back down. Which step were you on? This is the reality of cooking from a phone propped against the backsplash. The two-list format wasn't designed for screens — it was designed for print, where you could lay the book flat and see everything at once.

On a phone, "scroll up to check" happens 8 or 10 times per recipe. With wet hands, every scroll is an interaction you'd rather not have.

How Inline Embedding Works

RecipeStripper's parser chain extracts the ingredient list and the instruction steps from whatever recipe site you give it. Then a matching pass runs: for each instruction step, the system looks for ingredient names mentioned in that step and replaces the bare name with the full quantity and description.

The matching uses fuzzy word-boundary logic. It's not looking for exact string matches — "flour" matches "all-purpose flour," "bread flour," and "flour, sifted" because they all contain the word "flour" at a word boundary. When there's ambiguity (a recipe that uses both bread flour and all-purpose flour, for instance), the matcher looks at which ingredient hasn't appeared in earlier steps yet and assigns accordingly.

The result transforms this:

Whisk together the flour, baking soda, and salt.

Into this:

Whisk together 2 cups all-purpose flour, 1 tsp baking soda, and ½ tsp salt.

The quantity appears right where you need it — highlighted in sage green so it stands out at a glance — and you never have to scroll up.

What It Looks Like in Practice

For a chocolate chip cookie recipe, a step like "cream the butter and sugars together" becomes "cream 1 cup (2 sticks) unsalted butter, softened and ¾ cup granulated sugar together." Add brown sugar to the same step and it gets embedded too: "cream 1 cup (2 sticks) unsalted butter, softened, ¾ cup granulated sugar, and ¾ cup packed brown sugar together."

For something like a stir-fry with a sauce — recipes where the final step says "add the sauce" — RecipeStripper will embed the sauce components inline if the sauce was listed as a single ingredient. If the sauce ingredients are listed individually, each one gets matched to the step where it first appears.

The highlight color — sage green — was chosen specifically for kitchen legibility. It's high enough contrast to read at a glance on a bright phone screen without being aggressive. Quantities are readable from arm's length, which matters when the phone is propped up and you're two feet away.

Why This Matters on Mobile

Kitchen cooking from a phone has a specific set of constraints that no other reading context has:

• You can't hold the phone while cooking — it's propped against something, which means you can't easily scroll
• Your hands are frequently wet, floured, or covered in something that shouldn't touch glass
• You're glancing at the screen, not reading carefully — you need information visible at a glance, not buried in a parallel list
• The screen might dim if you don't touch it (which is why Cook Mode exists — it keeps the screen on via the Wake Lock API)

The two-list recipe format fails on all four counts. Inline embedding solves the first three by eliminating the need to scroll up at all. If you have the right step in front of you, you have all the information you need.

Why No Other Tool Does This

Most recipe sites and recipe tools don't attempt inline embedding for a few reasons.

First, it requires parsing both the ingredient list and the instructions, then running a matching pass between them. That's three distinct processing steps. Traditional recipe cards — the WordPress plugin boxes that most food blogs use — just display whatever structured data the blogger entered. There's no processing step; the ingredients sit in a list field and the instructions sit in a steps field.

Second, the matching problem is harder than it looks. Ingredients are described with varying levels of specificity ("flour" vs "all-purpose flour" vs "flour, spooned and leveled"), instructions refer to them with varying degrees of vagueness ("add the flour" vs "add the remaining dry ingredients" vs "sift in the flour"), and a single step can reference multiple ingredients that need to be matched independently.

Third, most recipe apps are built around storage and organization, not the active cooking experience. They're trying to solve "save this recipe" not "cook this recipe without looking at your phone eight times." Inline embedding is specifically useful while cooking, which means it requires taking the cooking moment seriously as the core design target.

RecipeStripper's whole premise is the cooking moment — everything in the product is designed for the person standing at the stove, not the person bookmarking recipes on a Sunday afternoon. Inline embedding is the feature that most directly reflects that focus.