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

🙏 Credits

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

📋 Links

Made with ❤️ for the Svelte community

Package detail

sveltekit-embed

readme