AEM: View all Editor overlays with a “Wireframe Mode” | AEM Community Blog Seeding

[kautuk_sahni]

AEM: View all Editor overlays with a Wireframe Mode by Theo Pendle

Abstract

A simple, super-lightweight customization to allow Authors to see all component bounding boxes in the Editor Overlay.

Use case
When creating complex pages, it can sometimes be necessary to nest a number of components within one another and to create advanced responsive layouts. All of this leads to a situation where an Author can find it difficult to see exactly how each component is positioned on the page.
AEM offers the Content Tree sidepanel, but this also quickly becomes nearly unusable if a page contains more than 10 to 20 components.

Solution
We will be building a “Wireframe mode” (“X-ray” was already taken by another, different tool for debugging the TouchUI) which can be turned on and off with a simple click of a button in the Editor.

Read Full Blog

AEM: View all Editor overlays with a Wireframe Mode

Q&A

Please use this thread to ask the related questions.