Free Grams to Cups Widget

Put a working grams to cups converter on your recipe page with one line of HTML. 22 ingredients, no sign-up, no tracking, no dependencies, and it keeps working even if this site goes down.

Built for food bloggers who are tired of readers asking how many cups 250 grams is.

Get the CodeSee It Running

Try It

This is the actual widget, running on this page exactly as it would on yours.

Copy This

Paste both lines wherever you want the converter to appear. The script tag only needs to be on the page once, however many widgets you add.

<div data-gramstocup data-ingredient="flour" data-grams="100"></div> <script src="https://gramstocup.co/assets/embed-v1.js" async></script>

Both attributes are optional. Leave them off and the widget opens on all-purpose flour at 100 grams.

Options

AttributeWhat it doesExample
data-gramstocupMarks the element as a widget. Required, no value needed.<div data-gramstocup></div>
data-ingredientWhich ingredient it opens on. Any slug from the dataset.data-ingredient="butter"
data-gramsStarting weight in grams.data-grams="250"

Valid ingredient slugs are listed in the density dataset, which is also downloadable as JSON and CSV if you would rather build your own.

Where It Works Best

The widget is most useful preset to the recipe it sits inside. A bread post that calls for 500 grams of flour can open the widget on flour at 500 grams, so a reader with only cups gets their answer without leaving the page or opening a second tab.

Every figure comes from the same published dataset as the rest of this site, with the source named for each ingredient. If a reader asks where the number came from, there is an answer.

Widget FAQ

Is the widget free?
Yes, for any site, commercial or not. There is no key, no sign-up and no usage limit. The widget renders a small credit link back to this site, which is the only condition.
Does it slow my page down?
The script is a single file of about 4 KB with no dependencies and no external requests. It loads asynchronously and does not block rendering.
Does it track my readers?
No. There are no cookies, no analytics, no network requests and nothing sent anywhere. The ingredient densities are inside the script file, so the widget works even if this site is unreachable.
Can I preset the ingredient and amount?
Yes. Set data-ingredient to any slug from the density dataset and data-grams to a starting weight, and the widget opens on that combination. Useful directly inside a recipe, preset to that recipe's flour weight.
Can I put more than one on a page?
Yes. Every element with the data-gramstocup attribute becomes its own widget, each with its own preset. The script only needs to be included once.
Will it match my site's design?
It inherits your page's text colour and uses a neutral card with system fonts, so it sits reasonably in most designs. All of its styles are scoped to its own class, so it will not affect anything else on the page.