Quick Guide to Pinegrow 3

Scroll through this quick guide to get familiar with Pinegrow and with all that’s new in Pinegrow 3. It will take you about 10 minutes and save you hours of your time.


New to Pinegrow?

Read Quick Introduction to Pinegrow to get started.

Redesigned user interface

Pinegrow 3 has a completely redesigned user interface that can be easily adjusted to your workflow.

Move tabs or whole panels to rearrange the workspace.

Click on an already selected tab to collapse the whole panel.

Rearrange open pages within the main working area.

Select which visual helpers you want to see in page views.

ALT + Click section titles and collapse icons throughout the app will collapse / uncollapse the whole level.

And don’t worry. If things get too messed up, use “Restore workspace” to get back to the default workspace.

Select multiple elements

Use CONTROL click (COMMAND click on Mac) to select multiple elements.

All editing actions are done on all selected elements.

Use SHIFT click to select a range of elements.

Elements on different pages can be selected and edited as well.

Intelligent drag & drop

Now it's easy to drop the element in the right location.

Orange line shows the place where the new element will be inserted. Green border highlights the parent element.

To insert the new element into text just hold it over the target area.

But the best feature of the new drag and drop is smart handling of multiple selected elements.

When a new element is inserted into one of the multiple selected elements...

...Pinegrow will analyse the situation and repeat the same operation on all selected elements.

This works even if the structure of selected elements is not exactly the same.

Press ESC to cancel a drag & drop operation.

Library panel with quick insert

Library panel contains HTML elements, components and snippets that can be placed on the page.

Use the new drag & drop to place elements from the Library panel to the page.

Custom HTML code can be easily added to the page. You can also use the simplified HTML syntax.

The Library has "Recently used" section.

Click on Insert element icon or press the PLUS key to quickly insert elements from the Library at any time.

Adding elements to the page works with multiple selected elements.

Editable Tree view

The new tree is much faster than before. It displays and works instantly even for large documents.

Clicking on the element in the tree selects the element and displays the menu.

Delete, duplicate and hide are all familiar Pinegrow commands.

Indent and outdent commands are new in Pinegrow 3.

Multiple elements can be selected with CONTROL click (COMMAND click on Mac). Use SHIFT click to select a range of elements on the same level.

When the layout of one selected element is changed...

...Pinegrow applies the same change to all selected elements.

Search results can be easily selected and deselected.

Quick insert is also available from the selected element menu.

Clicking on the border between the two elements inserts a new element in that space.

Quickly add and remove classes from elements

Adding and removing classes from elements is a big part of web development workflow. In Pinegrow 3 we made assigning classes easy and fast.

Classes can be toggled right from the Properties panel.

"Add class" opens up a floating tool with the searchable list of all known classes. Use arrow keys or mouse to toggle a class on the element.

To add a class that is not on the list just type its name and press Enter. You can even add multiple classes to multiple elements.

On top of that "Add classes tool" lets you quickly reuse recent classes.

CTRL (CMD) + L will open the class tool for the selected element.

Repeat commands N times

The new Pinegrow Repeater is a tiny feature that will become your best friend!

Just type a number and Pinegrow will repeat the next operation that many times.

For example, type 10 and then click on Duplicate.

Pinegrow will create 10 copies of the element.

Repeater works with all operations that insert elements to the page.

Type a number in the middle of a drag and drop move...

...during quick insert...

...or use it in combination with copy paste.

Seamless inline text editing

Pinegrow 3 has a powerful new text editing mode.

Use the “Text edit” control or simply double-click on the text you want to change.

When text editing mode is active, just click around the page and edit the text.

Click “Done” or deactivate the “Text edit” control to get back to working with selected elements.

Multiple page views - instantly in sync

Pinegrow lets you view and edit multiple views of the same page.

Use Add View to open additional view of the selected page.

Highlighting an element in one view will highlight the same element on all other views. Same goes for selecting an element.

Edits are instantly synced across all open views.

A specific device can be chosen from the list to resize the view. Device views can be rotated.

Page view height can be also set manually.

Views can be enlarged to more than 100%. That's great for precision work.

Use quick navigation to scroll page views into view.

Element code view with HTML and simplified syntax

Pinegrow is not only a visual website builder - you can also use it to work with code.

"Edit element code" is a convenient feature that lets you edit the code of individual elements.

Instead of dealing with the whole page you focus only on the relevant parts of the code.

In Pinegrow 3 you're no longer limited to editing the code of a single element.

Just type before or after the edited element to insert new elements.

Or edit multiple elements by selecting a range of elements on the page.

You can even open multiple code editors.

And if you prefer a cleaner syntax, you can switch to Pug (ex Jade) mode. Pinegrow will automatically convert HTML code to Pug and back.

The Brand new CSS editor

Pinegrow 3 has a powerful new CSS editor with visual controls, CSS list editor and full support for live-editing SASS and LESS stylesheets.

Active panel

ACTIVE panel shows the list of all CSS rules that are affecting the selected element.

Special states like “hover” are also supported.

Visual editor

Select a CSS rule to display it in the visual editor with controls for most properties, including: shadows, transforms, transitions and Flexbox.

