Changing the Preview in Visiontree Studio ​

In Visiontree Studio, the Preview feature allows you to visualize your form layout on different devices, orientations, and screen dimensions. The full screen mode provides a live update as you make changes to your JSON. This page will guide you through the different ways you can change the preview to suit your needs.

Selecting a New Device ​

Switch between different devices to preview how your form will appear on various screens.

1. Locate the Device dropdown menu at the top of the Preview pane.
2. Click on the dropdown and select a device from the list to change the preview layout.

Rotating Screen Orientation ​

Toggle between portrait and landscape orientations to ensure your form is responsive.

1. Find the Rotate button near the top of the Preview pane.
2. Click the Rotate button to toggle between portrait and landscape orientations.

Adjusting Screen Dimensions ​

Customize the width and height of the screen to match specific device dimensions.

1. Locate the Width and Height fields near the top of the Preview pane.
2. Enter the desired dimensions in pixels or use the up and down arrows to adjust the values.

Using Full Screen Mode ​

The Full Screen mode auto-updates the preview as you edit the JSON, eliminating the need to click "See new changes" button.

1. Click the Full Screen button located at the top of the Preview pane.
2. In Full Screen mode, edit your JSON in the Code tab, and see the changes reflect in real-time on the preview.