TypeScript icon, indicating that this package has built-in type declarations

0.0.12 • Public • Published

SvelteKit Embed

All Contributors shield

This is a collection of embed components I use on a regular basis packaged up for use.

sveltekit embed cover

Each component with the exception of Toot and Tweet is wrapped in an intersection observer GeneralObserver which will load up the component when it scrolls into the viewport.

Use it

npm i -D sveltekit-embed

Use like a normal Svelte component:

  import { AnchorFm } from 'sveltekit-embed'


Supported platforms

  • AnchorFm
  • Buzzsprout
  • CodePen
  • Deezer
  • GenericEmbed
  • Gist
  • Guild
  • Relive
  • SimpleCast
  • Slides
  • SoundCloud
  • Spotify
  • StackBlitz
  • Toot
  • Tweet
  • Vimeo
  • YouTube
  • Zencastr

Got questions?

Start a discussion

Something not work?

Create an issue


  • [ ] Add more components
  • [ ] Tests... need expanding
  • [x] If you know how to type a custom action in Svelte, please submit a PR

Developing locally

Rename the .sample.env file to .env.

mv .sample.env .env

Create the component in the src/lib/components directory.

Add the component to the src/lib/index.ts file:

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

Import the component locally into the src/routes/ file:

import { MyComponent } from '$lib'

After importing the component, add it to the Available Components List and document it:

## Available Components List

- [MyComponent](#mycomponent)
## MyComponent


myComponentId: string = ''


<MyComponent myComponentId="..." />


<MyComponent myComponentId="..." />

Test the package locally with the package:local script:

npm run package:local

Test locally, then submit a PR 🙏


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 sveltkit
pnpm run package
# publish from package directory
cd package
# publish
npm publish
# push tags to github
git push --tags


Thanks goes to these wonderful people

Scott Spence
Scott Spence


Matías Hernández Arellano
Matías Hernández Arellano

Julian Laubstein
Julian Laubstein

Maxime Dupont
Maxime Dupont

James Perkins
James Perkins

João Palmeiro
João Palmeiro

Add your contributions

(emoji key):

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

Package Sidebar


npm i sveltekit-embed

Weekly Downloads






Unpacked Size

358 kB

Total Files


Last publish


  • spences10