embed-card

URL embed cards for YouTube, X, Reddit, Vimeo, Google Maps, and a link-preview fallback—usable from React or as a web component. This repo is a pnpm + Turborepo monorepo: the publishable package lives in packages/embed-card, and apps/web is the live demo and docs. For hostname rules, URL patterns, renderer types (iframe vs Reddit client preview), and how to customize, see the docs page Supported platforms.

Requirements: Node 20+ and pnpm 9 (see packageManager in the root package.json).

Workspace layout

apps/web/          Next.js site + docs playground (URL samples, preview, snippet copy)
packages/embed-card/   npm package: embed cards + providers
packages/ui/           Shared shadcn/ui
examples/              Standalone apps (Next, Vite+React, Vue, Svelte, vanilla)

Install & quick start (React)

pnpm add embed-card

import { EmbedCard } from "embed-card"

export function Demo() {
  return <EmbedCard url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
}

Other entry points: embed-card/manual (resolve/render without the full card UI), embed-card/web-component (custom element + registerEmbedCard()), embed-card/next-themes (ThemedEmbedCard — forwards site theme from next-themes). See packages/embed-card and examples/ for more.

What the package exposes

• EmbedCard — styled card for React / Next.js ("use client" where needed)
• ThemedEmbedCard — same props as EmbedCard, from embed-card/next-themes, for apps that already use next-themes
• registerEmbedCard() / custom element — use without React
• resolveEmbed() and provider helpers — built-ins plus custom EmbedProviders (also re-exported on the main entry for convenience)

Monorepo commands

pnpm install
pnpm dev        # docs app (web) only
pnpm build
pnpm lint
pnpm typecheck
pnpm format

Run a single workspace:

pnpm --filter web dev

Publish the embed-card package (maintainers): pnpm publish:embed-card from the repo root.

License

embed-card is published under the MIT License.