Embed NutriFYI widgets — foods, glossary terms, interactive tools, and inline elements — on any website. 9 widget types, zero dependencies, Shadow DOM style isolation, 4 built-in themes (light, dark, sepia, auto), 2 styles (modern, clean), and live data from the NutriFYI database.

Every widget includes a "Powered by NutriFYI" backlink and a medical disclaimer directing readers to consult healthcare professionals.

Try the interactive widget builder at widget.nutrifyi.com

⚕️ Medical Disclaimer: All Health FYI widgets include an educational disclaimer. This information is for educational purposes only and should not replace professional medical advice.

<!-- Place widget div where you want it to appear -->
<div data-nutrifyi="entity" data-slug="foods" data-theme="light"></div>

<!-- Load the embed script once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/nutrifyi-embed@1/dist/embed.min.js"></script>

That's it. The widget fetches data from the NutriFYI API and renders with full style isolation.

<!-- Light (default) -->
<div data-nutrifyi="entity" data-slug="foods" data-theme="light"></div>

<!-- Dark -->
<div data-nutrifyi="entity" data-slug="foods" data-theme="dark"></div>

<!-- Sepia -->
<div data-nutrifyi="entity" data-slug="foods" data-theme="sepia"></div>

<!-- Auto — follows OS dark/light preference -->
<div data-nutrifyi="entity" data-slug="foods" data-theme="auto"></div>

<!-- Modern (default) — clean lines, rounded corners, accent gradients -->
<div data-nutrifyi="entity" data-slug="foods" data-style-variant="modern"></div>

<!-- Clean — minimal borders, utility-focused, data-first aesthetic -->
<div data-nutrifyi="entity" data-slug="foods" data-style-variant="clean"></div>

As an alternative to data-* attributes, you can use native HTML custom elements:

<!-- Custom element form -->
<nutrifyi-entity slug="foods" theme="light"></nutrifyi-entity>
<nutrifyi-compare slugs="foods,other-slug"></nutrifyi-compare>
<nutrifyi-search placeholder="Search Foods..."></nutrifyi-search>

<script src="https://cdn.jsdelivr.net/npm/nutrifyi-embed@1/dist/embed.min.js"></script>

Use style-variant (not style) to avoid conflicts with the HTML reserved style attribute.

<script src="https://cdn.jsdelivr.net/npm/nutrifyi-embed@1/dist/embed.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/embed.min.js"></script>

npm install nutrifyi-embed

import 'nutrifyi-embed';

• Shadow DOM: Complete style isolation — no CSS conflicts with your site
• Zero dependencies: No jQuery, React, or any external library
• 2 styles: Modern (accent gradients) and Clean (minimal, data-first)
• 4 themes: Light, Dark, Sepia, Auto (OS preference detection)
• CORS: NutriFYI API has CORS enabled for all origins
• MutationObserver: Works with dynamically added elements (SPAs)
• IntersectionObserver: Lazy loading — widgets only fetch when entering viewport (200px margin)
• Rich Snippets: DefinedTerm JSON-LD injected for glossary widgets
• Medical Disclaimer: All widgets include an educational disclaimer footer
• Bundle size: Tree-shaken per site — only includes tools available on NutriFYI

Visit nutrifyi.com — NutriFYI is a comprehensive foods reference with interactive tools, guides, and developer resources.

• API docs: nutrifyi.com/developers/
• Widget builder: widget.nutrifyi.com
• npm package: npmjs.com/package/nutrifyi-embed
• GitHub: github.com/fyipedia/nutrifyi-embed

Part of FYIPedia — open-source developer tools ecosystem. Health FYI covers anatomy, drugs, pharmacology, and nutrition. Hub: bodyfyi.com.

Embed NutriFYI widgets on any website with nutrifyi-embed:

<script src="https://cdn.jsdelivr.net/npm/nutrifyi-embed@1/dist/embed.min.js"></script>
<div data-nutrifyi="entity" data-slug="example"></div>

Zero dependencies · Shadow DOM · 4 themes (light/dark/sepia/auto) · Widget docs

MIT — see LICENSE.

Built with care by FYIPedia.