# Svelte Component

## Content

This page provides a detailed overview of the ActiveReportsJS Svelte Report Designer. You can check the corresponding [Getting Started](/activereportsjs/docs/v6.1/GettingStarted/QuickStart-ARJS-Designer-Component/svelte) tutorial for a concise guide for integrating the designer component into a Svelte application.

### ActiveReportsJS Svelte NPM package

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

### ActiveReportsJS Svelte Designer component

You can import the ActiveReportsJS Svelte Designer component into a Svelte component in your application and include it in the markdown, for example:

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

<div id="designer-host">
    <Designer report={{ id: "report.rdlx-json", displayName: "my report" }}></Designer>
</div>
```

The designer component accepts the following properties.

| Property | Type | Description |
| -------- | ---- | ----------- |
| onInit | ()=>[DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) | returns the [DesignerConfig](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#designerconfig) that contains the designer's initialization options |
| dataSources | array of [Data Source Templates](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#datasourcetemplate) | sets the [Pre-defined data sources and data sets](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets). |
| reportList | array of [Report Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#reportresourceinfo) | sets the [Pre-defined report names for a subreport](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| imageList | array of [Image Resource Info items](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#imageresourceinfo) | sets the [Pre-defined images for an Image report item](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources) |
| onCreate | [onCreate function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#oncreate) | adds the [New Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button) in the designer toolbar and sets the corresponding click handler |
| onOpen | [onOpen function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopen) | adds the [Open Report](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button) button in the designer toolbar and sets the corresponding click handler |
| onRender | [onRender function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onrender) | adds the [Preview Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports) in the designer toolbar and sets the corresponding click handler |
| onSave | [onSave function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsave) | adds the [Save Report button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onSaveAs | [onSaveAs function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onsaveas) | adds the [Save As.. button](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports) in the designer toolbar and sets the corresponding click handler |
| onOpenFileMenu | [onOpenFileMenu function](https://developer.mescius.com/activereportsjs/api/interfaces/ReportDesigner.ActionHandlers#onopenfilemenu) | adds the "File" menu in the designer toolbar and sets the corresponding click handler |
| report | [report object](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#report) | loads the specified report in the designer |
| documentChanged | (args: [DocumentChangedEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner#documentchangedeventargs))=>void | sets the handler for the event that occurs when a report loaded into the designer changes |

Also, you can access the `createReport`, `getReport`, `setReport`, and `processCommand` methods of the [Designer class instance](https://developer.mescius.com/activereportsjs/api/classes/ReportDesigner.Designer) by binding a variable to the Designer node, for example:

```javascript
<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
    import {onMount} from 'svelte';
    let designerInst: Designer;
    onMount(()=>{
        designerInst.setReport({ id: "report.rdlx-json", displayName: "my report" });
    })
</script>

<div id="designer-host">
    <Designer bind:this={designerInst}></Designer>
</div>
```