What is Pinegrow?

Pinegrow Web Editor is a desktop application for creating and editing websites.

Pinegrow is a general purpose HTML and CSS editor. Although it has extensive support for frameworks like Bootstrap and Foundation, Pinegrow is not tied to any particular framework or library.

With Pinegrow you build websites by editing HTML layout and CSS rules. Pinegrow is a collection of integrated tools: some are visual and some work with code. You’re free to mix & match these tools in a way that best fits the task at hand.

For example, when working with Bootstrap, you can use Element properties panel to (1) visually control Bootstrap properties, live-synced with the (2) code view where you can inspect and tweak the HTML code directly. At the same time you use (3) Style panel to edit active CSS rules.

Your page never becomes tied to a closed Pinegrow file format. Pinegrow reads and writes HTML and CSS directly, so you can use it alongside your other tools.

Getting started with Pinegrow - interactive tutorialTutorial

New to Pinegrow? This interactive guide is the best place to start. We'll go through all Pinegrow panels and take them for a spin.

We'll need a page to play with during this introduction. CLICK on the button below to open a sample page about the oldest Pine trees in the world: 

We'll need a page to play with during this introduction. To open the sample page used in this gude, open the in-app help in Pinegrow by clicking on the 271_ICON in the top toolbar. There, go to "Getting started with Pinegrow" and click on the "Open the sample page" button. Or, you can open one of your own pages and experiment with that.

NoteFeel free to mess up the sample page as much as you want during this tutorial. You can always close it and open a fresh copy by clicking on this button again.

The page view

Most editing operations in Pinegrow happen on the page view.

Page view with our test page.

Play around with page views:

  • Move the mouse over the page view. Notice that hovered elements get highlighted with the green border.
    Highlighted element.
  • CLICK once on an element on the page to select it. The selected element has a blue menu and border.
    Selected element.
  • Try clicking on the Duplicate duplicate_ICON icon or press CMD+D_KEY to make a copy of the selected element.
  • CLICK on the Delete bin_ICON icon or press DELETE_KEY to get rid of the duplicated element. Use UNDO if things get messed up.

The purpose of this guide is to go through all Pinegrow panels and tools quickly. So we'll cover the rest of the selected menu commands elsewhere.

Document structure tree

Open the Tree panel.

NoteYou can CLICK on the "Open the panel" links throughout this guide to open that panel. Pinegrow will also show a visual clue to highlight the panel.

Tree panel displays the nested HTML structure of the selected page. The selected element is blue.

Tree panel with the selected element.

Let's take a quick look at the tree:

  • Click on any element in the tree to select it. This element will also be selected in the page view. A menu 1 will appear next to the selected element in the tree.
  • Play around with menu commands. Use UNDO if you get lost.
  • Elements that have children (other elements inside itself) can be collapsed and expanded. CLICK on down_ICON and right_ICON icons and see what happens. Use collapsing to hide details that are not relevant for the task at hand.
  • A super useful trick: press ALT_KEY while clicking on down_ICON and right_ICON icons to collapse and expand the whole tree level. 
  • Try moving elements in the tree. For example, hold h1 heading and drag it under the p element. Then take it back. Use UNDO if you make a mistake.

Library - Adding elements to the page

Open the Library panel.

Library panel contains HTML elements and components (groups of HTML elements) that we can add to the page. You can also use the Library panel to insert the code directly and to define your custom snippets and smart components.

The Library panel.

