MountainFYI Embed
Zero Dependencies · Shadow DOM · 4 Themes · Live Geo Data

Embed Mountains
on Any Website

Add MountainFYI entity cards, glossary terms, interactive tools, and inline badges to any website with a single line of HTML. No build tools. No dependencies. Live geographic data from the MountainFYI database.

HTML
<!-- 1. Place the widget div -->
<div data-mountainfyi="entity" data-slug="mountains"></div>

<!-- 2. Add the script once -->
<script src="https://cdn.jsdelivr.net/npm/mountainfyi-embed@1/dist/embed.min.js"></script>

Entity Card Preview

Mountains Live
NameExample Location
RegionGlobal
DataLive from MountainFYI

Quick Start

Two lines of HTML. That's all it takes.

HTML
<!-- Step 1: Place widget divs anywhere on your page -->
<div data-mountainfyi="entity" data-slug="mountains" data-theme="light"></div>
<div data-mountainfyi="glossary" data-slug="example-term"></div>
<div data-mountainfyi="search" data-placeholder="Search Mountains..."></div>

<!-- Step 2: Load the embed script once, anywhere -->
<script src="https://cdn.jsdelivr.net/npm/mountainfyi-embed@1/dist/embed.min.js"></script>
🌍
Live Geo Data
Direct from the MountainFYI database.
Zero Dependencies
No jQuery, React. Tiny bundle.
🔒
Shadow DOM Isolation
No CSS conflicts with your site.

Widget Types × 2 Styles × 3 Themes

Select a widget type to see both design styles in Light and Dark. Every widget includes Shadow DOM isolation and a "Powered by MountainFYI" backlink.

Widget Options

Configure each widget with data-* attributes.

Attribute Values Default Description
data-mountainfyientity, glossary, faq, searchrequiredWidget type to render
data-sluge.g. "mountains"Entity slug from the MountainFYI database
data-themelight, dark, sepia, autolightVisual theme (auto follows OS preference)
data-stylemodern, cleanmodernWidget design style
data-sizedefault, compact, largedefaultWidget size
data-placeholderany string"Search..."Search box placeholder text

Styles & Themes

2 design styles × 4 themes = 8 combinations for any site.

Light

Clean white background. Ideal for light-themed websites.

data-theme="light"
Dark

Deep slate background. Perfect for dark-mode websites.

data-theme="dark"
Sepia

Warm tone. Great for editorial and content-rich sites.

data-theme="sepia"
Auto

Follows OS dark/light preference with live updates.

data-theme="auto"
HTML
<!-- Light (default) -->
<div data-mountainfyi="entity" data-slug="mountains" data-theme="light"></div>
<!-- Dark -->
<div data-mountainfyi="entity" data-slug="mountains" data-theme="dark"></div>
<!-- Sepia -->
<div data-mountainfyi="entity" data-slug="mountains" data-theme="sepia"></div>
<!-- Auto — follows OS preference -->
<div data-mountainfyi="entity" data-slug="mountains" data-theme="auto"></div>

CDN Options

Multiple delivery options for production or development.

Recommended

jsDelivr

Free global CDN. Auto-versioned. 110+ PoPs worldwide.

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

npm install

Use as an ESM module in your build pipeline.

npm install mountainfyi-embed
import 'mountainfyi-embed';

Self-hosted

Download and serve from your own infrastructure.

<!-- Download from npm -->
<script src="/path/to/mountainfyi-embed.min.js"></script>

Geo FYI Family

Part of the FYIPedia open-source developer tools ecosystem.

Site Domain Focus Embed
DistanceFYIdistancefyi.com33,336 cities, Haversine distance, travel timesdistancefyi-embed
MountainFYImountainfyi.com2,000 mountains, elevation, difficulty gradesmountainfyi-embed
QuakeFYIquakefyi.com20,702 earthquakes, magnitude scale, USGS alertsquakefyi-embed
ZipFYIzipfyi.com41,488 postal codes, demographics, median incomezipfyi-embed

FYIPedia Developer Tools

Open-source embed widgets across the FYIPedia ecosystem.

Family Packages Focus
Geo FYIdistancefyi/mountainfyi/quakefyi/zipfyi-embedCities, mountains, earthquakes, postal codes
Transport FYIairportfyi/airlinefyi/planefyi/trainfyi-embedAirports, airlines, aircraft, train stations
Health FYIanatomyfyi/pillfyi/drugfyi/nutrifyi-embedAnatomy, drugs, pills, nutrition data
Network FYIcablefyi/ipfyi/statuscodefyi-embedCables, IP networks, HTTP status codes
Science FYIchemfyi/alloyfyi/gemfyi/starfyi/mineralfyi-embedChemistry, alloys, gems, stars, minerals
Creative FYIcolorfyi/emojifyi/fontfyi/symbolfyi/unicodefyi-embedColors, emojis, fonts, symbols, unicode