Feature suggestions

It would be great to see the current source code when selecting an element. Currently, the inspector panel only has content when we create a custom HTML element, but it would be useful to see the HTML code when clicking on any other element: containers, flexboxes, text, buttons, etc. It doesn’t need to be editable—just a viewer.

I know it’s possible to right-click and inspect elements from the website panel, but having this feature integrated would streamline the workflow (maybe helps to debug too).

Visual indicator for modified properties

Another useful feature would be to visualize which properties have been changed from their default values. For example, if I drop in a flex container and change the default settings to a horizontal gap of 20px, the flexbox settings and the horizontal gap property could be displayed differently—perhaps with a different text color or a small flag. This would make it easier to track where changes have been made.

Other builders use a small dot like · , but I understand elements use that for the breakpoints.

Attached example selecting a text (header) from the components tree.

Modified section and modified default values/properties (not a good example, as elements uses this symbol for breakpoints):

I understood from @Dan and @Ben that at some point they will open source the included components so you can see how they work.

1 Like