Skip to content

component

Recipe Scaler

By Michelle de Haas | Zo-e

Details

Summary

Recipe Scaler is an ingredient list with a servings stepper.

Description

Recipe Scaler is an ingredient list with a servings stepper. Change the servings and every amount recalculates, in fractions a cook can actually measure: 1½ cups, not 1.4999. Grams and millilitres round to weighable numbers, eggs and cloves stay whole, and cups convert to metric when the visitor asks. Computed in the browser, so there is no API, no keys and no backend. Write amounts the way a cookbook does: 1 1/2, ½, 2-3, or nothing at all for to taste. Add a note, a group heading, and a grams per cup for the ingredients you want converted by weight. Pick a stepper (buttons, slider or preset chips), a range, one or two columns, and your colors. Servings stepper: buttons, slider or preset chips Cookbook fractions: halves, thirds, quarters and eighths Eggs, cloves and slices always come out whole Metric, US, as written, or a toggle the visitor controls Grams and millilitres round to numbers you can weigh Group headings, notes, ranges and to taste ingredients Checkable rows and a copy icon in the corner Servings controls in their own capsule, on the title row or at the foot Optional torn paper top edge Five languages plus custom text One or two columns, full control of colors and type Accessible list, labelled buttons and a live region Demo: https://recipescaler.framer.website

Introduction

An ingredient list that rescales

Rank history

Daily rank per list, from the first snapshot — lower is better.

11001200124739/89/99/119/139/15
  • All · #1628