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.

You can format or clear your CSS and SCSS with the buttons in the top 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 that match the element 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.

Polypane has support for variable fonts served by Google Fonts, and all axes are available for use.

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.

Formatting

The Format button uses Prettier to format your CSS on the fly with it's default settings.

Custom formatting with Prettier

You can set custom formatting options by adding a prettier configuration file, like .prettierrc or .prettierrc.js file in the Polypane settings folder. This will be applied to the Live CSS panel, , the Source Panel and to any code snippet you copy from the Elements Panel.

The Polypane settings folder can be found in this location:

• Windows: %APPDATA%/Polypane/
• macOS: ~/Library/Application Support/Polypane/
• Linux: ~/.config/Polypane/

Set your preferred Prettier options, for example as a .prettierrc file that specifies the use of tabs:

{
  useTabs: true,
}

This will let you configure Polypane so the code snippets match your projects formatting settings. When Polypane launches, the prettier configuration will be parsed and applied.

Advanced: set a custom font-size

To set a custom font-size for the Live CSS panel, add a file polypane-livecss-state (note that this file doesn't have an extension) to the Polypane setting folder with the following format:

{ "fontSize": "16px" }

and set your own custom font size. This file will be parsed on app launch.