DBE documentation
Make Builderius work your way
Browse every enhancement by the part of the builder it improves. Each guide explains what the feature changes, when to use it and anything you should know before switching it on.
About the pluginAppearance
10 features-
Typography & design tokens
Read the guideOne consistent typeface and tidier labels across the builder.
-
Tab styling
Read the guideClear accent underlines on every tab in the builder.
-
Search field icons
Read the guideAdds the missing magnifying-glass icons to search fields.
-
Controls styling
Read the guideRestyles buttons, inputs and dropdowns with accessible contrast.
-
Focus visibility
Read the guideA visible focus ring on every control.
-
Navigator row styling
Read the guideLarger, easier-to-scan Navigator rows.
-
Theme switcher (light / dark / auto)
Read the guideLight, dark or follow-the-OS builder theme.
-
Density toggle
Read the guideComfortable or compact spacing, switched from the top bar.
-
Top-bar keyboard groups
Read the guideScreen-reader grouping and arrow keys for the top-bar controls.
-
Resizable side panels
Read the guideDrag to set the side panels’ width.
Navigator
9 features-
HTML tag badges
Read the guideShows each element’s HTML tag in the Navigator.
-
Tidier Navigator icons
Read the guideHides repeated Navigator icons, keeping the meaningful ones.
-
Collapse & expand buttons
Read the guideOne-click expand or collapse of the whole tree.
-
Navigator search
Read the guideA filter box for the Navigator tree.
-
Rearrange favourites
Read the guideDrag or arrow-key reordering of the favourites bar.
-
Follow selection in the tree
Read the guideThe tree follows your selection; a path remains when it is hidden.
-
Navigator keyboard tree
Read the guideFull arrow-key navigation of the tree, WordPress style.
-
Navigator row quick actions
Read the guideDuplicate and Delete buttons on the hovered or focused row.
-
Detachable Navigator
Read the guideFloat the Navigator over the canvas.
Editing
20 features-
Bottom-bar keyboard toolbar
Read the guideMakes the bottom tool bar one Tab stop with arrow keys.
-
Accessible select comboboxes
Read the guideKeyboard and screen-reader support for the custom selects.
-
Accessible AI session tabs
Read the guideProper tabs and keyboard access for the Sense AI sessions.
-
Accessible panel tabs
Read the guideArrow-key tab strips in the settings panel and Navigator.
-
Accessible settings groups
Read the guideKeyboard and screen-reader access for the settings-panel groups.
-
Screen-reader landmarks
Read the guideNamed landmark regions for each part of the builder.
-
Right-click menu enhancements
Read the guideA flatter, keyboard-friendly right-click menu.
-
Wrap in… / Unwrap
Read the guideWrap elements in a div, template or collection – and unwrap.
-
Move & navigate elements
Read the guideReorder, indent and outdent elements from the keyboard or menus.
-
Inline rename
Read the guideRename an element directly on its Navigator row.
-
Double-click to rename
Read the guideDouble-click a row to rename it.
-
Undo / redo element changes
Read the guideUndo element structure and selected DBE property changes.
-
Rearrange component properties
Read the guideDrag or arrow-key reordering of component properties.
-
HTML attribute helpers
Read the guideA ready-to-type attribute row plus common-name suggestions.
-
Image placeholder & default alt
Read the guideNew Image elements get a visible placeholder and an alt attribute.
-
Display-condition helpers
Read the guideA ready blank condition, labelled fields, and cues where conditions exist.
-
Inserter keyboard navigation
Read the guideArrow-key navigation of the element Inserter.
-
Accessible Builderius menu
Read the guideKeyboard and screen-reader access for the Builderius menu.
-
Element keyboard shortcuts
Read the guideBlock-editor-style shortcuts for the selected element.
-
Command palette
Read the guideA searchable command palette on Cmd/Ctrl+K, with a top-bar button.
Styles panel
5 features-
CSS code editor by default
Read the guideOpens the Styles tab straight into the CSS code editor.
-
CSS scope bar
Read the guideShows and switches where CSS edits are saved.
-
Auto-BEM
Read the guideSuggested BEM class names for an element and its children.
-
Hide the code minimap
Read the guideRemoves the code editor’s minimap strip.
-
Tidy selector hint
Read the guideA compact, dismissible hint under the CSS editor.
Workflow
8 features-
Tooltips & accessible names
Read the guideTooltips and names for the unlabelled icon buttons.
-
Keyboard shortcuts overlay
Read the guidePress ? for a list of keyboard shortcuts.
-
Save status
Read the guideUnsaved, Saving and Saved status beside the Save button.
-
Save with Cmd/Ctrl+S
Read the guideCmd/Ctrl+S saves the template.
-
Keyboard access for the Save options menu
Read the guideOpt-in keyboard access for the Save options menu.
-
Builder tab protection
Read the guideWarns about duplicate tabs and protects unsaved builder work from agent saves.
-
Preview resize handles
Read the guideDrag handles to resize the preview canvas.
-
Preview overlay contrast fix
Read the guideReadable labels on the canvas hover and selection overlays.