Live CSS

The "Live CSS" tab in the panel gives you a full-featured (S)CSS editor that you can use to write CSS that will be applied to all panes. When there is Live CSS active, an indicator is show in the address bar.

Code editor

The Live CSS code editor is fully aware of all CSS syntax and values and will provide suggestions while you type. Select a suggestion with the arrow keys, then press Tab to apply it.

CSS/SCSS

You can toggle between CSS and SCSS. The SCSS is compiled on the fly. SCSS supports variables, nesting, calculation and more.

Selecting elements

Use the "select element" icon in the Live CSS header, then click on any element in any pane to get a list of all the CSS selectors defined in the site's CSS styles, along with any classes and id's on the element, and the element name itself, as suggestions for a selector.

With this, you can quickly write CSS to target a single element, or a group of elements, without needing to go to the devtools to find the right element.

Google Fonts

The Live CSS tab will automatically load in any Google font you define in your CSS, letting you quickly try out multiple fonts.

All Google fonts are available as suggestions (starting with a capital) so when you type font-family: you can easily get to them.

Selecting panes

By default, the CSS is applied to all panes, but you can also select a single pane to apply the CSS to. You can use this if you want to experiment with styling, and want to compare it to the original CSS. Open two tabs side by side, and select one of the panes to apply the CSS to.

Preserve

By default, the CSS will be preserved when you move away from a page, but you can uncheck the "preserve" button, and the CSS will be automatically cleared every time you navigate to a different URL.

Is your question not answered?
Ask via Twitter, Slack or our contact form

Start a Polypane trial

Improve your web dev workflow

Start free trialView pricing