Let's add a new element to the page:

  • Take h2 from the Library and drag it to the page. The orange line will show where the element will be placed.
    Dragging h2 from Library to the page.
  • Take another element from the Library panel and drag it to the Tree panel. As always, use UNDO if things get messed up.
    Dragging h2 from Library to the tree.
  • Select an element on the page. Then RIGHT_CLICK on any element in the Library panel to display the menu for inserting the element into, before or after the selected element.
  • Type "p Hello" into the Insert code box (that's a simplified syntax for <p>Hello</p>. A "p | Hello" item will appear just below the code editor. Drag it to the page. 
    Inserting the code.

Element properties

Open the Element properties panel.

Properties panel (resized to two columns).

Use Element properties panel to edit element’s attributes. For example, to change source and alt text attributes of an image. Classes are managed there as well. And the panel contains controls for properties defined by frameworks like Bootstrap.

Let's try to edit some properties:

  • Select the h1 heading on the page or in the tree. Use Heading level control (in Heading section) to change the level to Heading 2.
    Changing the heading level.
  • Add a class by clicking on Add class button 1 in Classes section. A floating tool 2 will show up. Enter a class name (for example, title) into the input field and click on Add class button 3. Close the floating tool.
    Add class from the Properties panel.
  • Play around with Bootstrap controls in Text & Context section.

Style - Paint with CSS

Open the Style panel.

Visual styling of page elements is done with CSS rules. Each rule has a selector that specifies what elements are affected by the rule and properties like color, font, etc. that define the visual style.

Example of a CSS rule with selector and properties.

We'll spend a bit more time on this panel because it is a very powerful tool if you know how to use it effectively.

Exploring and editing existing CSS rules

On the sample page, select the H2 element with the poem title and take a look at the Active tab in Style panel: Active tab 1 displays all CSS rules that affect the selected element.

Active tab in Style panel.

The Active tab also displays the style set directly on the HTML element with the style attribute 2. We'll explore it a bit later.

Rules from framework stylesheets, like bootstrap.css, are hidden by default. Click on the Show more links 3 to display them.

Visual editor 4 contains visual controls for editing CSS rule properties.

Let's do some styling!

  • Click on the .poster rule to select it. The selected rule is displayed in the Visual editor.
    Style panel with the selected .poster rule.
  • In Visual editor play around with the width property in the Dimension section 1.

Creating new CSS rules

So far we were modifying an existing CSS rule. Let's create a new CSS rule now:

Add a new CSS rule:

  • Select the h1 heading element on the page. Enter a class selector into the Create rule input box 1, for example, ".big".
    Adding new CSS rule for the selected element.
  • Since the selected h1 doesn't have the .big class assigned, Pinegrow will offer to add the class to the element 2. Leave that check box on.
  • Click on Create button 3. Since this is the first CSS rule that we are adding, Pinegrow will ask us to confirm which stylesheet should be selected as default for adding new CSS rules. Let's choose pine.css. After we set the default stylesheet, all new rules created with the Create button will go there.
    Confirming the default stylesheet for new CSS rules.
  • The .big CSS rule is now created 1 and displayed in the Visual editor. Use control selector (or scroll) to go down to the Text section. Play around with different controls.
    Using text controls in Visual editor.

Quick styling with Style attribute

Every HTML element can have the style attribute for setting its visual properties. For example:

<h1 style="color:red>I'm red!</h1>

Although the style attribute is the quick and easy way of styling elements, using it is not recommended. Why? Because instead of using one CSS rule to tell the browser that all H1 elements should be red, you have to specify the color on each and every H1 element on your site. Now imagine that you have 20 pages and want to change the color to green.

But, Pinegrow knows a smart way of using the style attribute:

Edit Style attribute and then save it as a new CSS rule.

Let's paint with style attribute:

  • Select a P paragraph on the page. In Style Active panel, select the Style attribute 1 if it is not already selected.
  • Set some properties in the Visual editor, for example, text color, size, background color, etc. If you check the Element code panel you'll see the visual properties stored in the style attribute.
  • Once we're happy with the style, CLICK on the "Save as a CSS rule" plus_square_ICON icon on the Style attribute. The Create CSS rule dialog will open:
    Choose selector and destination for the new rule.
  • Enter the new rule name 1 and select the destination stylesheet. Pinegrow will transfer the visual properties from the style attribute to the new rule, and delete the style attribute from the element.

The "Style attribute -> Save as CSS rule" is a very convenient workflow. It lets us jump right into styling the element without first having to figure out what kind of CSS rule we need to create.

The Style panel has a lot more to offer, but for now, let's leave it and continue exploring Pinegrow.

Text editing

CLICK on text_edit_ICON in the toolbar or DOUBLE_CLICK on any text on the page to activate the text editing mode.

The edited element will get a dotted yellow border and a blue text editing menu:

Text editing is active.

Let's change some text:

  • DOUBLE_CLICK on the paragraph describing the oldest pine trees. The editing toolbar will appear above the element.
  • Edit the text. Select a word and click  the B icon or press CMD+B_KEY.  
  • CLICK on the page heading. The text editing mode is still active. Now you can edit the heading text.
  • CLICK on Done button in the blue text toolbar, press ESC_KEY, or CLICK on the text_editi_ICON in the top toolbar to exit the text editing mode.

NoteFor best results select only the element that you want to edit. For example, if you want to change a button label, just select the button, not the parent container of the button.

NoteUse the Element code panel (described next) in situations where Text editing doesn't do excatelly what you want.

Element Code

Open the Element code panel.

Pinegrow is not only a visual website builder – you can use it to work with code as well. Edit element code panel 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.

NoteDon't know HTML? The Element code panel is a great place to learn about code. No scary code soup - instead take a look at different elements one at a time and observe how different editing operations change the code.

Let's get coding!

  • Select the leading paragraph or any other element on the page. Its code will appear in the code editor. Try changing the text. The change is immediately seen on the page.
    Edit the code of the selected element.
  • Switch to simplified code syntax by clicking on the 277_ICON icon. The simplified syntax is sometimes easier to edit, and it is less prone to errors. Note, this syntax is only used for editing. Normal HTML code will be used on the page.
    Simplified code syntax.

Page code editor

Open the Page code panel.

Page code editor.

There we can also edit the code of the whole page.

Note that simplified syntax mode is not available in the page code editor.

Let's edit the code of the whole page:

  • Select an element (h1, for example) on the page. Notice that the element also got highlighted in the page code editor.
  • Change the text of h1 in the code editor. The change appears in page view as well.
  • RIGHT_CLICK on an element in the code editor. The element will get selected in the page view.

Selecting multiple elements

Most editing operations in Pinegrow can be done on more selected elements at the same time. This is a great time saver.

Changing background context of three elements at the same time.

To select multiple elements:

  • CMD_KEY + CLICK on elements on the page or in the tree. 
  • SHIFT_KEY + CLICK to select a range of elements on the same level.

Do editing operations on multiple elements:

  • Select a couple of elements on the page by CMD_KEY clicking on them.
  • Now you can duplicate or delete all of the selected elements with one operation. You can also change their properties and so on.
  • Press ESC_KEY to deselect all elements.

Multiple page views

Each page can have multiple page views showing the page at different sizes and in different devices.

Editing multiple page views at the same time.

Play around with page views:

  • Open another page view by clicking on the add_ICON Add page view icon.
  • Move the mouse over the two page views. Notice that hovered elements get highlighted (with green border) in both views.
  • Click on any element on the page. The element will get selected in both page views.

The Repeater

The Repeater is a handy feature that lets you repeat a single command many times.

Repeat the next operation X times.

Let's repeat some stuff:

  • Select an element on the page.
  • Make sure you're not in Text editing mode text_edit_ICON. The Repeater doesn't work there.
  • Type a number, for example 10. Note, there is no input box for that, just press "1" and "0".
  • Click on Duplicate duplicate_ICON on the selected element. 10 copies of the element will be created.

History - Undo and redo

Open the History panel.

History panel shows the list of editing steps.

History of page and CSS edits.

It has two tabs: HTML tab shows edit history of the current page and CSS shows the global history of CSS edits.

Travel back in time:

  • Press CMD+Z_KEY to Undo the last step.
  • Press CMD+SHIFT+Z_KEY to Redo the last step.
  • CLICK on any step in History panel to go back or forward in time.

The Toolbar

Let's take a look at the top toolbar.

The toolbar has many useful tools.

The toolbar contains many useful tools:

  • Use minus-circle_ICON 100% plus-circle_ICON zoom control to select the page views magnification.
  • Display helpers Pin13_ICON lets you toggle visual helpers like selected elements menus and borders, element outlines and so on.
  • text_edit_ICON toggles the text editing mode.
  • Use Test clicks touch_ICON to let your page handle clicks, for example, to click on a Javascript-powered button on your page. When Test clicks are off, Pinegrow selects the clicked element.
  • KODA_ICON toggles the Page code editor.
  • Use JS_ICON to toggle Javascript code on your page during editing in Pinegrow. This is useful if Javascript causes performance issues or too much movement on the page.
  • CLICK on refresh_ICON or press CMD+R_KEY to refresh the page view of the current page. That is handy if page display becomes messed up during editing or if you want to reload external resources (images, scripts).
  • Use 27_ICON or CMD+B_KEY to preview the current page in the external browser.
  • add_ICON opens another page view in the selected page tab.
  • Repeater × 1 lets you repeat any editing operation (already described above).

Project panel

Open the Project panel.

NoteProjects are available in Pinegrow PRO edition.

Pinegrow projects are plain-old file folders. Just open a folder as a project, and you'll see a list of all files and subfolders here.

Project view with the open menu.

Let's create a project:

  • Select File -> Save from the top menu or press CMD+S_KEY and save the sample page into a new folder on your computer.
  • After the page is saved, Pinegrow will offer to open the folder as a project. Say Yes and take a look at the Project panel.

Actions

Open the Actions panel.

NoteActions are available in Pinegrow PRO edition.

Actions panel lets you create Smart components, Master pages, Editable areas and more. Select one or more elements on the page and assign an action (behavior) to them. These features are available in Pinegrow PRO edition.

Turning the main heading into a reusable Page title component.

We'll just mention this panel at this point. Visit the online documentation.

Creating WordPress themes

Open the WordPress panel.

NoteWordPress theme builder is available in Pinegrow with WordPress Theme Builder edition.

Use WordPress panel to convert the HTML project into a PHP-based standard WordPress theme. This feature is available in Pinegrow with WordPress theme builder.

Mapping image element to WordPress post featured image.

We won't go into details here. Check out the documentation to see how you can build a WordPress theme with Pinegrow.

You did it!

Congratulations! Now you know what Pinegrow is about and how to use it.

There are many features that we didn't mention here. Almost every panel & tool has a bunch of tricks up its sleeve that can help you to be more productive. Start using Pinegrow and check the rest of the documentation to learn more.