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

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,200 likes

Total Posts

6,394 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,200 likes

Total Posts

6,394 posts

Correct reply

1,147 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

01-06-2020

BlogImage.jpg

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.