trainfyi-embed

Embed TrainFYI widgets — stations, glossary terms, interactive tools, and inline elements — on any website. 6 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 TrainFYI database.

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

Try the interactive widget builder at widget.trainfyi.com

Quick Start

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

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

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

Widget Types

Type	Usage	Description
entity	<div data-trainfyi="entity" data-slug="..."></div>	Entity detail card — airport, airline, aircraft, or station
faq	<div data-trainfyi="faq" data-slug="..."></div>	FAQ accordion with expand/collapse
search	<div data-trainfyi="search" data-slug="..."></div>	Search box linking to the full database
compare	<div data-trainfyi="compare" data-slug="..."></div>	Side-by-side entity comparison
type-badge	<div data-trainfyi="type-badge" data-slug="..."></div>	Inline station type badge (e.g. "Terminal", "Junction")
amenities	<div data-trainfyi="amenities" data-slug="..."></div>	Inline amenities strip showing station facilities

Widget Options

Attribute	Values	Default	Description
data-trainfyi	entity, faq, search, compare, [tools]	required	Widget type
data-slug	e.g. "stations"	—	Entity slug from the TrainFYI 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 Stations..."	Search box placeholder

Themes

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

<!-- Dark -->
<div data-trainfyi="entity" data-slug="stations" data-theme="dark"></div>

<!-- Sepia -->
<div data-trainfyi="entity" data-slug="stations" data-theme="sepia"></div>

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

Styles

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

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

Web Components (Custom Elements)

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

<!-- Custom element form -->
<trainfyi-entity slug="stations" theme="light"></trainfyi-entity>
<trainfyi-compare slugs="stations,other-slug"></trainfyi-compare>
<trainfyi-search placeholder="Search Stations..."></trainfyi-search>

<script src="https://cdn.jsdelivr.net/npm/trainfyi-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-trainfyi="entity" data-slug="stations" data-theme="light"></div>
<script src="https://cdn.jsdelivr.net/npm/trainfyi-embed@1/dist/embed.min.js"></script>

Side-by-Side Comparison

<div data-trainfyi="compare" data-slugs="stations,other-slug"></div>
<script src="https://cdn.jsdelivr.net/npm/trainfyi-embed@1/dist/embed.min.js"></script>

Search Box

<div data-trainfyi="search" data-placeholder="Search Stations..."></div>
<script src="https://cdn.jsdelivr.net/npm/trainfyi-embed@1/dist/embed.min.js"></script>

CDN Options

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

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

Specific version (production stability)

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

npm (for bundlers)

npm install trainfyi-embed

import 'trainfyi-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: TrainFYI 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 TrainFYI

Learn More About Stations

Visit trainfyi.com — TrainFYI is a comprehensive stations reference with interactive tools, guides, and developer resources.

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

Transport FYI Family

Part of FYIPedia — open-source developer tools ecosystem. Transport FYI covers airports, airlines, aircraft, and railway networks. Hub: transitfyi.com.

Site	Domain	Focus	Package
AirportFYI	airportfyi.com	71,631 airports, IATA/ICAO codes, runways, routes	npm
AirlineFYI	airlinefyi.com	6,161 airlines, fleets, alliances, routes	npm
PlaneFYI	planefyi.com	81 aircraft types, specs, manufacturers, fleet data	npm
TrainFYI	trainfyi.com	51,425 stations, operators, route pairs	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

Embed Widget

Embed TrainFYI widgets on any website with trainfyi-embed:

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

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

License

MIT — see LICENSE.

Built with care by FYIPedia.