Embed GemFYI widgets — gems, glossary terms, interactive tools, and inline elements — on any website. 8 widget types, zero dependencies, Shadow DOM style isolation, 4 built-in themes (light, dark, sepia, auto), 2 styles (modern, technical), and live data from the GemFYI database.
Every widget includes a "Powered by GemFYI" backlink directing readers to the full reference.
Try the interactive widget builder at widget.gemfyi.com
<!-- Place widget div where you want it to appear -->
<div data-gemfyi="entity" data-slug="gems" data-theme="light"></div>
<!-- Load the embed script once, anywhere on the page -->
<script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script>That's it. The widget fetches data from the GemFYI API and renders with full style isolation.
| Type | Usage | Description |
|---|---|---|
entity |
<div data-gemfyi="entity" data-slug="..."></div> |
Entity detail card — element, alloy, gem, star, or mineral |
glossary |
<div data-gemfyi="glossary" data-slug="..."></div> |
Glossary term definition with cross-references |
guide |
<div data-gemfyi="guide" data-slug="..."></div> |
Guide summary card with key takeaways |
compare |
<div data-gemfyi="compare" data-slug="..."></div> |
Side-by-side entity comparison |
search |
<div data-gemfyi="search" data-slug="..."></div> |
Search box linking to the full database |
mohs-scale |
<div data-gemfyi="mohs-scale" data-slug="..."></div> |
Mohs hardness scale visualization with colored segments |
optical-card |
<div data-gemfyi="optical-card" data-slug="..."></div> |
Gemological optical properties — RI, birefringence, dispersion |
mohs-inline |
<div data-gemfyi="mohs-inline" data-slug="..."></div> |
Inline Mohs hardness dot + number |
| Attribute | Values | Default | Description |
|---|---|---|---|
data-gemfyi |
entity, compare, glossary, guide, search, [tools] | required | Widget type |
data-slug |
e.g. "gems" | — | Entity slug from the GemFYI database |
data-theme |
light, dark, sepia, auto | light | Visual theme (auto follows OS preference) |
data-styleVariant |
modern, technical | modern | Widget design style |
data-size |
default, compact, large | default | Widget size |
data-placeholder |
any string | "Search Gems..." | Search box placeholder |
<!-- Light (default) -->
<div data-gemfyi="entity" data-slug="gems" data-theme="light"></div>
<!-- Dark -->
<div data-gemfyi="entity" data-slug="gems" data-theme="dark"></div>
<!-- Sepia -->
<div data-gemfyi="entity" data-slug="gems" data-theme="sepia"></div>
<!-- Auto — follows OS dark/light preference -->
<div data-gemfyi="entity" data-slug="gems" data-theme="auto"></div><!-- Modern (default) — clean lines, rounded corners, accent gradients -->
<div data-gemfyi="entity" data-slug="gems" data-styleVariant="modern"></div>
<!-- Technical — monospace type, grid overlays, laboratory aesthetic -->
<div data-gemfyi="entity" data-slug="gems" data-styleVariant="technical"></div>As an alternative to data-* attributes, you can use native HTML custom elements:
<!-- Custom element form -->
<gemfyi-entity slug="gems" theme="light"></gemfyi-entity>
<gemfyi-compare slugs="gems,other-slug"></gemfyi-compare>
<gemfyi-search placeholder="Search Gems..."></gemfyi-search>
<script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script>Use style-variant (not style) to avoid conflicts with the HTML reserved style attribute.
<div data-gemfyi="entity" data-slug="gems" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script><div data-gemfyi="compare" data-slugs="gems,other-slug"></div>
<script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script><div data-gemfyi="search" data-placeholder="Search Gems..."></div>
<script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script><div data-gemfyi="glossary" data-slug="example-term" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script><script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/embed.min.js"></script>npm install gemfyi-embedimport 'gemfyi-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 Technical (monospace, lab aesthetic)
- 4 themes: Light, Dark, Sepia, Auto (OS preference detection)
- CORS: GemFYI 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
- Bundle size: Tree-shaken per site — only includes tools available on GemFYI
Visit gemfyi.com — GemFYI is a comprehensive gems reference with interactive tools, guides, and developer resources.
- API docs: gemfyi.com/developers/
- Widget builder: widget.gemfyi.com
- npm package: npmjs.com/package/gemfyi-embed
- GitHub: github.com/fyipedia/gemfyi-embed
Part of FYIPedia — open-source developer tools ecosystem. Science FYI covers chemistry, geology, astronomy, and materials science. Hub: labfyi.com.
| Site | Domain | Focus | Package |
|---|---|---|---|
| ChemFYI | chemfyi.com | Periodic table, elements, compounds, reactions | npm |
| AlloyFYI | alloyfyi.com | Metal alloys, compositions, properties, 6-axis ratings | npm |
| GemFYI | gemfyi.com | Gemstones, Mohs hardness, optical properties, origins | npm |
| StarFYI | starfyi.com | Stars, constellations, spectral classification, magnitudes | npm |
| MineralFYI | mineralfyi.com | 6,215 minerals, crystal systems, Mohs hardness | npm |
Embed GemFYI widgets on any website with gemfyi-embed:
<script src="https://cdn.jsdelivr.net/npm/gemfyi-embed@1/dist/embed.min.js"></script>
<div data-gemfyi="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.