Preview a Page in the Web Editor Before Publishing

This guide explains how to use preview mode inside the Admin Web Editor.

Use it when you want to:

• check how a page looks before publishing changes
• review the current layout without editing blocks
• compare the page in light and dark preview themes
• confirm spacing, text flow, and visual structure before saving

Before You Start

Open the Web Editor first from System > Platform Customization.

Then open the page you want to review in the builder workspace.

Open Preview Mode

Use the Preview button in the top bar of the builder workspace.

OpenMirai then opens an isolated preview view of the current page content.

Use this mode when you want to step back from editing controls and focus on how the page looks as a finished page.

In this version of the editor, preview opens as a full-screen overlay inside the builder area, so the normal editing controls are replaced by the preview view while you review the page.

What You See In Preview

Preview mode focuses on the rendered page rather than the editing panels.

You may see:

• a Preview Mode banner at the top of the preview area
• the rendered page content
• a note that performance will be better in production
• a theme control for switching the preview between light and dark display

This full-screen preview layout is designed to keep your attention on the page itself instead of the editing workspace.

This helps you review the page in a cleaner, presentation-style view before returning to normal editing.

Review The Page Visually

Use preview mode to check details such as:

• page structure and section order
• heading and paragraph spacing
• button placement
• image balance and layout flow
• how different sections feel together on one page

This is especially useful after adding new blocks, changing page styles, or applying AI-generated content.

Use The Theme Toggle

The preview banner includes a theme control.

Use it when you want to compare how the page looks in:

• light mode
• dark mode

This helps you catch visibility or contrast issues before you finish editing.

Understand What Preview Does Not Do

Preview mode is meant for safe visual review.

In preview mode:

• links do not open their destinations
• submit-style actions do not run
• interactive navigation elements are shown for review but are not fully active

This prevents accidental navigation or submissions while you are checking the page.

What To Expect While Preview Loads

When preview first opens, styles and visual elements may take a short moment to finish loading.

During this time, the page may briefly look incomplete before the final preview appears.

This is normal while OpenMirai prepares the rendered version of the page for review.

Empty Preview States

If there is nothing available to preview, OpenMirai can show a simple empty state instead of a rendered page.

Examples include:

• No page selected
• No content to preview

These empty states can still appear inside the same preview overlay, with the preview banner visible at the top.

If this happens, return to the builder, select a page, or add content blocks before opening preview again.

When To Use Preview

Preview is most helpful:

• before publishing a newly created page
• after changing section order or spacing
• after updating styles or themes
• after applying AI-generated content
• before asking teammates to review the page

What To Do Next

• use preview after major design or content changes
• compare both light and dark preview themes when appearance matters
• return to the canvas if you notice something that still needs adjustment
• preview again after the next round of edits to confirm the final result

If you need help with the main editing workspace first, use the Web Editor workspace guide.