Add BrewFYI recipe cards, comparison tables, glossary terms, FAQs, guides, and interactive tools to any website with a single line of HTML. No build tools. No dependencies. Live data from the BrewFYI database.
Recipe Card Preview
Two lines of HTML. That's all it takes.
Select a widget type to preview. Every widget includes Shadow DOM isolation and a "Powered by BrewFYI" backlink.
Widget preview loads from live API
Widget preview loads from live API
Configure widgets with data-* attributes.
| Attribute | Values | Default | Description |
|---|---|---|---|
| data-brewfyi | recipe, compare, glossary, faq, guide, ingredient, pairing, search | required | Widget type to render |
| data-slug | any slug | — | Entity slug from the BrewFYI database |
| data-theme | light, dark, sepia, auto | light | Visual theme (auto follows OS preference) |
| data-style | modern, classic | modern | Widget design style |
| data-size | default, compact, large | default | Widget size |
| data-slug-a | any slug | — | First entity for compare widget |
| data-slug-b | any slug | — | Second entity for compare widget |
| data-placeholder | any string | Search... | Search box placeholder text |
2 design styles × 3 themes. Mix and match to fit your site.
System-ui font, card-based layout, rounded corners. Ideal for product pages and marketing sites. Default style.
Serif-accented, structured layout, traditional spacing. Ideal for editorial content and reference sites.
Set explicitly or use auto to follow the visitor's OS preference (prefers-color-scheme).
Warm paper-tone background. Perfect for beverage blogs, recipe sites, and editorial content.
Multiple delivery options to fit your workflow.
Global CDN, auto-updates with npm. Recommended for most use cases.
<script src="https://cdn.jsdelivr.net/npm/brewfyi-embed@1/dist/embed.min.js"></script>
For Webpack, Vite, Rollup bundlers.
npm install brewfyi-embed // In your JS/TS: import 'brewfyi-embed';
Lock to a specific version for production stability.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/embed.min.js"></script>
Part of FYIPedia — open-source developer tools for world beverages: cocktails, wine, beer, whiskey, sake, tea, and coffee.
| Site | Domain | Package |
|---|---|---|
| CocktailFYI | cocktailfyi.com | npm |
| VinoFYI | vinofyi.com | npm |
| BeerFYI | beerfyi.com | npm |
| BrewFYI | brewfyi.com | npm |
| WhiskeyFYI | whiskeyfyi.com | npm |
| TeaFYI | teafyi.com | npm |
| NihonshuFYI | nihonshufyi.com | npm |