Skip to contentSkip to footer

Elements Panel

The "Elements" tab in the Edit panel lets you select elements in all panes at once and edit their content, style and attributes, and gives you quick information on their dimensions, font and colors.

Inspect element

Inspecting elements in Polypane is made as easy as possible, and there's multiple ways to inspect elements:

  • Press alt/option and hover over the element you want to inspect
  • Click the inspect element button in the elements panel
  • Click the inspect element button in the Address bar
  • Press cmd/ctrl + Shift + C
  • Right-click an element and select "inspect element" in the context menu.

Any element you hover on will be highlighted in all panes, drawing areas for the content, padding, border and margin, as well as guides for the sides of the element. It will also show you a tooltip with information like element dimensions, color and font info, and accessibility features.

When you click an element it will be selected and the information will be shown in the panel. Pressing esc cancels inspection.

Inspect overlay and tooltip.

For more on element inspection, read about Polypane peek.

Dom Tree view

At the top of the navigator is the document source tree view ("DOM tree"). Hover over these to show an info tooltip in all panes and click on them to inspect them in the Elements panel. The selected element will automatically be made visible in the tree (and be available as $0 in the Console panel).

In the treeview we'll dim elements that are hidden, and add badges for flex and grid layouts so you know which elements are responsible for the layout.

As you inspect elements on the page, the treeview highlights the focused element in the DOM. You can double click on an attribute to copy its value.

Drag the bottom or right side of the DOM Tree to resize it.

Element info

The navigator will you show you the selected element with any id or classes. Hover over the element to highlight it in all panes. Click a class or ID to copy it, formatted for CSS. With the icons to the right of the element name you can reload the element styles, toggle its visibility and inspect the element in the Chromium devtools respectively.

Below the element you'll see a list of the element's children. Click on any to drill down and inspect them.

The navigator shows the foreground and background color (if defined) of an element. You can click on them to copy them. The applied font is shown next, along with the rendered font size and line height.

After the font information you'll see a red cross, single green check mark or double green check mark. This indicates whether or not your text is readable according to WCAG standards at AA (one check) or AAA (two checks) level. It calculates the actual contrast by taking element opacity and ancestor backgrounds into account.

At the right side, the navigator displays the visual element dimensions and aspect ratio.

Content editor

If an element has just text content, you can edit the content here and it will be automatically applied to all panes. If an element has a mix of text content and elements as children, you will be able to select the text as "text node" in the navigator.

The content editor will automatically resize to fit the content (up to a certain height) and when you hover it a copy button will appear in the lower right that will allow you to copy the content in one go.

Style differences between panels

Polypane will show the styles applied to the pane you selected the element in. You can use the "Pane" dropdown below the navigator to switch to the styling of the element in a different pane.

Box model

Shows box model information for your element. Because an element can have different dimensions in each pane, you can select which pane to show the box model for. Hover over any part of the box model (margin, border, padding or content) to highlight just that part of the element in all panes.

If your element has positioning, that's shown in the box model too, along with the offset.

You can click the arrow to the right of the box model to hide it so you have more space for the element editor.

Element editor

The element editor lets you change the style, computed style, attributes and dataset of the selected element, all synced between panes.

Style

The style tab will parse your CSS and list all the selectors that have effect on your element, either directly or through inherited values. It will also show the styling for pseudo elements (like ::before and ::first-line) and pseudo classes (like :hover and :any-link), as well as @keyframe and @font-face declarations that are referenced by the current element.

If a rule set is made up of multiple selectors (using ,) then the one that targets your element will be highlighted. On the right side, you'll see the stylesheet the selector comes from, as well as it's specificity. Click the specificity to open an explainer page for that selector in the Browser panel.

Any media queries, supports queries, container queries or layers that a CSS rule is inside of are also shown.

You can edit values by clicking on them and editing their values, and apply them by pressing Enter. If you're editing any numerical value, you can use the up and down keys to change the value. Holding shift will change the value by 10, holding cmd (on Mac) or ctrl (Windows and Linux) changes the value by a 100, while holding alt will change the value by 0.1.

Polypane automatically suggest associated values and custom properties. To select them, click them or use the arrow keys and enter to apply. As you hover over suggestions, a live preview is shown.

For properties with a color, we'll show a preview of the color. Click on that to open a color selector that will let you live edit the color in all panes.

When hovering over a block of CSS, checkmarks before each rule are shown. Clicking the checkmark will disable this CSS rule until you click it again or reload the page.

List of CSS Styles with some of them having a line through them, indicating they're disabled.

You can add CSS at the bottom of each selector. CSS Properties will be suggested as you type. Use the arrow keys and enter to select them.

Typing : will move you from the property to the value, pressing enter will add the line and let you type a new property.

Copy an entire CSS rule set (selector and all declaration) by hovering with your mouse before the selector. A copy icon will appear. Click that to copy a ready-to-use CSS rule set. You can also copy individual lines by clicking the same icon before the line.

Computed

The computed tab will show you the computed styles for an element. By default, it will hide all CSS properties that you didn't explicitly set. You can show all the CSS properties by clicking "Show all".

Edit the values by clicking on them just like in the style tab and click "Copy styles" to copy all your CSS declarations, or copy a single declaration by clicking the copy button before the line.

Attributes

The attributes tab will list all the attributes of an element, like class and values and lets you edit them live for all panes. Values will automatically wrap over multiple lines if they become too long (if you use atomic CSS for example). You can also add new attributes here. Keep the value empty for boolean values. You can delete attributes by clicking the trashcan icon.

When you add a new attribute, Polypane will suggest attributes appropriate for the element you're editing. For example, an img will get a suggestion for an src attribute, but a h1 will not.

While editing or adding an attribute, valid values will be suggested as well.

Classes
Polypane automatically suggests classes as you type in the class value editor. These classes are compiled from your CSS and HTML. Use the arrow keys to select the one you want to add and press enter to add it, or use your mouse and click them.

Data

The Data tab will list all the values stores in an elements dataset. Values will automatically wrap over multiple lines if they become too long. You can also add new items or delete them here as well.

A11y

The A11y (Accessibility) tab shows you the accessible name and role when available, whether an element is keyboard accessible, the contrast for this element and any accessibility attributes (like aria-labelledby set on the element). Values will automatically wrap over multiple lines if they become too long. You can also add new items or delete them here as well.

PP

Have a question about Polypane?

Contact us any time though chat, Slack or our contact form:

Contact Support

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane screenshot