@peekjs/svelte

Svelte 5 bindings for Peek — live link-hover previews.

Install

npm install @peekjs/svelte

Option A — use:peekLink action (custom component card)

Render a fully typed Svelte component inside the preview:

<script>
  import { peekLink } from '@peekjs/svelte';
  import UserCard from './UserCard.svelte';

  let user = $state({ name: 'Jane', avatar: '/jane.jpg' });
</script>

<a href="/user/1" use:peekLink={{ component: UserCard, props: { user } }}>
  Jane Doe
</a>

Pass options on any one link to configure the global Peek instance:

<a href="/docs"
  use:peekLink={{
    component: DocPreview,
    props: { slug: 'intro' },
    options: { delay: 200, corsProxy: 'https://proxy.example.com/?url={{url}}' },
  }}
>Docs</a>

Option B — usePeek helper (whole page)

<script>
  import { usePeek } from '@peekjs/svelte';
  usePeek({ selector: 'a[data-peek]', delay: 200 });
</script>

Option C — use:peek action

<div use:peek={{ selector: 'a[data-peek]', delay: 200 }}>
  <a href="/docs" data-peek>Docs</a>
</div>

Options

All @peekjs/core options are accepted.

Links

• Full docs & demo
• GitHub