Add a calculator to your site

Every calculator on bakingcalc.app is yours to embed — in a recipe post, a tutorial, a cookbook companion site. One line of code per calculator, and it looks at home in your content.

Free for any use. Personal, commercial, client sites, cookbooks behind a paywall. No approval needed.
No tracking. No cookies, no analytics, no account. Your readers hit bakingcalc.app directly in a sandboxed iframe.
Auto-sizing. The embed grows and shrinks with its own content — no iframe scrollbars, no awkward empty space.
Light and dark. Follows your visitor's OS theme by default, or lock it to match your site.

How to add one

Pick the calculator you want below — each has a live preview so you can see it before you commit.
Click Copy on its snippet. That's one line of HTML.
Paste it into your post wherever you want the calculator to show up. WordPress block editors: use a Custom HTML block. Ghost, Squarespace, Webflow, MDX all have an equivalent "code" block.
Save & preview. The calculator should render within a second or two.

If you're on a platform that strips <script> tags (some locked-down CMSes do this), the embed won't work — let us know and we'll look into an <iframe>-only variant.

Which calculator fits my post?

Quick guide — match your content to the calculator below that serves it best. You can embed more than one on a page if you need them.

Recipe Scaler

Recipes that serve a different number of people than your reader wants — cookie recipes, dinner mains, anything that says "serves 6" when they need 4.

Hydration Calculator

Bread posts, sourdough tutorials, ciabatta / focaccia guides. Readers can plug in their own flour and water to see the hydration percent.

Baker's Percentage

Formula-driven breads, pastry, or viennoiserie posts. Let your reader enter any flour weight and see the full scaled recipe.

Pan Size Converter

"Do I have the right pan?" moments. Round ↔ square ↔ rectangular ↔ loaf. Keeps bake time roughly consistent.

Yeast Converter

Any yeasted-bread recipe. Readers with one yeast type in the pantry can convert to what your recipe calls for without guessing.

Sweetener Converter

Lower-sugar variants, honey-sweetened breads, substitutions for dietary preferences.

The calculators

Each preview is the real embed — what you see is what your readers will get.

Recipe Scaler

Scale a single ingredient up or down by servings.

paste this

<script async src="https://bakingcalc.app/embed.js" data-bakingcalc="recipe-scaler"></script>

Loading preview…

Hydration Calculator

Bread & sourdough hydration as a percent of flour weight.

paste this

<script async src="https://bakingcalc.app/embed.js" data-bakingcalc="hydration"></script>

Loading preview…

Baker's Percentage

Every ingredient as a % of flour — the bread-baker's lingua franca.

paste this

<script async src="https://bakingcalc.app/embed.js" data-bakingcalc="bakers-percentage"></script>

Loading preview…

Pan Size Converter

Scale a recipe between two pans by surface area.

paste this

<script async src="https://bakingcalc.app/embed.js" data-bakingcalc="pan-size-converter"></script>

Loading preview…

Yeast Converter

Swap between instant, active-dry, and fresh yeast by weight.

paste this

<script async src="https://bakingcalc.app/embed.js" data-bakingcalc="yeast-converter"></script>

Loading preview…

Sweetener Converter

Swap sugar for honey, maple syrup, and other sweeteners at correct ratios.

paste this

<script async src="https://bakingcalc.app/embed.js" data-bakingcalc="sweetener-converter"></script>

Loading preview…

Customizing the look

Three optional knobs. Add them as extra attributes on the <script> tag if you need them.

data-theme: auto (default) follows your reader's OS preference, so the calculator is light on light sites and dark on dark sites. Use light or dark to force one.
data-hand: auto (default, right-handed) or left. Flips the layout so primary controls sit on the dominant-thumb side on mobile.
data-height: Initial pixel height before the calculator loads (default 480). Only worth changing if you see a flash of empty space on slow networks.

Example with every option set:

paste this

<script async src="https://bakingcalc.app/embed.js"
        data-bakingcalc="hydration"
        data-theme="light"
        data-hand="right"
        data-height="520"></script>

Questions we've been asked

Does this cost anything?: No. We're self-funded and the goal of the embed is to help bakers find good tools, not to charge for them.
Do you track my readers?: We keep a site-wide hit counter so we know what's used, but nothing is stored per-visitor. No cookies, no tracking pixels, no identifiers of any kind sent to a third party.
Will the embed still work if bakingcalc.app goes down?: If we're down, the embed is down — it's a live iframe, not a static snapshot. Public status page at everydayapps.io/status.
Can I style the calculator to match my brand?: Not today. Style drift is a mess to maintain long-term and we'd rather ship a calculator that reads well on most sites than a thousand variants. The theme choice (light / dark / auto) covers the big swing.
Can I embed the same calculator twice on one page?: Yes. Each embed is independent — they don't share state.
Will old embeds keep working after an update?: Always. The URL bakingcalc.app/embed.js and the six calculator slugs are our committed, never-renamed contract. We may fix bugs or improve accessibility inside the calculator, but we won't break what you paste today.

Attribution

Every embed already includes a small "More calculators at everydayapps.io" link at the bottom — that's the full extent of the required attribution. An additional mention from the body of your post is appreciated but not required.

Got feedback, bug reports, or a calculator idea?

Use the feedback link in any of our apps' footers, or visit everydayapps.io. New calculators we've added have all come from requests — if there's one missing from your workflow, it probably belongs here.