Structure Panel

The structure panel is a powerful way to:

• See an overview of your page's structure
• Make drag and drop changes to your page's structure
• Access an element's settings
• Label elements to better organize your page's structure
• Quickly edit HTML tags
• Add BEM-style selectors automatically
• Turn elements into components
• Auto-generate element-based lists
• And more...

For this reason, we highly recommend you keep your structure panel open at all times. It's too powerful to hide!

Drag and Drop

The structure panel makes it easy to reorganize your page structure through simple drag and drop. You can drag any element to a new position in the structure tree, and the changes will be reflected immediately on the canvas.

To move an element:

1. Click and hold on the element you want to move
2. Drag it to the desired position in the structure tree
3. Release to drop the element in its new location

The structure panel will show you visual indicators for valid drop zones, making it clear where you can place elements.

Quick Tag Editing

Double-click on any element's HTML tag in the structure panel to quickly edit it. This opens an inline editor that allows you to change the HTML tag without opening the properties panel or HTML editor.

For example, you can quickly change a div to a section, or an h2 to an h1 by double-clicking and typing the new tag name.

Right-Click Context Menu

Right-clicking on any element in the structure panel reveals a powerful context menu with several useful features:

Auto-BEM

Automatically generates BEM-style class names for the selected element and its children. This follows the Block-Element-Modifier methodology, making your CSS more organized and maintainable.

Generate List

Creates a list structure based on the selected element. This is useful when you have multiple similar elements that should be grouped together in a list format.

Create/Edit Component

Turns the selected element into a reusable component. This allows you to:

• Save the element as a component for reuse across your project
• Edit the component definition
• Apply the component to other elements
• Manage your component library

Delete

Removes the selected element from the page structure.

These right-click options provide quick access to advanced features that would otherwise require manual coding or multiple steps through the interface.

Conclusion

The Structure Panel is a powerful feature, providing you with complete control over your page's HTML structure through an intuitive visual interface.

By keeping the Structure Panel open and familiarizing yourself with its features, you'll find that many tasks that traditionally required coding can now be accomplished through simple clicks and drags. This visual approach to HTML structure management makes Etch accessible to users of all skill levels while providing the power and flexibility that advanced developers need.

Remember that the Structure Panel works in harmony with all other panels in Etch's modular interface. You can have the HTML editor open to see the code changes in real-time, use the Properties Panel for detailed element configuration, or rely on the Canvas for visual feedback. This integrated approach ensures that you always have the right tools available for the task at hand.