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.

✨ Features

• 🚀 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

📦 Installation

npm install sveltekit-embed

pnpm add sveltekit-embed

yarn add sveltekit-embed

🚀 Quick Start

Import and use any component in your Svelte/SvelteKit application:

<script>
	import { YouTube, Spotify, CodePen } from 'sveltekit-embed';
</script>

<!-- YouTube Video -->
<YouTube youTubeId="dQw4w9WgXcQ" />

<!-- Spotify Track -->
<Spotify
	spotifyLink="track/4iV5W9uYEdYUVa79Axb7Rh"
	width="100%"
	height="152"
/>

<!-- CodePen -->
<CodePen codePenId="xxGYWQG" height="300" defaultTab="result" />

🌟 Supported Platforms

| Platform | Component | Description | | ---------------- | ------------------ | ----------------------------------- | | AnchorFm | <AnchorFm /> | Podcast episodes from Anchor.fm | | Buzzsprout | <Buzzsprout /> | Podcast episodes from Buzzsprout | | CodePen | <CodePen /> | Interactive code examples | | Deezer | <Deezer /> | Music tracks and playlists | | GenericEmbed | <GenericEmbed /> | Generic iframe embed for any URL | | Gist | <Gist /> | GitHub Gists | | Guild | <Guild /> | Guild.xyz embeds | | Relive | <Relive /> | Relive activity summaries | | SimpleCast | <SimpleCast /> | SimpleCast podcast episodes | | Slides | <Slides /> | Slide presentations | | SoundCloud | <SoundCloud /> | Audio tracks from SoundCloud | | Spotify | <Spotify /> | Music tracks, albums, and playlists | | StackBlitz | <StackBlitz /> | Live coding environments | | Toot | <Toot /> | Mastodon posts | | Tweet | <Tweet /> | Twitter/X posts | | Vimeo | <Vimeo /> | Vimeo videos | | YouTube | <YouTube /> | YouTube videos | | Zencastr | <Zencastr /> | Zencastr podcast episodes |

📖 Usage Examples

YouTube

<script>
	import { YouTube } from 'sveltekit-embed';
</script>

<YouTube youTubeId="dQw4w9WgXcQ" aspectRatio="16:9" width="100%" />

Spotify

<script>
	import { Spotify } from 'sveltekit-embed';
</script>

<!-- Track -->
<Spotify spotifyLink="track/4iV5W9uYEdYUVa79Axb7Rh" />

<!-- Album -->
<Spotify spotifyLink="album/1DFixLWuPkv3KT3TnV35m3" />

<!-- Playlist -->
<Spotify spotifyLink="playlist/37i9dQZF1DXcBWIGoYBM5M" />

CodePen

<script>
	import { CodePen } from 'sveltekit-embed';
</script>

<CodePen
	codePenId="xxGYWQG"
	height="400"
	defaultTab="result"
	theme="dark"
/>

Anchor.fm

<script>
	import { AnchorFm } from 'sveltekit-embed';
</script>

<AnchorFm
	height="165"
	episodeUrl="purrfect-dev/embed/episodes/1-31---Delivering-Digital-Content-with-GraphCMS-e14g55c/a-a650v9a"
/>

⚡ Performance Features

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

🔧 TypeScript Support

Full TypeScript support is included with proper type definitions for all components and their props.

import type { YouTubeProps, SpotifyProps } from 'sveltekit-embed';

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines and code of conduct.

📝 License

MIT © Scott Spence

🙏 Credits

This project was inspired by @pauliescanlon's MDX Embed.

📋 Links

• Documentation
• GitHub Repository
• Issues
• Discussions

Made with ❤️ for the Svelte community