JSPM

unitfyi-embed

1.1.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 15
  • Score
    100M100P100Q70736F
  • License MIT

Embed UnitFYI widgets — unit converter, conversion cards, glossary terms. 220 units across 20 categories. Zero dependencies, Shadow DOM, 4 themes.

Package Exports

  • unitfyi-embed
  • unitfyi-embed/dist/embed.esm.js
  • unitfyi-embed/dist/embed.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (unitfyi-embed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

unitfyi-embed

npm TypeScript License: MIT Zero Dependencies

Embed UnitFYI widgets — units, 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, clean), and live data from the UnitFYI database.

Every widget includes a "Powered by UnitFYI" backlink directing readers to the full reference.

Try the interactive widget builder at widget.unitfyi.com

Quick Start

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

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

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

Widget Types

Type Usage Description
entity <div data-unitfyi="entity" data-slug="..."></div> Entity detail card — unit, city, holiday, or name
glossary <div data-unitfyi="glossary" data-slug="..."></div> Glossary term definition with cross-references
guide <div data-unitfyi="guide" data-slug="..."></div> Guide summary card with key takeaways
search <div data-unitfyi="search" data-slug="..."></div> Search box linking to the full database
compare <div data-unitfyi="compare" data-slug="..."></div> Side-by-side entity comparison
faq <div data-unitfyi="faq" data-slug="..."></div> FAQ accordion with expand/collapse
converter <div data-unitfyi="converter" data-slug="..."></div> Interactive unit converter — fully offline, 220+ units
conversion <div data-unitfyi="conversion" data-slug="..."></div> Inline conversion result pill (e.g. "1 km = 0.621 mi")

Widget Options

Attribute Values Default Description
data-unitfyi entity, compare, glossary, guide, search, faq, [tools] required Widget type
data-slug e.g. "units" — Entity slug from the UnitFYI database
data-theme light, dark, sepia, auto light Visual theme (auto follows OS preference)
data-style modern, clean modern Widget design style
data-size default, compact, large default Widget size
data-placeholder any string "Search Units..." Search box placeholder

Themes

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

<!-- Dark -->
<div data-unitfyi="entity" data-slug="units" data-theme="dark"></div>

<!-- Sepia -->
<div data-unitfyi="entity" data-slug="units" data-theme="sepia"></div>

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

Styles

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

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

Web Components (Custom Elements)

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

<!-- Custom element form -->
<unitfyi-entity slug="units" theme="light"></unitfyi-entity>
<unitfyi-compare slugs="units,other-slug"></unitfyi-compare>
<unitfyi-search placeholder="Search Units..."></unitfyi-search>

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

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

Examples

Entity Card

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

Side-by-Side Comparison

<div data-unitfyi="compare" data-slugs="units,other-slug"></div>
<script src="https://cdn.jsdelivr.net/npm/unitfyi-embed@1/dist/embed.min.js"></script>
<div data-unitfyi="search" data-placeholder="Search Units..."></div>
<script src="https://cdn.jsdelivr.net/npm/unitfyi-embed@1/dist/embed.min.js"></script>

Glossary Term

<div data-unitfyi="glossary" data-slug="example-term" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/unitfyi-embed@1/dist/embed.min.js"></script>

CDN Options

jsDelivr (recommended — global CDN, auto-updates with npm)

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

Specific version (production stability)

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

npm (for bundlers)

npm install unitfyi-embed
import 'unitfyi-embed';

Technical Details

  • 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: UnitFYI 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 UnitFYI

Learn More About Units

Visit unitfyi.com — UnitFYI is a comprehensive units reference with interactive tools, guides, and developer resources.

Utility FYI Family

Part of FYIPedia — open-source developer tools ecosystem. Utility FYI covers unit conversion, timezones, holidays, and names. Hub: toolfyi.com.

Site Domain Focus Package
UnitFYI unitfyi.com 220 units, 20 categories, offline converter npm
TimeFYI timefyi.com 6,040 cities, live world clock, sunrise data npm
HolidayFYI holidayfyi.com 626 holidays, 197 countries, live today feed npm
NameFYI namefyi.com 35,585 names, Hanja characters, Five Elements npm

FYIPedia Developer Tools

Package PyPI npm Description
colorfyi PyPI npm Color conversion, WCAG contrast, harmonies — colorfyi.com
emojifyi PyPI npm Emoji encoding & metadata for 3,953 emojis — emojifyi.com
unitfyi PyPI npm Unit conversion, 220 units — unitfyi.com
timefyi PyPI npm Timezone ops & business hours — timefyi.com
holidayfyi PyPI npm Holiday dates & Easter calculation — holidayfyi.com
namefyi PyPI npm Korean romanization & Five Elements — namefyi.com
fyipedia PyPI — Unified CLI for all FYI tools — fyipedia.com

License

MIT — see LICENSE.

Built with care by FYIPedia.