Skip to main content

Editor Overview

The XBuilder editor is designed for efficiency and ease of use. This guide covers every part of the interface.

Interface Layout​

The editor consists of four main areas:

┌─────────────────────────────────────────────────────────────┐
│                        Header Bar                           │
├──────────────┬──────────────────────────────────────────────┤
│              │                                              │
│   Control    │              Canvas Area                     │
│    Panel     │           (Live Preview)                     │
│              │                                              │
│              │                                              │
└──────────────┴──────────────────────────────────────────────┘

Header Bar​

The header contains essential controls and actions:

Left Section​

  • XBuilder Logo — Click to return to home
  • Popup Title — Click to edit (when applicable)

Center Section​

  • Device Preview Buttons
    • Desktop (full width)
    • Tablet (768px)
    • Mobile (375px)
  • Orientation Toggle — Landscape/portrait for tablet/mobile

Right Section​

  • Undo/Redo — History navigation
  • Structure — Toggle element tree panel
  • Library — Open template library
  • Export — Export popup configuration
  • Help — Access guided tour and shortcuts

Control Panel (Left Sidebar)​

The control panel has two modes:

Expanded Mode​

Full-width panel with all controls visible.

Squeezed Mode​

Icon-only sidebar for more canvas space. Click icons to expand specific sections.

Panel Tabs​

Widgets Tab​

When no element is selected:

  • Elements Palette — All available elements to add
  • Quick Add — One-click section/column creation

When an element is selected:

  • Element Settings — Content, style, and advanced options

Layout Tab​

Popup-level layout settings:

  • Position (9-point grid)
  • Width and height
  • Offset from edges
  • Overlay settings
  • Close button configuration

Design Tab​

Visual styling for the popup:

  • Background (solid, gradient, image)
  • Border radius
  • Box shadow
  • Animation (entry/exit effects)

Behavior Tab​

Trigger and display rules:

  • Trigger type selection
  • Trigger-specific settings
  • Cookie/frequency settings
  • Test mode toggle

Canvas Area​

The canvas shows a live preview of your popup:

Interaction Modes​

Edit Mode (default)

  • Click elements to select them
  • Drag elements to reorder
  • Right-click for context menu

Preview Mode

  • Test popup interactions
  • Verify animations
  • Test trigger behavior

Canvas Features​

  • Grid Background — Visual alignment aid
  • Device Frame — Shows device boundaries for tablet/mobile
  • Trigger Button — Opens/closes popup
  • Scroll Area — For testing scroll triggers

Element Selection​

When you select an element:

  • Blue border highlights the element
  • Resize handles appear (where applicable)
  • Control panel shows element settings
  • Breadcrumb shows element hierarchy

Element Tree (Structure Panel)​

Toggle with the Structure button or S key:

  • Hierarchical View — See all elements in tree format
  • Drag to Reorder — Rearrange element order
  • Click to Select — Quick element selection
  • Collapse/Expand — Navigate complex structures

Context Menu​

Right-click any element for quick actions:

ActionDescription
EditSelect and edit element
CopyCopy element to clipboard
PastePaste copied element
DuplicateCreate a copy below
DeleteRemove element
Select ParentSelect containing element

Command Palette​

Press Ctrl+K / Cmd+K to open the command palette:

  • Search Settings — Find any setting by name
  • Quick Navigation — Jump to specific tabs
  • Keyboard-First — Arrow keys and Enter to navigate

History Panel​

Access via the History button:

  • Visual Timeline — See all changes
  • Click to Preview — Preview any past state
  • Restore — Revert to a previous state
  • Snapshots — Save named checkpoints

Tips for Efficiency​

Use Keyboard Shortcuts​

  • Delete — Remove selected element
  • Ctrl+D — Duplicate element
  • Ctrl+Z/Y — Undo/redo
  • Escape — Deselect element
  • P — Toggle popup open/close

Work with the Grid​

  • Elements snap to grid for alignment
  • Use spacing controls for precise positioning
  • Check multiple device sizes frequently

Organize with Sections​

  • Use Sections as containers
  • Columns provide horizontal layout
  • Nest elements for complex designs

Preview Often​

  • Switch between device sizes
  • Test trigger behavior
  • Verify animations look correct

Next Steps​

Now that you understand the interface: