Rearrange Any Page Without Opening the Builder.

Live Page Editor

You're on a call with a client. "What if we moved that testimonial above the fold?" "What if the heading was bigger?" "What if we just... deleted that banner?"

Click text to rewrite. Shift+Drag to reorder. Refresh to undo.

Click any text to rewrite it live

Shift+Drag to swap element positions

Delete mode for clean screenshots

Apply the page's own CSS classes

The Old Way: Open the Builder

Thirteen steps. Two round trips through the builder. All to answer: "What would it look like?"

Log in to WordPress. Open the page builder. Wait for it to load. Find the section in a sidebar of 40+ elements. Drag it. Spacing breaks. Adjust padding. Click Preview. Wait. Almost right. Go back. Tweak. Preview again.

Client says "actually, what about below the pricing?"

Start over at step 6. And you're editing the live site — one wrong save and every visitor sees the half-finished layout. These developer tools bypass the builder entirely.

Swap Mode: Drag-Select and Reposition

No other tool does this. Not Elementor. Not Figma. Not DevTools.

Shift+Drag to draw a box around source elements (highlighted in purple). Press S to enter Swap Mode. Shift+Drag around the target elements. The two groups swap positions in the DOM.

Move a testimonial above the fold. Reorder product features. Swap a sidebar widget with main content. See exactly what the layout looks like — on the actual page, with the actual CSS, at the actual viewport width.

Styling Mode: The Page's Own Design Tokens

The toolbar scans every stylesheet on the page and presents the site's own CSS classes as clickable swatches.

Background Colors → A grid of every background color class from the page's CSS.
Text Colors → Every text color class available on the site.
Font Sizes → All size classes, with Automatic CSS detection built in.

Click an element. Click a swatch. The style applies instantly. You're applying the same classes the developer chose. The result looks native because it is native.