← toddschiller.com

Recipe Grid

Turn a free-form recipe into the Cooking for Engineers table format, where ingredients are rows and each operation is a cell that spans the rows it combines. Parsing runs on Chrome's on-device built-in Prompt Application Programming Interface (API), so your recipe text never leaves the browser.

Example:

Convert your own recipe

Checking on-device model…

Gemini Nano is a small on-device model, so it often gets the relationships between steps wrong — what combines with what, and which step feeds the next. The tool parses a few times and keeps the best result, but treat the grid as a draft and check it against the recipe.

Recipe table

Read left to right: ingredients combine into the finished dish

Recipe Grid Markdown

The same recipe as Recipe Grid source. The ingredient list at the top doubles as a shopping list; paste the whole block into the Recipe Grid compiler to regenerate this table.

Why this layout works

A prose recipe forces you to hold state in your head: which bowl holds what, which steps are already done, what combines next. The grid puts that state on the page. Ingredients run down the left in the order you use them, each with its amount, and every operation is a cell that spans exactly the rows it acts on. To find your place you look for the next cell to the right, not a sentence to re-read.

Structurally the table is the recipe's dependency graph drawn as merged table cells: leaves (ingredients) on the left, the finished dish as the single cell spanning every row on the right. Because independent branches sit side by side, you can also read it like a Gantt chart and spot which sub-mixes can be prepared in parallel. Michael Chu called his notation the Tabular Recipe Notation (TRN) when he introduced it on Cooking for Engineers in 2004.

Show the parsed structure (JSON)