# Get Started with ActiveReportsJS Report Viewer in a Svelte.js application

Learn how to use the ActiveReportsJS Viewer component in a Svelte web-application

## Content

### Create Svelte application

The easiest way to create a `Svelte` application is to use the [SvelteKit](https://kit.svelte.dev/) tool. Run the following command from the command prompt or terminal:

```bash
npx sv create arjs-svelte-viewer-app
```

It will ask several questions and below the list of recommended answers

```text
┌  Welcome to the Svelte CLI! 
│
◇  Which template would you like?
│  SvelteKit minimal (barebones scaffolding for your new app)
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  What would you like to add to your project? (use arrow keys/space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  npm
```

Once the command run successfully, you could open the newly created `arjs-svelte-viewer-app` in your favorite IDE, such as Visual Studio Code.

### Install ActivereportsJS npm packages

We provide the Svelte Report Viewer Component through the `@mescius/activereportsjs-svelte` npm package. This package is built upon the foundational `@mescius/activereportsjs` package, which encompasses the core functionalities essential for the component's operation.
To install the latest version of the `@mescius/activereportsjs-svelte` package, along with its necessary dependencies, execute the command below from your application's root directory:

```bash
npm install @mescius/activereportsjs-svelte@latest
# or if you use yarn
yarn add @mescius/activereportsjs-svelte@latest 
```

### Add ActiveReportsJS report to the application

ActiveReportsJS uses the `JSON` format and the `rdlx-json` extension for report template files.
In the `static` folder of the application, create a new file called `report.rdlx-json` and insert the following content into it.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt",
          "PaddingLeft": "5pt",
          "PaddingTop": "5pt"          
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### Add Report Viewer component to the application

Replace the default content of the `src\routes\+page.svelte` file with the following code

```html
<script lang="ts">
    import '@mescius/activereportsjs/styles/ar-js-ui.css';
    import '@mescius/activereportsjs/styles/ar-js-viewer.css';
    import {Viewer} from "@mescius/activereportsjs-svelte";
</script>

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

<style>
    #viewer-host {
        width: 100%;
        height: 100vh;
    }
</style>
```

### Disable server-side rendering

By default, SvelteKit will render any page first on the server and send it to the client as HTML. But ActiveReportsJS can only operate on the client-side. Hence, we need to disable the server-side rendering for the page that contains the Report Viewer. We can do that by adding the `+page.js` file with the following content alongside the `+page.svelte`

```js
export const prerender = false;
export const ssr = false;
```

### Run and test the application

You can run the application by using the `yarn run dev` or `npm run dev` commands. By default, the project runs at [http://localhost:5173/](http://localhost:5173/).
If you browse this URL, the ActiveReportsJS Report Viewer will appear on the page. The viewer will display the report that shows the `Hello, ActiveReportsJS Viewer` text. You can test the basic functionality by using the [Report Viewer User Interface](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Viewer-Interface). The Report Viewer component exposes a [rich API](https://developer.mescius.com/activereportsjs/api/classes/ReportViewer.Viewer) supplied with TypeScript declarations, so you can easily use it within a Svelte application.