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 additional 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.16.0 or later ( This library uses runes )

Installation

``bash
npx nypm add sveltweet
`

Usage

$3

#### Recommended: Using Remote Functions

The simplest way to embed tweets is using SvelteKit's remote functions. This approach allows you to fetch tweet data directly inside your components without setting up separate server files.

1. Create a remote function to fetch tweet data:

`ts
// src/lib/tweet.remote.ts
import { query } from '@sveltejs/kit';
import { getTweet } from 'sveltweet/api';

export const getTweetData = query(async (id: string) => getTweet(id));
`

2. Use it directly in your component:

Recommended way to use the Tweet component with remote functions:
`svelte





{#snippet pending()}

{/snippet}
{#snippet failed()}

{/snippet}

`

Or, if you prefer to handle loading states manually:
`svelte



{#if tweet.error}


Error loading tweet: {tweet.error.message}

{:else if tweet.loading}

Loading tweet...

{:else if tweet.ready}

{/if}
`

> [!NOTE]
> Remote functions and await syntax require configuration. See the SvelteKit remote functions documentation and Svelte await expressions documentation for setup instructions.

> [!IMPORTANT]
> When using await directly, make sure to wrap your component with for error handling. See the Svelte boundary documentation for details.

#### Alternative: Using Traditional Loaders

If you prefer the traditional approach or need more control over data loading:

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.

`ts
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.

`svelte



`

$3

`svelte


{#await getTweet(id) then 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