# Svelte Component

## Content

This page provides a detailed overview of ActiveReportsJS Report Viewer Wrapper for Svelte. You can check the corresponding [Get Started tutorial](/activereportsjs/docs/v6.1/GettingStarted/QuickStart/svelte) for a concise guide for integrating this wrapper to a Svelte application.

### ActiveReportsJS Svelte NPM package

We provide the library that contains the ActiveReportsJS Report Viewer Wrapper for Svelte via the [@mescius/activereportsjs-svelte](https://www.npmjs.com/package/@mescius/activereportsjs-svelte) npm package, which depends on the main [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) package that contains the core functionality.

### ActiveReportsJS Svelte Viewer component

ActiveReportsJS Svelte Viewer component can be imported into a Svelte component and included in the markdown, for example:

```javascript
<script lang="ts">
    import {Viewer} from "@mescius/activereportsjs-svelte";
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }}></Viewer>
</div>
```

The viewer component accepts the following properties.

| Property | Type | Default Value | Description |
| -------- | ---- | ------------- | ----------- |
| availableExports | Array of strings |  | sets the list of exports that should be available in the viewer UI. See [Exports](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export#enable-report-viewer-export-sidebar-in-react-applications) page for more information |
| mouseMode | 'Pan' \| 'Selection' | 'Pan' | sets the mouse mode of Viewer component. |
| renderMode | 'Galley' \| 'Paginated' | 'Paginated' | sets the render mode of Viewer component |
| viewMode | 'Continuous' \| 'SinglePage' | 'Continuous' | sets the view mode of Viewer component |
| zoom | 'FitWidth' \| 'FitPage' \| number | 100 | sets the zoom mode of Viewer component |
| fullscreen | boolean | false | indicates whether the Viewer component should display the content in Full-Screen mode |
| toolbarVisible | boolean | true | indicates whether the toolbar of Viewer component is visible or not |
| sidebarVisible | boolean | true | indicates whether the sidebar of Viewer component is visible or not |
| panelsLayout | 'sidebar' \| 'toolbar' | 'toolbar' | indicates the location of Search and Export functions within the UI of Viewer component |
| parameterPanelLocation | 'default' \| 'top' \| 'bottom' | 'default' | indicates the location of the Parameters bar within the UI of Viewer component |
| toolbarLayout | Object |  | sets the list of available toolbar items. See [Customization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization) page for more information |
| language | string |  | sets the language of the Viewer's UI. See [Localization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization) page for more information |
| exportsSettings | object |  | sets the export settings. Visit the [Export Settings](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) page for more information. |
| report | Object |  | sets the report to load in the Viewer component. See [Loading Report](/activereportsjs/docs/v6.1/) section for more information |
| reportLoaded | (args: [ReportLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#reportloadeventargs))=>void |  | sets the handler for the event that occurs when a report is loaded but before rendering started |
| documentLoaded | (args: [DocumentLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#documentloadeventargs)=>void |  | sets the handler for the event that occurs when a report rendering is completed |
| errorHandler | ()=> void |  | sets the handler for the event that occurs if report rendering causes an error |
| showParametersOnOpen | 'auto'\|'always' | 'auto' | the `auto` value indicates that the `Parameters Panel` should open automatically upon report loading, even if the report's parameters have default values. |
| animations | AnimationSettings |  | Specifies the animation configuration | 
| themeConfig | UIThemeConfig |  | Specifies the theme configuration | 
| theme | ColorTheme or built-in theme ID |  | Specifies the active theme | 

You can bind these input properties to dynamic values to completely overwrite the viewer component's default UI, check [Customization page](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization) for more information.
Furthermore, the parent component can access [methods and properties](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer) of the Viewer class by binding a variable to the Viewer node and using the `Viewer()` method, for example:

```javascript
<script lang="ts">
    import {Viewer} from "@mescius/activereportsjs-svelte";
    import { onMount } from 'svelte';
    let viewerInst:Viewer;
    onMount(() => {
        viewerInst.Viewer().toggleFullScreen();
    });        
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }} bind:this={viewerInst}></Viewer>
</div>
```

### Related links

* [Loading reports](/activereportsjs/docs/v6.1/)
* [Customization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Customization)
* [Localization](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Localization)
* [Print](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Print)
* [Export](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Export)
* [Themes](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSViewer/Themes)