SvelteKit Embed

Embed media in your Svelte apps.

A collection of embed components I use on a regular basis, packaged up for use: videos, podcasts, social posts and code. They work in Svelte files and in Markdown with mdsvex.

Docs and live examples: https://sveltekit-embed.pages.dev

Use it

Add the package to a SvelteKit project. It needs Svelte 5.29 or later.

pnpm add -D sveltekit-embed

Import the component you need and give it an ID or a link:

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

<YouTube youtube_id="dQw4w9WgXcQ" />

It works the same way in Markdown with mdsvex:

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

# My post

<YouTube youtube_id="dQw4w9WgXcQ" />

Components

Each one has a page on the docs site with a live example, usage and a table of its props.

Video

• TikTok
• Vimeo
• YouTube

Audio and podcasts

• AnchorFm
• Buzzsprout
• Deezer
• SimpleCast
• SoundCloud
• Spotify
• Zencastr

Social posts

• Bluesky
• Threads
• Toot
• Tweet

Code

• CodePen
• Gist
• StackBlitz

Everything else

• GenericEmbed, an iframe for anything without its own component yet
• Guild
• Relive
• Slides

Lazy loading

Every iframe embed sets loading="lazy", so the browser only loads it when it is close to the viewport. Pass loading="eager" to load one straight away.

The package also exports in_view, an attachment for lazy loading your own markup. See how lazy loading works.

Got questions?

Start a discussion

Something not work?

Create an issue

Developing locally

For the web app and testing new components there you'll need to have empty env variables. Rename the .sample.env file to .env.

mv .sample.env apps/web/.env

Start the docs site, which packages the library first:

pnpm install
pnpm run dev:web

Adding a component

Create the component in the packages/sveltekit-embed/src/lib/components directory.

Export the component from the packages/sveltekit-embed/src/lib/index.ts file:

export { default as MyComponent } from './components/my-component.svelte';

Then document it in the web app. The docs tests fail until all three of these are done, so a component can't ship without them.

1. Add an entry to apps/web/src/lib/docs/components.ts with its name, category, description, search keywords and props. The home page, the command palette and the props table are built from this.

2. Add its page at apps/web/src/lib/content/components/mycomponent.md, named as the component in lower case. A fence marked live renders the embed and shows its source:

   <script>
   	import { MyComponent } from 'sveltekit-embed';
   </script>
   
   ```svelte live
   <MyComponent my_component_id="..." />
   ```
   
   Anything a reader needs to know to find the ID goes here.

3. Render its share image:

   pnpm --filter=web run share-cards

Run the checks, then submit a PR 🙏

pnpm run check
pnpm run test:ci

Thanks

Credit to @pauliescanlon for the original version of this project in MDX Embed.

Packaging for NPM

Scott, this is here for you to remember how to do this 🙃

Although I detailed this in Making npm Packages with SvelteKit I think it's best to put it here as I always come to the README and the instructions are never there! 😅

Publish the project to NPM

# authenticate with npm
npm login
# bump version with npm
npm version 0.0.8
# package with sveltekit
pnpm run package
# publish
npm publish
# push tags to github
git push --tags

Publish @next package

Same procedure except use the --tag flag:

# authenticate with npm
npm login
# bump version with npm
npm version 0.0.13
# package with sveltekit
pnpm run package
# publish with tag
npm publish --tag next
# push tags to github
git push --tags

Move @next package to latest

# authenticate with npm
npm login
# move @next to latest
npm dist-tag add sveltekit-embed@0.0.13 latest

Contributors ✨

Thanks goes to these wonderful people

Scott Spence 💻	Cahllagerfeld 💻	Matías Hernández Arellano 💻	Julian Laubstein 💻	Maxime Dupont 💻	James Perkins 💻	João Palmeiro 💻
Jason Dent 💻
Add your contributions

(emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!