# Svelte Integration (/guide/quickstart-svelte)



## Install [#install]

Use the standard package when you want a light entry plus an explicit preset:

```bash
npm install @file-viewer/svelte @file-viewer/preset-office
```

Use the full package when you want the complete matrix by default:

```bash
npm install @file-viewer/svelte-full
```

`@file-viewer/svelte-full` enables `@file-viewer/preset-all` automatically while keeping the same component, action, event, and controller APIs.

The package-root default export is the Svelte component. Import actions and lower-level controller helpers only from the explicit `/action` and `/controller` subpaths.

## Component Usage [#component-usage]

```svelte
<script lang="ts">
  import FileViewer from '@file-viewer/svelte'
  import officePreset from '@file-viewer/preset-office'

  const options = {
    preset: officePreset,
    rendererMode: 'replace',
    theme: 'light',
    styleIsolation: 'shadow',
    toolbar: { position: 'bottom-right' },
    archive: { cache: true }
  }

  function handleViewerEvent(event) {
    console.log(event.detail.type, event.detail.payload)
  }
</script>

<section style="height: 100vh">
  <FileViewer
    url="/files/report.docx"
    {options}
    on:viewerEvent={handleViewerEvent}
  />
</section>
```

Svelte uses Shadow DOM by default so uncontrolled host CSS cannot break the toolbar or renderer content. Use `styleIsolation:'none'` only for legacy deep class overrides. See [Style Isolation And Customization](/guide/style-isolation) for tokens and `::part()` customization.

The full package only changes the import:

```svelte
<script lang="ts">
  import FileViewer from '@file-viewer/svelte-full'

  const options = {
    theme: 'light',
    toolbar: { position: 'bottom-right' }
  }
</script>

<section style="height: 100vh">
  <FileViewer url="/files/demo.pdf" {options} />
</section>
```

## Action Usage [#action-usage]

For pages that do not want a component instance, mount the action on any existing container:

```svelte
<script lang="ts">
  import { fileViewer } from '@file-viewer/svelte/action'
  import officePreset from '@file-viewer/preset-office'

  const viewerOptions = {
    url: '/files/report.pdf',
    options: {
      preset: officePreset,
      rendererMode: 'replace',
      theme: 'light'
    }
  }
</script>

<div use:fileViewer={viewerOptions} style="height: 720px"></div>
```

The full-package action uses the matching explicit entry:

```ts
import { fileViewer } from '@file-viewer/svelte-full/action'
```

## Vite Auto Assembly [#vite-auto-assembly]

SvelteKit / Vite projects can register the plugin so installed presets activate automatically and Worker / WASM / font / vendor assets are copied:

```bash
npm install -D @file-viewer/vite-plugin
```

```ts
import { fileViewerRenderers } from '@file-viewer/vite-plugin'

export default {
  plugins: [
    fileViewerRenderers({
      copyAssets: true
    })
  ]
}
```

When `@file-viewer/svelte-full` is installed, this configuration recognizes it and publishes the complete matching asset payload in dev and build. The Full package already includes `preset-all`; do not install or pass another preset. Non-Vite Full builds run the included same-version CLI:

```bash
npx --no-install file-viewer-copy-assets ./public/file-viewer
```

Non-Vite standard-package projects keep using `options.preset` / `options.renderers` explicitly.