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

📖 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