Sveltweet (Svelte + Tweet)

The best way to embed tweets in your Svelte app, supporting both SSR and static prerendering modes.

• The tweet is loaded in the server-side.
• No need for any additonal client-side scripts.
• No need for any loading UI, the tweet is available immediately.
• Supports both SSR and prerendering.

This package is a Svelte version of vercel/react-tweet licensed under MIT License, many thanks to the original authors for making it possible!

This repo is fork of fayez-nazzal/sveltekit-tweet

Requirements

• Svelte 5.0.0-next or later ( This libray uses runes )

Installation

npx nypm add sveltweet

Usage

SvelteKit

1. Go to the tweet you want to embed. You will find the URL

2. Use the getTweet function in your +page.server.ts file to fetch the tweet data.

   import { getTweet } from 'sveltweet/api';
   import { error } from '@sveltejs/kit';
   import type { RequestEvent } from './$types';
   
   export async function load({ params }: RequestEvent) {
       const { id } = params;
       try {
           const tweet = await getTweet(id);
   
           return { tweet };
       }
       catch {
           return error(500, 'Could not load tweet');
       }
   }
   

3. Use the Tweet component in your +page.svelte file to render the tweet.

   <script lang='ts'>
       import { Tweet } from 'sveltweet';
       import type { PageData } from './$types';
   
       const { data }: { data: PageData } = $props()
   </script>
   
   <Tweet tweet={data.tweet} />
   

Svelte

<script lang='ts'>
    import { Tweet } from 'sveltweet';
    import { getTweet } from 'sveltweet/api';

    const id = '';
</script>

{#await getTweet(id) then tweet}
    <Tweet tweet={data.tweet} />
{/await}

Customisation

Tweet shares the same CSS file with react-tweet. So, refer to the Custom Theme section in the react-tweet documentation to customise the tweet appearance.

License

MIT