embed-card

embed-card is a frontend-first component package for turning links into embeds with one API:

import { EmbedCard } from "embed-card"

<EmbedCard url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />

Published as embed-card on npm.

What this repo includes

• A publishable package in packages/embed-card
• A Next.js docs site in apps/web, including an interactive Playground (also on the marketing home page under Playground): sample URLs, live preview, and a minimal <EmbedCard url={…} /> snippet you can copy from the code block
• Runnable starter apps under examples/ (Next.js App Router, Vite + React, Vue, Svelte, and vanilla TypeScript). Each example installs embed-card from npm and shares the same demo layout so you can compare stacks side by side.

The monorepo uses pnpm workspaces and Turborepo: root pnpm build and pnpm typecheck include the example apps; root pnpm dev runs the docs app only so local development stays a single dev server.

Built-in providers

See Supported platforms for hostname rules, which URL shapes resolve, iframe vs client preview behavior, and a customization map (theming, ctaLabel, custom providers, manual rendering).

Summary:

• YouTube
• X / Twitter
• Reddit (styled thread preview from Reddit’s public .json API in the browser, not redditmedia iframes)
• Google Maps
• Vimeo
• TikTok
• Instagram
• Fallback link preview for unmatched URLs

Design goal

EmbedCard renders a single embed surface — the content itself, with no surrounding title, description, or footer chrome. Consumers should only need one install for the common path, while still getting:

• A React component for Next.js and React apps
• Optional ThemedEmbedCard from embed-card/next-themes when the app already uses next-themes for document-level dark mode
• A web component export for other frameworks
• Low-level resolver helpers for manual rendering and custom provider registries