Add AirportFYI transport data widgets to your blog, app, or documentation with a single script tag. Shadow DOM isolation ensures zero CSS conflicts.
Add the script tag and use the custom element — it just works.
① Add the script
<script src="https://cdn.jsdelivr.net/npm/airportfyi-embed@1/dist/embed.min.js"></script>② Use the element
<data-airportfyi-entity
slug="airports"
theme="auto"
style-variant="technical"
></data-airportfyi-entity>That's it. The widget loads data from the AirportFYI API, renders in Shadow DOM, and adapts to the page's color scheme automatically.
All widget types, both styles, light and dark themes.
<data-airportfyi-entity
slug="airports"
theme="light"
style-variant="technical"
></data-airportfyi-entity><data-airportfyi-entity
slug="airports"
theme="dark"
style-variant="modern"
></data-airportfyi-entity><data-airportfyi-glossary
slug="iata-code"
theme="light"
style-variant="technical"
></data-airportfyi-glossary><data-airportfyi-glossary
slug="iata-code"
theme="dark"
style-variant="modern"
></data-airportfyi-glossary><data-airportfyi-faq
slug="airports"
theme="light"
limit="5"
></data-airportfyi-faq><data-airportfyi-faq
slug="airports"
theme="dark"
style-variant="modern"
rich-snippet="true"
></data-airportfyi-faq><data-airportfyi-search
theme="light"
placeholder="Search AirportFYI..."
limit="5"
></data-airportfyi-search><data-airportfyi-search
theme="dark"
style-variant="modern"
limit="8"
></data-airportfyi-search><data-airportfyi-compare
slug-a="airports"
slug-b="example-b"
theme="light"
></data-airportfyi-compare><data-airportfyi-compare
slug-a="airports"
slug-b="example-b"
theme="dark"
style-variant="modern"
></data-airportfyi-compare><data-airportfyi-guide
slug="airline-alliances"
theme="light"
></data-airportfyi-guide><data-airportfyi-guide
slug="airline-alliances"
theme="dark"
style-variant="modern"
></data-airportfyi-guide>Inline badges render as compact spans — perfect for embedding within prose or tables.
AirportFYI — type-badge
<airportfyi-type-badge
slug="JFK"
theme="auto"
></airportfyi-type-badge>AirlineFYI — route-badge
<airlinefyi-route-badge
slug="united-airlines"
theme="auto"
></airlinefyi-route-badge>PlaneFYI — seats-badge
<planefyi-seats-badge
slug="boeing-737-800"
theme="auto"
></planefyi-seats-badge>TrainFYI — type-badge + amenities
<trainfyi-type-badge
slug="shinkansen"
theme="auto"
></trainfyi-type-badge>
<trainfyi-amenities
slug="shinkansen"
></trainfyi-amenities>All widgets share these data-* attributes.
| Attribute | Type | Default | Description |
|---|---|---|---|
| slug | string | required | Entity identifier (e.g. JFK, united-airlines) |
| theme | string | "auto" | Color theme: light · dark · sepia · auto |
| style-variant | string | "technical" | Visual style: technical · modern |
| size | string | "default" | Widget size: compact (280px) · default (420px) · large (720px) |
| lang | string | "en" | Display language (ISO 639-1, e.g. ja, es) |
| limit | number | 5 | Max results for list/search widgets |
| rich-snippet | boolean | false | Inject FAQPage JSON-LD into host page (FAQ widgets only) |
| no-powered-by | boolean | false | Hide the "Powered by airportfyi.com" backlink |
2 visual styles × 4 color themes = 8 combinations.
Clean white background. Ideal for light-themed sites.
Deep dark background. Matches dark-mode layouts.
Warm amber tone. Great for editorial content.
Follows OS prefers-color-scheme with live updates.
Structured data layout with clear hierarchy, specification tables, and monospace labels. Designed for aviation and railway technical data.
Clean card-based layout with rounded corners and subtle shadows. Works well in content sites, travel blogs, and general-purpose embeds.
Three ways to load the widget bundle.
Global CDN, automatic versioning, 99.9% uptime SLA.
<script src="https://cdn.jsdelivr.net/npm/airportfyi-embed@1/dist/embed.min.js"></script>Import in your JS bundle (Vite, Webpack, Rollup).
npm install airportfyi-embedimport "airportfyi-embed";Download and host on your own CDN or R2 bucket.
<script src="/assets/airportfyi-embed.min.js"></script>Download from GitHub Releases.
AirportFYI is part of the Transport FYI family — aviation, rail, and flight data for developers.
| Site | Domain | Focus | npm Package |
|---|---|---|---|
| AirportFYI | airportfyi.com | 4,500+ airports, IATA/ICAO codes, runways, routes | airportfyi-embed |
| AirlineFYI | airlinefyi.com | Airlines, fleets, alliances, global routes | airlinefyi-embed |
| PlaneFYI | planefyi.com | Aircraft models, specs, manufacturers, seat maps | planefyi-embed |
| TrainFYI | trainfyi.com | Railway stations, train routes, rail networks, amenities | trainfyi-embed |
AirportFYI Embed is part of FYIPedia — open-source data widgets across 6 domain families.
| Family | Sites | Focus |
|---|---|---|
| Transport FYI ★ | AirportFYI, AirlineFYI, PlaneFYI, TrainFYI | Aviation, airlines, aircraft, railways |
| Creative FYI | ColorFYI, FontFYI, EmojiFYI, SymbolFYI, UnicodeFYI | Design tools, typography, characters |
| Geo FYI | DistanceFYI, MountainFYI, QuakeFYI, ZipFYI | Distance, geography, seismic, postal |
| Health FYI | AnatomyFYI, PillFYI, DrugFYI, NutriFYI | Anatomy, medications, nutrition |
| Network FYI | CableFYI, IPFYI, StatusCodeFYI | Internet infrastructure, IP, protocols |
| Nature FYI | SpeciesFYI, BirdFYI, FishFYI, PlantFYI, DinoFYI | Wildlife, species, paleontology |