Visual WYSIWYG Editing and Elements?

When using Elements I often. find myself wanting to be able to drag elements (or corners and edges of elements) to reposition, resize, crop, and reorder them within the viewport. I also find myself wanting the ability to copy an element from one place, and paste it inside as a child of another element. As none of this is currently possible in the viewport itself I’m always pushed to the property and inspector panels, both of which are the primary means of interacting with anything on the page in Elements.

Lately I’ve been playing around with a few other no-code WYSIWYG visual editors such as https://mmm.page, https://canva.com and https://framer.com and while Framer is probably the most similar to Elements (a much improved property inspector, along with pages, layers, and assets panels) they all have a much more visual and direct interaction model with the viewport itself - often using drag handles, contextual toolbars and such to provide common actions for each component. This immediacy makes for a much more intuitive and natural design experience.

Are there plans to enhance the interactive possibilities within the viewport, or will most design interactions within Elements be focused on the structure and inspector panels, with the viewport providing a realtime visual update of the changes made?

These tools are very different to Elements. We were never aiming for a freeform layout graphics style app as these kinds of apps never produce the clean and semantic code that we’d want — I could be wrong, but from my experience that’s what I’ve found).

I can see us adding direct manipulation for some things in the future, like corner radius for example.

2 Likes

I could also see it being useful for setting gaps (Sketch), and possibly margins and padding. As you mentioned, I don’t think it’s necessary to go as far as some apps go, but being able to work a little more within the Elements page viewport would be nice.

2 Likes

Yes, agreed!