About

Recipes are structures

Most recipes are written as prose because prose is easy to type, not because it is easy to cook from. A recipe is really a small dependency graph: things combine, the results combine again, and eventually there is dinner. This site writes them that way.

How to read the grid

Ingredients run down the left-hand side, one per row. Steps sit to the right of the ingredients they consume, and each step's cell spans exactly the rows feeding into it. Work left to right: the rightmost cell is the last thing you do.

A vinaigrette, as a recipe grid

red wine vinegar	1 tbsp	1 Whisk until it thickens 2m Add the oil slowly and it will stay together.	2 Toss and serve 1m
Dijon mustard	1 tsp
olive oil	3 tbsp
salad leaves	4 handfuls
flaky salt	a pinch

That table says: whisk the vinegar, mustard and oil together, then toss the result with the leaves and salt. Two facts fall out of the shape without your having to read a word — the dressing is a self-contained sub-recipe you can make ahead, and nothing else needs doing while you make it.

Why it beats a numbered list

• You see the joins. A numbered list tells you what is next; the grid tells you what meets what, which is the thing you actually forget mid-cook.
• Parallelism is visible. Two branches that only meet at the far right can happen in either order, or at once.
• It fits on one screen. The entire method is one object you can glance back at with wet hands, rather than a column of text you have to find your place in.

Where it struggles

The format is honest about its limits. Long unbranching recipes — a stew that is really "add things to a pot for two hours" — become a staircase with little to show for it. Techniques that need a picture still need a picture. And a very wide table is a poor fit for a phone, which is why every recipe here also has a plain step list one tap away.

How the site is built

Each recipe is a Markdown file whose front matter holds the method as a tree: leaves are ingredients, branches are steps, the root is the last thing you do. Nothing is written twice. From that single structure the site derives the grid, the linear step list, the ingredient list, the schema.org markup, and the search index.

The layout maths lives in src/lib/grid.ts: it walks the tree, counts leaves to get row spans, and assigns columns from the root leftwards so that every step meets its ingredients with no gaps. The rest is Astro, one stylesheet, and about a hundred lines of client-side JavaScript for the serving scaler, search and theme switch.

House rules

• No autoplaying video, no pop-over newsletter, no cookie banner.
• Every recipe states its total time honestly, including the part where you stand around waiting.
• Weights alongside volumes wherever a volume would mislead — flour, mostly.
• The page works with JavaScript off. Scaling and search are extras, not load-bearing.

Credits

The idea of laying a recipe out as a table of ingredients and spanning steps was popularised by Cooking For Engineers , which has been publishing recipes in that shape since 2004. This site is an independent, from-scratch take on the same idea: all recipes, writing, code and design here are original, and no content is reproduced from it.