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

Learn how to use the Report Designer component in a Svelte 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-designer-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 these commands run successfully, you could open the newly created `arjs-svelte-designer-app` in your favorite IDE, such as Visual Studio Code.

### Install ActivereportsJS npm packages

We provide the Svelte Report Designer 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 Designer",
        "Style": {
          "FontSize": "18pt",
          "PaddingLeft": "5pt",
          "PaddingTop": "5pt"          
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### Add Report Designer 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-designer.css';
    import {Designer} from "@mescius/activereportsjs-svelte";
</script>

<div id="viewer-host">
    <Designer report={{ id: "report.rdlx-json", displayName: "my report" }}></Designer>
</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, the ActiveReportsJS Report Designer will appear on the start page of the application and display the report design. You could test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the [Report Designer Interface](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface) page for more information on how to use the Report Designer component. The Report Designer component exposes a rich [API](https://developer.mescius.com/activereportsjs/api/modules/ReportDesigner) supplied with TypeScript declarations, so you can easily use it within a Svelte application.