Use the Web Editor Workspace Panels and Canvas

This guide explains the main workspace inside the Admin Web Editor.

Use it when you want to:

• understand the main areas of the builder after it opens
• know where to manage page structure, page content, and settings
• insert blocks into a page
• stay oriented while editing a custom website page

Before You Start

Open the Web Editor first from System > Platform Customization.

If you need help opening the editor or understanding the loading screen, use the Web Editor entry guide first.

Understand The Main Workspace

After the loading screen finishes, OpenMirai opens the full builder workspace.

The workspace is organized around these main parts:

• the top bar
• the left tool area
• the center page canvas
• the right-side settings area

Each part helps with a different part of page-building work.

Use The Top Bar

The top bar helps you stay oriented while working on the current page.

Depending on the page you are editing, it can show:

• a back button to return to Platform Customization
• the current page name
• the page path
• the current page status, such as live or draft
• a language dropdown
• a preview button

Use the top bar when you want to confirm which page you are editing or open preview mode.

Use The Page Header Controls

The top header is also the fastest place to manage the current page context without opening another panel.

Use it when you want to:

• return to Platform Customization
• confirm the current page name and route
• check whether the page is currently Live or Draft
• switch to another language version of the same page
• preview the current page

Switch Page Languages

If the page supports more than one language, the top bar shows a language dropdown.

Use it when you want to:

• open another language version of the current page
• see which language you are editing now
• add a missing language version

The current language is shown directly in the top bar.

Inside the dropdown, OpenMirai can also mark:

• the current language
• the primary platform language

This helps you avoid editing the wrong language version by mistake.

Add A Missing Language Version

If another supported language is available but has not been added yet, the language dropdown can include an add option.

Use it to:

• search the available languages
• select the new language you want to add
• create a new language version for the current page

While a new language version is being created, the add controls can show a temporary loading state.

Delete A Removable Language Version

For removable language versions, the language dropdown can show a small action menu beside the language row.

Use that menu when you want to delete one non-primary language version from the current page.

The primary language cannot be removed from this control.

If a language version is being deleted, OpenMirai can briefly show a loading state before the dropdown updates.

What Happens If You Switch Languages With Unsaved Work

If you try to switch languages while the current page still has unsaved changes, OpenMirai can show an unsaved-changes dialog first.

This dialog can include:

• Cancel
• Discard
• Save & Switch

Use Save & Switch when you want to keep the latest work before moving to the other language version.

Use Discard only when you are sure the current unsaved edits are not needed.

Use The Left Tool Area

The left side of the workspace is used for builder tools and page-structure tools.

This area can include tools such as:

• page-management tools
• AI tools
• outline tools
• prompt tools

Use the left tool buttons to open the panel you need without leaving the editor.

When one of these tools is open, the matching button in the left rail becomes the active tool for the current task.

The left side of the workspace is usually split into:

• a narrow tool-button rail
• a larger left content panel for the tool you selected

This lets you change tools quickly while keeping the main page visible in the center.

Know Which Sidebar To Use First

If you are not sure where to start, use this quick rule:

• use the left sidebar for navigation, structure, and guidance tools
• use the right sidebar for editing the selected block and changing visual settings

In most setups, the main tools on the left are AI Assistant and Outline.

The right side is usually where you edit:

• selected block details
• styling
• theme-related settings

This quick map helps you decide where to look before you start changing the page.

Choose The Right Tool Quickly

If you know the problem but are not sure which tool to open, use this simple guide:

• if you cannot find the section you want to edit, use Outline
• if you need to change text, labels, or block options, use Block Settings
• if you need spacing, font, or color fixes for one section, use Styling
• if you need wider brand-color or preset changes across the page, use Theme
• if you need many similar content edits more quickly, use AI Assistant

If you are still unsure, start with Outline, then move to Block Settings, then use Styling after the content is correct.

Use The Center Canvas

The center of the workspace is the live page canvas.

Use the canvas to:

• see the current page layout
• select a section or block directly on the page
• edit content inline when that type of block supports inline editing
• review how the page is arranged before opening preview

When you select a block in the canvas, OpenMirai updates the related editing controls for that block.

The selected block becomes your active editing target.

This is usually reflected in more than one place at the same time:

• the block looks selected in the canvas
• the related item is highlighted in the page structure or outline
• the right-side settings area updates for that exact block

Use The Right-Side Settings Area

The right side of the workspace is used for editing the currently selected item.

Use this area when you want to adjust:

• block settings
• appearance settings
• theme-related settings
• other details connected to the current selection

This area changes based on what you select in the canvas or in the page structure.

Add Blocks To A Page

When you add content to a page, OpenMirai opens an add-block picker.

This picker can include tabs such as:

• Blocks
• Libraries
• Partials
• HTML

The picker can also include search and filtering tools to help you find the block you want more quickly.

Use this area when you want to insert a new section, reusable saved content, or another supported block type into the page.

Work With The Current Selection

The workspace keeps the current selection visible across the builder.

This means:

• the selected part of the page becomes your active editing target
• the settings area updates to match that selection
• the page structure and canvas stay aligned while you work
• the matching item can also stay highlighted in the outline or related side tool

This is useful when you are making careful changes to one specific section at a time.

What To Expect While Working

While using the workspace, you may notice:

• loading placeholders while some tools or panels finish loading
• the currently open tool staying highlighted in the left rail
• the left and right sidebars being shown or hidden from workspace controls such as the floating toolbar
• a clearly selected block or section in the page
• the same selected block appearing highlighted in both the canvas and the outline
• save-state feedback while edits are being saved or waiting to be saved

This is normal while the builder updates the active page.

What To Do Next

• use the left tools to open the panel you need
• select a section in the canvas before changing settings on the right
• add new blocks when you need to expand the page
• open preview when you want to check how the page will look to visitors

If you need more detailed help with specific builder tools such as AI, page management, or preview, use the related builder guides for those topics.