Snippets

The Snippets panel lets you add and manage JS and CSS snippets that can be applied to all or some of the panes. They can be toggled on and off individually or as a group when combined in a folder.

Snippets are a powerful way to augment your workflow in Polypane, whether it's adding custom styles for testing, injecting JavaScript for debugging, or quickly applying code changes across multiple viewports.

Snippets can also easily be shared between different Polypane installations using the import and export functionality.

Snippet types

Polypane has three different snippet types:

• CSS snippets. These snippets contain CSS code that is added to the page's stylesheets.
• JS Load snippets. These snippets contain JavaScript code that is applied every page load.
• JS Activate snippets. These snippets contain JavaScript code that is only applied when pressing the "Run" button for a snippet.

Folders

Snippets can be organized in folders. Folders can be enabled or disabled as a group, making it easy to toggle related snippets on and off together.

Managing snippets

Snippets and folders are listed alphabetically, and can be activated by clicking the toggle or 'run' button next to them. Click the dropdown next to the toggle or button to select which panes to apply a snippet to and click the pencil icon to edit, delete or export a snippet or folder.

Snippet indicator

When one or more snippets are active for a pane, a snippet indicator is shown in the address bar showing a "CSS" and/or "JS" badge depending on which snippets are active for that tab, to prevent you from accidentally forgetting about active snippets that may affect the page.

Click on the badge to open the snippets panel and manage your snippets.

Snippet activation

When a new pane is added, all active snippets and folders will be applied to it automatically if the folders or snippets are applied to the majority of panes. If a snippet or folder is only applied to some panes, the new pane will not have it applied.

When a snippet or folder is activated, it will be applied to all existing panes immediately. To specify which panes a snippet or folder should be applied to, click the dropdown next to the toggle or run button.

Running snippets

Snippets that are of type "JS Activate" have a "Run" button instead of a toggle. This button can be clicked to run the snippet in the selected panes. You can also choose which panes to run the snippet in by clicking the dropdown next to the button.

These snippets are wrapped in an IFFE (Immediately Invoked Function Expression) to prevent clashes with other snippets or page scripts so you don't have to worry about variable or function name conflicts.

Adding folders

Click the "Folder" button in the top bar to add a new folder. Enter a name for the folder and click "Save".

Adding snippets

To add a new snippet, press the "+ snippet" button in the top bar. The Add Snippet dialog will open, where you can enter:

• Name
• Folder to add the snippt to (optional)
• Description (optional, will be displayed in the overview)
• Language (CSS or JavaScript)
• When to run (on load or on activate, only for JavaScript snippets)
• The actual code

Code editor

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

JS Bookmarklet support

Polypane automatically cleans up bookmarklets when pasted into the code editor, removing the javascript: prefix and unescaping characters so you can easily convert bookmarklets into snippets.

To add a bookmarklet, just copy the URL and paste it into the code editor, Polypane will do the rest.

Get CSS Selectors from the page

Use the "Get CSS Selectors" button above the code editor and click on any element in any pane to get a list of CSS selectors that match that element as suggestions.

This lets you quickly write CSS to target an element with the right level of specificity without needing to go to the devtools. It's also useful in your JS snippets to quickly get selectors for document.querySelector calls.

Google Fonts

The Snippets 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 also has support for variable fonts served by Google Fonts, and all axes are available for use.

Formatting

The Format code button uses Prettier to format your code on the fly. We have a default Prettier configuration that works well for most users, but you can also set your own custom Prettier configuration as described below.

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 Snippets 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/

Add your configuration file and set your preferred Prettier options. Polypane loads this file on launch.

Importing and exporting snippets

Snippets and folders can be exported and imported using the export and import options in the snippet/folder edit dialog.

When exporting, a JSON file will be created containing the snippet or folder data. This file can then be imported on another Polypane installation using the import option.

This makes it easy to share snippets between different Polypane installations or with other users.

Importing bookmarklets

If you have a collection of bookmarklets in another browser that you want to convert to snippets, export them as a JSON array through one of various extensions. If each bookmarklet has a title and url field, Polypane can import them directly as snippets.

When importing bookmarklets, they are added as JavaScript Activate snippets, so you can run them when needed. Non-bookmarklet entries will be ignored.