Svelte Integration
The Svelte package provides both a native component and an action. Use the component for declarative pages and the action for existing DOM containers.
Install
Use the standard package when you want a light entry plus an explicit preset:
npm install @file-viewer/svelte @file-viewer/preset-officeUse the full package when you want the complete matrix by default:
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
<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 for tokens and ::part() customization.
The full package only changes the import:
<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
For pages that do not want a component instance, mount the action on any existing container:
<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:
import { fileViewer } from '@file-viewer/svelte-full/action'Vite Auto Assembly
SvelteKit / Vite projects can register the plugin so installed presets activate automatically and Worker / WASM / font / vendor assets are copied:
npm install -D @file-viewer/vite-pluginimport { 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:
npx --no-install file-viewer-copy-assets ./public/file-viewerNon-Vite standard-package projects keep using options.preset / options.renderers explicitly.