panels

HTML inspector

This panel is used to inspect and edit the DOM elements that make up our HTML page. The changes will be saved automatically.

Once a resource has been selected (by clicking on it), we can open a drop down by clicking with the right mouse button or clicking on the [...] button on the left.
This dropdown list contains the actions that can be performed on the nodes.

Tilepieces compares the page nodes with those of the source code, in order to modify the HTML file without importing changes not expressly created by the user.
When working on nodes that cannot be perfectly matched in the original document, html inspector will indicate this by disabling all or part of the possible actions on the node.

in the panel there is a menu at the top. Click the panes in the image below to learn more about the functions of each tab.
tilepieces documentation - html-inspector-icon
tilepieces documentation - html-inspector-search-1
search for nodes using the CSS selector

Multiple selection

activate the multi-selection of nodes. You can activate multiple selection by clicking on a node and pressing ctrl (to add an element) or with shift (to add more elements)

CSS view

tilepieces documentation - html-inspector-css
get a view with only the CSS resources present in the document

Javascript view

tilepieces documentation - html-inspector-js
get a view with only the javascript resources present in the document