Icons at the top of the visual editor show which properties are set and let you quickly scroll to the chosen section.

But that is not the only way to edit CSS rules.

CSS List editor

CSS List editor lets you uncollapse rules in the list and edit their properties directly. Use the “Uncollapse all” icon to uncollapse rules by default.

Right-click on any rule in the list editor to quickly override or duplicate it, either in the current stylesheet or in the stylesheet of your choice.

Click on insertion lines to add new rules and properties.

Editing inline style

Use Style attribute to quickly edit style of the selected elements (in their style attribute). Once you’re happy the result save the style as a CSS rule.

Stylesheet views

Showing the active rules is just one of the views. You can also open whole stylesheets and edit their CSS rules in visual editor or directly in the list.

Code editor is also available.

Use the Stylesheets menu to open and manage stylesheets.

CSS Rule selector maker helps you come up with correct selectors for new CSS rules.

The new interactive CSS Selector Maker helps you construct correct selectors for CSS rules.

Just click on tag names, ids and classes of the selected element and its parents.

As you go along Pinegrow highlights elements that match the selector.

Pinegrow notices if a new class is mentioned in the selector and offers to add it to the element.

Use media queries to target the rule to a specific device size.

Full support for SASS and LESS with instant live view

The new CSS editor also works with SASS and LESS stylesheets.

Use Stylesheet manager to connect CSS files with their source SASS or LESS files. Pinegrow will remember the setting.

Or convert an existing CSS files into a SASS or LESS file.

Use CSS List editor to work with advanced features like variables, nested rules, mix-ins, loops and so on.

All changes are shown in live view without having to save and recompile source files.

Undo / redo history

Pinegrow keeps track of changes done to HTML layout and to CSS stylesheets.

Use the new history panel to move back and forward through your editing timeline.

HTML and CSS changes are kept in separate history tracks so that you have precise control over which actions to undo and redo.

Plus everything you already love about Pinegrow

Everything you love about Pinegrow remains the same:

  • Pinegrow is a desktop app for web professionals that works directly with your files without having to upload and download your data to the cloud.
  • Pinegrow understands standard HTML, CSS, PHP etc files. There are no proprietary file formats, no need for importing and exporting your work from Pinegrow. Because of that Pinegrow fits great alongside other web development tools.
  • Affordable price and our friendly licensing model with choice of one-time payments and pay-as-you-go monthly subscriptions.

Still on the to-do list

A couple of features didn’t make it into the initial release of Pinegrow 3:

  • Atom integration, due to some technical issues. Atom integration will be back as soon as possible. Done. Added in release 3.07.
  • Bootstrap 4. But it’s next on our road map. As well as Foundation 6.4 and Font Awesome 4.7.
  • A separate VARS panel. For now, SASS and LESS variables can be edited in CSS List editor.
  • “Open as partial” from Pinegrow 2.x. Let us know if you need it. “Save partial” action is still here.

Download Pinegrow 3 - Free trial included

Get Pinegrow from $39 $49

with 30 days money back guarantee

  Special Pinegrow 3.0 launch offer 

* This offer ends today at midnight GMT.

Pinegrow is a standalone desktop app. Install it on your computers and use it on as many projects as you want, for as long as you want.


Pinegrow Pinegrow PRO Pinegrow PRO + WP
Perfect for Single page websites Multi-page websites and web apps Multi-page websites, web apps and WordPress themes
Features All from Pinegrow, plus: Pinegrow PRO, plus:
HTML Projects WP theme builder
CSS & LESS Master pages Blocks for WordPress
Live editing Smart components
Multiple views Reusable libraries
Edit code CMS
Open URLs
HTML snippets
Responsive
Bootstrap
Foundation
Blocks
PHP, ASP, ERB
Font Awesome
Option 1 - One-time payment with 1 year of free updates
PERSONAL LICENSE for Individuals and FreelancersLooking for upgrade? $49 $39
+ VAT for EU
Buy
$99 $80
+ VAT for EU
Buy
$149 $120
+ VAT for EU
Buy
COMPANY LICENSE for Companies and OrganizationsVolume discount & subscriptions $79 $64
+ VAT for EU
Buy
$179 $143
+ VAT for EU
Buy
$259 $207
+ VAT for EU
Buy
Free updates 1 year 1 year 1 year
Option 2 - Monthly subscription with recurring monthly payment (you can cancel at any time)
PERSONAL LICENSE for Individuals and Freelancers $8 / month
+ VAT for EU
Subscribe
$12 / month
+ VAT for EU
Subscribe
COMPANY LICENSE for Companies and OrganizationsVolume discount $15 / month
+ VAT for EU
Subscribe
$20 / month
+ VAT for EU
Subscribe
Always up-to-date 

Please get a Company license if you're buying Pinegrow for a company.

Choosing the best license type for you: Personal or Company?

Review the license agreement and buy the license. You'll receive email with the serial number after checkout. Launch the app and input your serial number under "3. Enter the serial number".

Do you prefer affordable monthly subscription?

VAT will be added for EU customers. If you are registered for VAT enter your VAT ID during the checkout process to buy without tax.

    Buy Now    

Are you a student or an educator? We have a special offer for you.

Download Pinegrow: Mac - Win - Linux 64