> For the complete documentation index, see [llms.txt](https://istaging.gitbook.io/vr-maker-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://istaging.gitbook.io/vr-maker-sdk/getting-started.md).
# Getting started
## Instructions
### Installation
Choose [Krpano ](https://krpano.com/)or [A-frame](https://aframe.io/) as your panorama viewer and include its script (it should be placed before `vrmaker-sdk.js`).
{% hint style="info" %}
If you want to use Krpano as your viewer, you can use the free version with watermark to demo. Otherwise, you need to purchase a Krpano license.
{% endhint %}
```markup
// purchase a KRPano license and use the paid version of the JS file in your project
```
Then import vrmaker by es6 in your project.
```
import VRViewer from 'vrviewer'
```
Or use [VR Maker SDK cdn ](https://www.istaging.com/sdk/vrmaker.js)include it in your project:
```javascript
```
Finally, initialize the `VRMaker` object (don't forget do create a `div` with an `id`):
```markup
```
{% hint style="info" %}
You can also hard-code the panorama Array. For example:
```
panoramas: [{
panoramaId: '1',
panoramaName: 'a',
panoramaIndex: 0
downloadLink: 'example.png',
panoramaRotation: 0
}, {
panoramaId: '2',
// etc ...
}]
```
{% endhint %}
### Result
.png?alt=media\&token=287ad9c6-b9c3-4c65-828d-0cac6ed0d564)
### Example
Clone and check it in examples / src folder.
```
npm install
npm start
// You can also check webpack dev server
npm run dev
```
### Live example