---
title: How to Preview Your Gallery While You Edit It
description: The gallery editor shows a live preview of your MetaSlider Gallery right beside your settings, so you can see exactly how it will look on your site before you save. The preview updates as you change the layout, columns, spacing,…
url: "https://www.metaslider.com/docs/preview-gallery-while-editing/"
updated: "2026-11-03"
category: Create Galleries with MetaSlider Gallery
---

# How to Preview Your Gallery While You Edit It

The gallery editor shows a live preview of your MetaSlider Gallery right beside your settings, so you can see exactly how it will look on your site before you save. The preview updates as you change the layout, columns, spacing, appearance, and image styles, and you can open the Gallery Window straight from the preview to check it the way a visitor would.

---

## How to Switch Between Preview and Arrange

The main pane of the gallery editor has two buttons at the top: 'Preview' and 'Arrange'. Preview renders the gallery as it appears on the front end, while Arrange shows the thumbnail grid where you add, remove, and reorder images. A gallery that already has images opens in Preview; an empty one opens in Arrange so you can start adding photos.

Open a gallery from your Galleries list to reach the editor, then look for the 'Preview' and 'Arrange' buttons above the images.

![Switch Between Preview and Arrange](https://www.metaslider.com/wp-content/uploads/2026/07/01-preview-arrange-toggle-1024x891.png)

Choose 'Preview' to see the live rendering of your gallery, or 'Arrange' to go back to the thumbnail grid and change which images are included or the order they appear in.

![Preview option in MetaSlider Gallery](https://www.metaslider.com/wp-content/uploads/2026/07/02-live-preview-1024x891.png)

---

## How to See Your Settings Applied Live

Every control in the settings sidebar feeds the preview. Change the layout, column count, gap, appearance, or image styles and the preview refreshes to match, so you never have to save and reload to check a change.

Adjust any setting in the sidebar on the right and watch the preview update to reflect it.

![Preview setting live](https://www.metaslider.com/wp-content/uploads/2026/07/03-settings-sidebar-1024x642.png)

In Preview, click any image to open the lightbox exactly as your visitors will see it, then close it and keep editing.

![Preview MetaSlider Gallery](https://www.metaslider.com/wp-content/uploads/2026/07/04-preview-lightbox-1024x891.png)

---

## How to Preview at Desktop and Mobile Width

Preview includes a desktop and a mobile width switch in the top right, so you can check both without leaving the editor. The mobile view uses your 'Columns on mobile' setting, matching how the gallery re-flows on a phone.

![Preview at Desktop and Mobile Width](https://www.metaslider.com/wp-content/uploads/2026/07/05-viewport-toggle-1024x891.png)