https://github.com/1chooo/embed-card
https://github.com/1chooo/embed-card
embed-card npm react-tweet reddit-embed
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/1chooo/embed-card
- Owner: 1chooo
- Created: 2026-04-15T03:34:02.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-21T00:41:06.000Z (about 2 months ago)
- Last Synced: 2026-04-21T02:40:26.084Z (about 2 months ago)
- Topics: embed-card, npm, react-tweet, reddit-embed
- Language: TypeScript
- Homepage: https://1chooo.com/embed-card
- Size: 257 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://1chooo.com/embed-card). For hostname rules, URL patterns, renderer types (iframe vs Reddit client preview), and how to customize, see the docs page [Supported platforms](https://1chooo.com/embed-card/docs/platforms).
**Requirements:** [Node](https://nodejs.org/) 20+ and [pnpm](https://pnpm.io/) 9 (see `packageManager` in the root `package.json`).
## Workspace layout
```txt
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)
```bash
pnpm add embed-card
```
```tsx
import { EmbedCard } from "embed-card"
export function Demo() {
return
}
```
**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`](https://github.com/pacocoursey/next-themes)). See `packages/embed-card` and [`examples/`](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 `EmbedProvider`s (also re-exported on the main entry for convenience)
## Monorepo commands
```bash
pnpm install
pnpm dev # docs app (web) only
pnpm build
pnpm lint
pnpm typecheck
pnpm format
```
Run a single workspace:
```bash
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](packages/embed-card/LICENSE).
