Getting the Most out of Pinegrow UI | Pinegrow Web Editor
Home/ Documentation/ Master Pinegrow/ Getting the Most out of Pinegrow UI

Getting the Most out of Pinegrow UI

Pinegrow comes with a powerful and flexible user interface that gets out of your way when you don’t need it.

Let’s get familiar with the user interface that was introduced in Pinegrow 3 and further improved in Pinegrow 4.


A workspace is a certain arrangement of panels in the UI.

Use Workspace menu on the top right side to switch between the predefined layouts and your own saved workspace layouts.

Restore and save workspaces.

Collapsing and expanding panels

Double click on any tab to collapse its panel. This is useful for putting away the panels that you don’t need for the task at hand.

Collapse the panel.

Click on any tab in the collapse panel to expand it back to its original size.

Expand it back.

Rearranging panels

Drag tabs from panel to panel, or drag them to a border between the existing panels to open them as separate panels.

Drag the empty area of the panel header (on the right side of its tabs) to drag the whole panel to the new position.

The page area with page views is not draggable. But its tabs can be rearanged and dragged to the side in order to split the page area.

Floating panels

Click on in the panel header to float the panel.

Floating panels can be freely moved around the screen and resized using the resizer in their bottom left corner.

Move and resize floating panels.

Double-click on the floating panel header to make the whole panel visible on the screen.

Click on again to dock it back into the static layout.

Hiding and showing the UI

Use icon in the top toolbar or press TAB (when not in code editor or in field input) to hide the UI.

Hide the user interface.

All panels will be collapsed and all floating panels (except quick windows) will be hidden.

Nothing to distract from your page.

Repeat the operation to show the panels again.

Toggle icon in panel headers to make that panel always visible, even when the UI is hidden.

Make panels immune to hiding.

Quick windows

Some tools open in quick windows. Quick windows are meant to be open for a short time, just for a specific task. You can move them around, resize them and double click the header to reposition them on screen.

Quick windows.

The most useful quick window are:

  • + opens the quick insert Library window.
  • P opens quick Element properties.
  • CMD +
    H or
    C brings up the quick Element code editor.
  • CMD +
    L opens the Assign classes quick window.

Quick windows are handy for getting access to important features while the relevant panels are collapsed or if the whole UI is hidden.

When things get messed up

Sometimes, despite the best intentions to neatly organise the workspace, the layout gets really messed up. Rather than trying to clean things up, you can just use Workspace menu to restore a predefined or saved workspace layout.

Restore the workspace.

If that fails, restart Pinegrow immediatelly after restoring the workspace.