← Home

Reordering Elements

Layout Live can change the order of sibling elements, not just their styles. Swap two cards, move a section above another, pull a button to the front of a toolbar: each move is written back to your source as a surgical line edit, exactly like a class change, and each one is individually undoable.

Three ways to move

  • Move up / Move down buttons. With an element selected, the move controls swap it with its previous or next sibling. One click, one move.
  • Alt+Up / Alt+Down. The same moves from the keyboard, for walking an element through a list quickly.
  • Drag-and-drop. Grab the grip on the floating selection toolbar and drag. A drop indicator shows where the element will land among its siblings, the page auto-scrolls when you drag near the top or bottom edge, and Escape cancels the drag with nothing written.

The floating selection toolbar is the small control strip anchored to the selection ring around the current element. Alongside the drag grip it holds edit text, ask AI, and the move buttons, so the common actions live on the element itself rather than in a distant panel. Selecting the right element is easy too: Alt+scroll walks up the parent chain with a breadcrumb showing where you are, so you can hop from a deeply nested span to the card that contains it in a couple of notches.

Surgical edits, one undo each

Reordering works on plain HTML pages and on React / Next.js pages alike. In both cases Live splices only the moved element's lines in the source file, it never regenerates the file around it, so the diff you commit is exactly the move and nothing else. Each move lands in the Edits panel as its own entry with a per-edit revert, and global undo (Cmd+Z) walks moves and style changes back in order.

Repeated tweaks collapse sensibly too: if you nudge the same property on the same element a dozen times while experimenting, the Edits panel groups them into a single entry rather than burying the log in near-identical lines.

When a move is refused

Some elements cannot be safely reordered by a text edit. The classic case is dynamic content: items rendered from a .map() over data, or blocks behind conditionals. Moving one of those in the source would not reorder the item you clicked, it would reorder (or break) the template that renders all of them. Live detects these cases and refuses the move rather than writing a change that does something different from what you asked.

When a move is refused, Live prompts you to ask the AI instead: one click files a prefilled AI request describing the intended move, and your agent, which can reason about the data and the template, makes the change properly.

This is the same philosophy as the rest of Live: deterministic edits where determinism is safe, a routed handoff to the agent where it is not. Nothing is ever written that silently means something other than what you did on screen.

Related: compliance quick-fix

The same selection toolbar workflow pairs with Live's compliance meter: expand it for a violations list with nearest-token suggestions and one-click Fix and Ask AI actions. It is documented in the Layout Live overview under the compliance score section.

Next steps