One app for docs and demos

Ship the package docs and the live playground from the same Next.js app.

`embed-card` now has a single home in the workspace: the documentation lives under `/docs`, and the interactive playground lives right here on the homepage.

Read the docsJump to the playground
What ships today
  • One publishable `embed-card` package in `packages/embed-card`.
  • Docs pages and the live playground inside `apps/web`.
  • React, web component, and manual rendering examples in one place.
  • Interactive provider and theme demos wired to the real workspace package.
YouTube

YouTube video

youtube.com

Playable YouTube embeds with lazy loading and no extra consumer setup.

One surface

The demo no longer lives in a separate app, so the docs and the playground evolve together.

Real package imports

The homepage preview renders `embed-card` directly from the workspace package, so breakages show up early.

Provider coverage

You can switch between YouTube, X, Reddit, Google Maps, and Vimeo without leaving the landing page.

Live playground

Try a URL and switch the package theme

Sample providers
Theme presets

Preview

`EmbedCard` rendered from the workspace package

Theme: Editorial
YouTube

YouTube video

youtube.com

Playable YouTube embeds with lazy loading and no extra consumer setup.

Quick start

Install once, then choose the surface you want

pnpm add embed-card
import { EmbedCard } from "embed-card"

export function SocialEmbed() {
  return <EmbedCard url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
}
import { EmbedCard } from "embed-card"

export function BrandedEmbed() {
  return (
    <EmbedCard
      url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      theme={{
        accentColor: "#e11d48",
        radius: 28,
      }}
    />
  )
}

Framework story

React first, but not React only

The same package exports a React component, a custom element registrar, and low-level helpers for manual rendering. That keeps the install surface small while still leaving room for Vue, Svelte, Astro, or plain HTML integrations.

import { registerEmbedCard } from "embed-card/web-component"

registerEmbedCard()

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