Use The Floating Toolbar In The Web Editor

This guide explains how to use the floating toolbar inside the Admin Web Editor.

Use it when you want to:

• reach common editing controls without opening another panel
• save page changes while you work
• switch the editor view between light and dark display
• change the canvas width or zoom level
• move backward or forward through recent edits

Before You Start

Open the Web Editor from System > Platform Customization.

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

What The Floating Toolbar Does

The floating toolbar gives you quick access to common editing controls while you work on the page.

It is designed to help you adjust the editor view and manage recent changes without leaving the main builder.

What You Can Find In The Floating Toolbar

Depending on the current editing state, the floating toolbar can include:

• an unsaved warning badge
• a Save button
• sidebar visibility controls
• a dark mode toggle for the editor display
• breakpoint controls
• a Clear Canvas action
• zoom controls
• Undo and Redo

These controls help you work faster while keeping the page canvas in view.

Understand The Unsaved Warning Badge

When the page has unsaved edits, OpenMirai can show an unsaved warning badge in the floating toolbar.

This badge reminds you that the current page still has changes that have not been saved yet.

When the page is fully saved, the badge no longer appears.

Use Save From The Floating Toolbar

The floating toolbar can show a Save button while the page has unsaved changes.

Use it when you want to keep the latest version of your edits without leaving the builder.

While a save is already in progress, the Save button can appear disabled until the current save finishes.

If there are no unsaved changes, the save action can be hidden.

Show Or Hide Side Panels

The floating toolbar can include quick controls for showing or hiding the builder side panels.

Use these when you want:

• more space for the canvas
• only the left panel visible
• only the right panel visible
• both side panels visible again

Switch The Editor Display Between Light And Dark

The toolbar can also include a dark mode toggle for the editor display.

Use it when you want to review the current page in a lighter or darker editing view without leaving the builder.

This changes how the editor preview looks while you work.

Change Canvas Width From The Toolbar

The floating toolbar can include breakpoint controls for mobile, tablet, or desktop-style widths.

Use these controls when you want to review the page at different responsive sizes while staying in the main editing view.

Clear The Current Page Quickly

The floating toolbar can include the Clear Canvas action.

Use it when you want to remove all blocks from the current page and start again from an empty canvas.

OpenMirai shows a confirmation step before the page is cleared.

Use Zoom Controls

The floating toolbar can include zoom controls for the canvas.

Use these controls when you want to:

• reduce the zoom level with -
• reset the zoom with the center zoom button
• increase the zoom level with +

This helps when you want either a broader page view or a closer editing view.

Use Undo And Redo

The floating toolbar can also include Undo and Redo.

Use these when you want to move backward or forward through recent changes.

If no history step is available in one direction, the related button can appear disabled.

What To Do Next

• use the floating toolbar for quick view and editing controls while you work
• open the related builder guides if you need more detailed help with saving, breakpoints, sidebars, clearing the page, or edit history
• save the page after the layout and content look correct