A collection of embed components for SvelteKit. Easily embed content from YouTube, Spotify, Vimeo, CodePen, and many more with performant, lazy-loaded components.
npm install sveltekit-embed
A collection of embed components for SvelteKit applications. Easily
embed content from popular platforms like YouTube, Spotify, Vimeo,
CodePen, and many more with performant, lazy-loaded components.
- 🚀 Lazy Loading: All components (except Toot and Tweet) use
intersection observer for performance
- 📱 Responsive: Mobile-friendly designs that adapt to different
screen sizes
- 🎨 Customizable: Flexible props to customize appearance and
behavior
- 🔒 TypeScript: Full TypeScript support with proper type
definitions
- ⚡ SvelteKit Optimized: Built specifically for SvelteKit
applications
- 🌐 19 Platforms Supported: Wide range of supported embed
platforms
``bash`
npm install sveltekit-embed
`bash`
pnpm add sveltekit-embed
`bash`
yarn add sveltekit-embed
Import and use any component in your Svelte/SvelteKit application:
`svelte
width="100%"
height="152"
/>
`
| Platform | Component | Description |
| ---------------- | ------------------ | ----------------------------------- |
| AnchorFm | | Podcast episodes from Anchor.fm |
| Buzzsprout | | Podcast episodes from Buzzsprout |
| CodePen | | Interactive code examples |
| Deezer | | Music tracks and playlists |
| GenericEmbed | | Generic iframe embed for any URL |
| Gist | | GitHub Gists |
| Guild | | Guild.xyz embeds |
| Relive | | Relive activity summaries |
| SimpleCast | | SimpleCast podcast episodes |
| Slides | | Slide presentations |
| SoundCloud | | Audio tracks from SoundCloud |
| Spotify | | Music tracks, albums, and playlists |
| StackBlitz | | Live coding environments |
| Toot | | Mastodon posts |
| Tweet | | Twitter/X posts |
| Vimeo | | Vimeo videos |
| YouTube | | YouTube videos |
| Zencastr | | Zencastr podcast episodes |
`svelte
`
`svelte
`
`svelte
height="400"
defaultTab="result"
theme="dark"
/>
`
`svelte
episodeUrl="purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a"
/>
`
All embed components (except Toot and Tweet) are automatically
wrapped with an intersection observer that:
- Only loads the embed when it's about to enter the viewport
- Reduces initial page load time
- Improves Core Web Vitals scores
- Saves bandwidth for users
Full TypeScript support is included with proper type definitions for
all components and their props.
`typescript``
import type { YouTubeProps, SpotifyProps } from 'sveltekit-embed';
Contributions are welcome! Please read our
contributing guidelines
and
code of conduct.
MIT © Scott Spence
This project was inspired by
@pauliescanlon's
MDX Embed.
- Documentation
- GitHub Repository
- Issues
- Discussions
---
Made with ❤️ for the Svelte community