<svelte:document>

Add event listeners and bindings to the document object

<svelte:document onevent={handler} />

<svelte:document bind:prop={value} />

Similarly to <svelte:window>, this element allows you to add listeners to events on document, such as visibilitychange, which don’t fire on window. It also lets you use attachments on document.

As with <svelte:window>, this element may only appear at the top level of your component and must never be inside a block or element.

Event Listeners

You can add any valid document event listener:

<script>
  function handleVisibilityChange() {
    console.log(document.hidden ? 'hidden' : 'visible');
  }
</script>

<svelte:document onvisibilitychange={handleVisibilityChange} />

Common document events

• onvisibilitychange - Document visibility changes
• onfullscreenchange - Fullscreen mode changes
• onpointerlockchange - Pointer lock state changes
• onselectionchange - Text selection changes
• onkeydown - Key is pressed (anywhere in document)
• onkeyup - Key is released
• onclick - Click anywhere in document

Bindings

You can bind to the following document properties (all are readonly):

activeElement · Element

The element that currently has focus.

fullscreenElement · Element | null

The element currently displayed in fullscreen mode, or null if no element is in fullscreen.

pointerLockElement · Element | null

The element that currently has the pointer locked, or null if pointer is not locked.

visibilityState · string

The visibility state of the document. Possible values: "visible", "hidden".

Usage

Track document visibility

<script>
  let visibilityState = $state('');
  
  function handleVisibilityChange() {
    console.log('Visibility changed to:', visibilityState);
  }
</script>

<svelte:document 
  bind:visibilityState
  onvisibilitychange={handleVisibilityChange}
/>

<p>Page is {visibilityState}</p>

Track active element

<script>
  let activeElement = $state(null);
</script>

<svelte:document bind:activeElement />

<p>Active element: {activeElement?.tagName}</p>

<input placeholder="Focus me" />
<button>Or click me</button>

Fullscreen detection

<script>
  let fullscreenElement = $state(null);
  let isFullscreen = $derived(fullscreenElement !== null);
</script>

<svelte:document bind:fullscreenElement />

{#if isFullscreen}
  <p>Currently in fullscreen mode</p>
{:else}
  <p>Not in fullscreen</p>
{/if}

Global keyboard shortcuts

<script>
  function handleKeydown(event) {
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      console.log('Save triggered');
    }
  }
</script>

<svelte:document onkeydown={handleKeydown} />

Using attachments

<script>
  import { someAttachment } from './attachments.js';
</script>

<svelte:document {@attach someAttachment} />

Pause video when page is hidden

<script>
  let video;
  let visibilityState = $state('visible');
  
  $effect(() => {
    if (visibilityState === 'hidden' && video) {
      video.pause();
    }
  });
</script>

<svelte:document bind:visibilityState />

<video bind:this={video} src="video.mp4" controls />