# Preview Reports

Learn to configure JS Viewer for seamless preview capabilities.

## Content



You need to configure JS Viewer for preview since preview is part of JS Viewer and not WebDesigner. See [JS Viewer Applications](/activereportsnet/docs/v19.2/developers/create-applications/js-viewer-application) for more details.

It is suggested to use our JS Viewer in SVG mode; although this makes previewing slower, you see almost WYSIWYG preview. To configure JS Viewer for preview, use the following code.

```
var viewer = null;
GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {           
    preview: {
                openViewer: (options) => {
                    if (viewer) {
                        viewer.openReport(options.documentInfo.id);
                        return;
                    }
                    viewer = GrapeCity.ActiveReports.JSViewer.create({
                        element: '#' + options.element,
                        renderFormat: 'svg',
                        reportService: {
                            url: 'api/reporting',
                        },
                        reportID: options.documentInfo.id,
                        settings: {
                            zoomType: 'FitPage'
                        }
                    });
                }
            }
       });
```

## See Also

[WebDesigner API](/activereportsnet/docs/v19.2/developers/create-applications/web-designer-application/web-designer-api)