Backups

If enabled Pinegrow saves copy of existing HTML or CSS file to _pgbackup folder before overwriting the original. You can turn this off if you're using source control to keep track of file revisions.

Editing

Empty divs (and similar elements) have height 0px and are thus not visible on the page. Enable this option to apply min-height:100px to empty divs, sections and similar elements. This only affects how elements are shown in Pinegrow, display in browser is not affected. Reload pages to apply the setting.

Disable if Javascript code on edited pages causes crashes or performance problems. Javascript can also be enabled / disabled in Page menu of each individual page. Use page setting to change Javascript support for open pages.

Keep data-pg-collapsed and data-pg-hidden attributes in saved files. data-pg-collapsed attribute is used to mark elements collapsed in the tree. data-pg-hidden attribute is used to mark elements that are hidden during editing in Pinegrow.

Pinegrow will auto format the HTML code whenever a document is saved or edited. Disable this setting to keep the original HTML format.

By default, Pinegrow will format the CSS code whenever a stylesheet is saved or edited. Select Auto Detect to let Pinegrow figure out the correct formatting or switch it off to keep the original CSS format.

Internal Web Server & Proxy settings

Pinegrow uses internal webserver to access local HTML files. Change the value if you experience problems with the default setting.

Pinegrow uses internal webserver to access local HTML files. Select a free port and make sure that incoming connections are not blocked by a firewall. Each Pinegrow window needs a free port. Each subsequent window will look for the first free port above the one specified here.

Comma separated list of file extensions (with .) that can be edited in Pinegrow. For example: .html, .htm, NOEXT... (use NOEXT to make files without extension editable.) These should be some kind of HTML files - NOT .js, .css, images...

If your computer uses proxy server for network access, enter the proxy configuration here. For example, direct://;127.0.0.1:8888 or direct://;socks4://proxyserver:8889. Note: prepend direct://; to access local files directly.

Code Editing

Select the theme that is used in page and element code view.

Use CTRL + Space to show auto-complete suggestions in code editor when this option is turned off.

Default is 12px. Don't forget to add px or another unit.

Default is 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace. Use the font family name of a font installed on your computer.

Use JetBrainsMono for font ligatures. The font is bundled with Pinegrow.

Size of HTML code indent.

Enable rendering of indent guides.

Emmet has a couple of useful HTML editing functions.

Sync

HTML and .CSS/.LESS files will be auto-reloaded if modified in external editors.

CMS for Static HTML Websites

In the CMS mode only elements marked with Editable area actions are editable, the rest of the page is locked. The UI is simplified. Don't use the CMS mode when building the page. Use it only for clients who will edit editable areas of the page.

Misc. Settings

Increase or decrease user interface size.

Usually 12, can be more if you're using customized Bootstrap.

Comma separated list of project subfolders to ignore. This can greatly speed-up working with projects. Everything starting with . is ignored by default. Note, you can also right-click on files and folders in the Project panel and deselect Scan for components and master pages.

Pinegrow is collecting a limited amount of usage data so that we better understand how users are using Pinegrow. That helps us to focus our development resources on the features that are actually useful. No personal data is collected.

Quick messages popup when you save a page, export a WordPress theme... Check this to disable them. Warnings and errors will still be shown.

User Variables

Define variables that can be used in WordPress Site Action theme folder setting and other places. Define one $var=value per line. To use the variable, type ${var}.

SASS/LESS Compilation

Remove any empty CSS rules in compiled .css files. This decreases the size of compiled .css files.

By default Pinegrow uses CSS autoprefixer to ensure that CSS styles can be safely used in majority of browsers. Note, autoprefixer is only used when working with SASS/LESS files.

Use this settings to define custom Autoprefixer settings. Recompile SASS/LESS files after updating these settings to apply changes.