Skip to main content

External Components

Methods for embedding external content including HTML elements, images, videos, and React components in blog posts and documentation. This section covers techniques for integrating rich media and interactive elements.

What Are External Components?​

External components are content elements from outside sources:

  • 🌐 HTML Elements - Custom HTML and React components
  • 🖼️ Images - PNG and SVG image embedding
  • 🎥 Videos - YouTube and other video platform integration
  • ⚛️ React Components - Custom React component embedding
  • 🔗 External Resources - Integrating third-party content

Difference from Structural Components​

External Components vs Structural Components:

  • External Components → Content from external sources (images, videos, HTML) or custom React components
  • Structural Components → Built-in Docusaurus components (cards, buttons, headers, footers)

External components focus on media and custom elements, while structural components focus on built-in Docusaurus functionality.

What You'll Find Here​

  • HTML and React element embedding
  • Image optimization and embedding (PNG, SVG)
  • Video integration (YouTube, etc.)
  • Custom component creation
  • External resource integration
  • Media optimization techniques

Key Documents​