Getting started

Install

npm install docusaurus-plugin-embeds

Register the plugin

Add it to docusaurus.config.ts or docusaurus.config.js:

export default {
  plugins: ['docusaurus-plugin-embeds'],
};

Add an embed

The components are available in any MDXMDXA Markdown-based format that lets you write JSX inside your markdown, used by Docusaurus v3 for docs and pages. document without an import:

<GitHubRepoCard repo="facebook/docusaurus" />

<NpmPackageCard package="@docusaurus/core" />

<YouTube id="dQw4w9WgXcQ" title="A useful description of the video" />

<RichLinkCard url="https://docusaurus.io/blog/releases/3.0" />

LinkCard is also available as an alias for RichLinkCard in MDXMDXA Markdown-based format that lets you write JSX inside your markdown, used by Docusaurus v3 for docs and pages..

Use components in React

Code outside MDXMDXA Markdown-based format that lets you write JSX inside your markdown, used by Docusaurus v3 for docs and pages. can import the components directly. Import the stylesheet once near the root of your app:

import 'docusaurus-plugin-embeds/styles.css';
import {
  GitHubRepoCard,
  NpmPackageCard,
  RichLinkCard,
  YouTube,
} from 'docusaurus-plugin-embeds/client';

See configuration for component props and rich-link cache settings.