Use The Code Editor For Supported Block Content In The Web Editor
Learn how to use the code editor dialog in the Web Editor to update supported HTML-style block content, understand live updates while editing, and know what happens when you close the editor.
This guide explains how to use the code editor dialog inside the Admin Web Editor.
Use it when you want to:
- edit supported block content in a focused editing window
- work with HTML-style content for blocks that support code editing
- make detailed changes without editing directly in the normal page canvas
Before You Start
Open the Web Editor from System > Platform Customization.
Then open the page you want to edit and select the block that supports code editing.
OpenMirai only shows this dialog for supported block fields.
What The Code Editor Dialog Does
The code editor dialog gives you a focused space to edit HTML-style content for a selected block.
This is useful when a block supports more advanced content editing than the standard visual controls.
If you are not familiar with HTML, think of it as a structured text format used to control how part of the block content is arranged.
What You See In The Dialog
The dialog can include:
- a title and short description
- a highlighted code area
- an editable text area
- a close control
These parts help you review the current content and update it in one place.
Edit The Content In The Text Area
Use the editable text area to change the supported content for the selected block.
As you type, OpenMirai updates the content in near real time while you are editing.
This helps you review changes as you work instead of waiting until the end.
Use The Highlighted Code Area
The dialog can also show the content with live code highlighting.
This makes the structure easier to read, especially when the content includes multiple lines or nested parts.
Close The Dialog To Finish
When you finish editing, close the dialog.
OpenMirai saves the final content for the selected block when the dialog closes.
This means you do not need a separate save action inside the dialog itself.
Understand Dialog States
The code editor can appear in different states while you use it:
- open while you are actively editing
- closed after you finish
- live highlighting visible while the content is being shown in the editor
The dialog also keeps the latest edited content when it closes.
When To Use The Code Editor
The code editor is most useful:
- when a supported block needs more detailed content editing
- when visual controls are not the main editing method for that field
- when you want to review structured content in a clearer editing space
What To Do Next
- review the selected block after closing the dialog
- continue adjusting the block with normal builder tools if needed
- preview the page after important content changes
- save the page once the result looks correct
Use Block Breadcrumbs To Move Through Nested Sections In The Web Editor
Learn how to use the block breadcrumb path in the Web Editor to move between parent and child blocks, clear the current selection, and identify the matching section on the canvas.
Add Blocks in the Web Editor
Learn how to open the Add Block dialog in the Admin Web Editor, use tabs, search and filter blocks, and insert a new block in the correct place on the page.