UI Settings

Click the three-dot menu in the editor's top bar and choose Preferences, then click UI Settings.

Settings

• Auto-scroll to active element — Scroll to selections, including Structure; on by default.
• Scale content to fit the screen (zoom) — Shrink wide previews to fit; off uses actual size/horizontal scrolling. Does not enlarge small previews; on by default.
• Dark Mode — Editor theme.
• Disable Message For Empty SSR Elements — Hide empty server-output messages.
• Show elements ID in the Structure Panel — Display internal IDs.
• Disable Code Editor Line Wrapping — Horizontal code scrolling.
• Prefer TinyMCE For Rich Text — Use TinyMCE where compatible; variable-supporting controls retain their required editor. On by default.
• Include Custom Breakpoints in Breakpoint Dropdowns — Include in compatible threshold controls; individual restrictions remain.
• Disable Custom Unit Dropdown — Disable free-text units while retaining existing values.
• Default Unit Type — px / % / em / rem / vw / vh / svw / svh / auto / custom; default px.
• Remember Last Tab Per Element — Per-element rather than shared tab selection.

Panels

• Add — Left or right; left by default.
• Element Properties — Left or right; left by default.
• Structure — Left or right; right by default.
• History & Revisions — Left or right; right by default.
• Global Settings — Left or right; right by default.
• Selectors — Left or right; right by default.
• Variables — Left or right; right by default.
• Reset to defaults — Restore the default panel positions.
• Popout Position — Stacked, Stacked (First Visible), or Side By Side. The first popout stays anchored to its control; First Visible keeps the first parent beside its child and stacks deeper levels.

Clearing browser site data can reset these preferences.