Pinegrow Web Editor 7.3, March 28, 2023

Download Pinegrow 7.72

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 8fc62d5ce341aee21851eeb8eeb1ce0d3c829967

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 5688a76765d3108bc4e7ca56a99639efd2d5b446

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: 38ffd9a3e022a37b3b4112c6ceaebf0a7b65352c

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 165eb13033ff0f5eda6ec15a2beeba4632d159ff

Download Pinegrow 7.6

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: b050e43feb764e5e82a83e793a62f3715ea17797

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 0c11a80469c3ae389e8f2d51b387ea522abf8654

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: afeeefb3424e60f45a991a26811aedf45708e462

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 4196e62fbc56f91ca2f928d077a17c78467b05ab

Download Pinegrow 7.5

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cd4449006d315b5b9825cc2d6976758423a95c

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 8688b47acbae1523b030b0d1c7ec923b890c4f76

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: b322e67373644e9558ab1f3897971558f1869de9

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: abd452ceeb082c009474ae0a3fd047c97a26bfbf

Download Pinegrow 7.4

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cdbd7a24cce183268c7cd47fe0f94a941e9fba

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: b84a266ce222e27ce44ce27b9be91efda6753440

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: bfcba642254734bb77de59efa956cc5f9c98fe67

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: b69944aa1eca7bf5ad19b3c8b16a84939ee98615

Download Pinegrow 7.3

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 2f81fdad251123158639f335178d91023f2b9d57

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: a7e94474ea5e0b320d645eb25e77a4a5b5230afc

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: f7fb920a7a610943cffb3208d6fac250dfb30136

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 9d0a0b667977f743e5ab7ccd684358edd3133f8c

The smarter AI Assistant

Pinegrow AI Assistant now uses ChatGPT-3.5 and GPT-4 models. It comes with its own panel and lets you chat about the current task to get it just right.

This document explains how the AI Assistant changed from the previous version. Read this complete guide to learn how to use the AI Assistant.

AI Assistant panel

With these improvements AI Assistant become more useful and therefore deserves to have its own UI panel. The AI Assistant panel is shown by default. If you don’t use it, hide it in the Windows menu.

Pine tree image gallery on The Amazing Square page, beside the AI Assistant chat asking to round and replace images.

The AI Assistant floating window is deprecated. Pressing the / key or the icon now displays the AI Assistant panel.

We might being the / command back in the context of a general purpose command interface, not just limited to AI.

Chat about the current task

After starting a new task by telling the AI Assistant what to do, you can use the chat interface to follow up on the task, until the assistant gets it right.

AI Assistant chat for the gallery listing requests to round images, replace them with pine tree images and add one more.

Clicking on the New task button (or pressing CMD+Enter) starts a fresh new task. Only your instruction and any relevant code are included in the prompt. This is the most cost effective way to run commands.

Once the result of the task comes back you can use the Chat button (or pressing the Enter key) to follow up and instruct the assistant on how to fine tune the current task. Chat prompts includes all previous requests and responses and therefore spends more tokens, making the API call more expensive.

That said, at least with the ChatGPT-3.5 model the costs are tiny and chatting about a task is an effective way to get the assistant do precisely what you want.

The Chat button is enabled only if the same element and action are selected. If you select another element you can not chat about the previous task. Reselecting the original element brings the chat option back.

When to use New task and when to Chat?

The general guideline is to use New task when doing an action that does not require the context of the previous task, and to use Chat when telling the assistant how to do the current task right.

Here is an example. We want to add Testimonials section to the page.

We first select the whole main element because we want the assistant to be aware of the styling and structure of the website. The action is Transform element layout and content. The prompt is “Add testimonials of happy customers.”

Moon Travels page with the AI Assistant chat showing the request to add testimonials of happy customers, and a callout about New task.

The assistant adds the testimonials section.

Instead of using Chat to fine tune the testimonials (and include the whole main section in every prompt and result) we select the section with testimonials and start a new task with the prompt “Format testimonials. Put name below the quote.”

Testimonials on a dark background with two quote cards, and a callout to use New task to start working on testimonials.

In the followup steps we use the Chat button to fine tune the testimonials:

Moon Travels testimonials with names below the quotes, and the AI Assistant chat with follow-up requests to fine tune them.

GPT-4 support

Use Settings ( icon) to select the model for API calls. ChatGPT-3.5 is the default model. If your OpenAI account has access to GPT-4 models you can use them instead.

AI Assistant settings for OpenAI with the Model list open, showing gpt-3.5-turbo, gpt-4 (checked) and gpt-4-32k.

Note that the cost of using GPT-4 model is significantly higher.

Project brief

The project brief field in Settings lets you include a project description and any relevant instructions into every prompt performed on the current project. Keep it concise because the brief gets included into every prompt.

The project brief is stored in project settings, so that every project can have its own brief.

New action - Transform whole page

This action includes the complete HTML code of the selected page in the prompt and replaces the page with the generated code. The action is useful for editing the page as a whole and for editing component files.

Vue Discover Projects template with Transform the whole page selected and a prompt to turn the title and text into attributes.

Note, the whole page and the generated code must fit into the maximum token length. For GPT-4 this is 8k tokens.

Class Tree inspector for Tailwind CSS

Visual controls for Tailwind CSS are nice, but for more experienced users working with them requires too much clicking and scrolling around.

We now have alternative tool for working with Tailwind CSS classes - the Class Tree inspector.

Pinegrow Class Tree inspector for a div of cards, listing classes such as bg-white, rounded-lg, shadow-lg and grid-cols-1 with sm variants.

The Class Tree displays a tree grid with all the variants and classes of the selected element and all its parent elements.

This gives a complete view of all classes that affect the selected element.

How to show the Class Tree?

There are two ways:

Use Class Tree instead of visual controls in the Properties panel

Click on the Tools menu in the Properties panel and activate tree Class Tree.

Tools menu in the Properties panel with Visual controls checked and Class tree highlighted under Editing mode

It will be shown instead of visual controls, as shown on the image above. To get the visual controls back use the Tools menu in the Class Tree.

Use floating Class Tree inspector

Press the S key to bring up the Class Tree in the floating panel. This lets you use the Class Tree inspector alongside the visual controls.

Floating Class Tree inspector listing the classes of a div, with a callout to press S to open it

The Class Tree is not just showing the classes. It also lets you manipulate the classes.

Adding a class

To add a new class click on the Add Class button:

Class Tree beside a Team Management preview, with a Click to add a class tooltip over the Add class button

There, select the property and its class value from the menu:

Add class menu with Text, Margin and Padding, Dimension, Display and Position categories, with the Dimension submenu open

Or, start typing to quickly find the class. For example, typing mt10 will list the Margin top 20 class. Use up and down arrow keys to highlight the class and press Enter to select it:

Class search field with mt10 typed and matching suggestions such as Margin top 10 (mt-10) listed below

Change the class value

Click on the class to display a list with all possible values of the class property. Hover over values to preview their effect and click to replace the value.

Class Tree value menu with options from none to full and lg checked, beside the Team Management preview

Removing a class

To remove the class hover over it and then uncheck its checkbox. The class remains displayed so that you can easily toggle it back. If you leave the class unchecked and reselect the element (thus repainting the Class Tree) the class will no longer be listed.

Class Tree with the justify-center class checked, with a callout to toggle the class on or off

Add a variant

Click on the orange plus button to add a variant, such as hover, display size or any combination of variants.

Select a variant from the dropdown menu:

Variant menu for a div listing screen sizes sm, md, lg, xl and 2xl, followed by All variants hover, focus, active and visited

Once the variant is added use its Add Class button to add classes.

Edit a variant

To edit a variant click on the orange variant field and add or remove a variant selector.

Class Tree with the lg variant tag selected, and a callout to click to edit the variant selector

Alternatively, select Edit to edit the variant selector as a text. For more complex variants, editing the text is the only option.

Variant menu with group-visited, first, last, odd, even and dark options, and Edit highlighted at the bottom

Remove a variant

Uncheck all the variant’s classes to remove the variant:

Class Tree with the mr-4 class checked under the lg variant, with a callout that unchecking all classes removes the variant

Class styles

The Class Tree inspector displays class styles if the element is using them. At this moment, it is not possible to add, edit or remove class styles with the Class Tree inspector. Use visual controls for that.

Less crowded Tailwind CSS visual controls

Less commonly used controls are now grouped in sub-sections to make the Properties panel easier to navigate:

Visual controls for an H1 with the Text section showing size 5xl, color text-gray-800 and weight extralight, with a callout to open sub sections

Download Pinegrow 7.72

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 8fc62d5ce341aee21851eeb8eeb1ce0d3c829967

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 5688a76765d3108bc4e7ca56a99639efd2d5b446

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: 38ffd9a3e022a37b3b4112c6ceaebf0a7b65352c

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 165eb13033ff0f5eda6ec15a2beeba4632d159ff

Download Pinegrow 7.6

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: b050e43feb764e5e82a83e793a62f3715ea17797

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 0c11a80469c3ae389e8f2d51b387ea522abf8654

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: afeeefb3424e60f45a991a26811aedf45708e462

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 4196e62fbc56f91ca2f928d077a17c78467b05ab

Download Pinegrow 7.5

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cd4449006d315b5b9825cc2d6976758423a95c

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 8688b47acbae1523b030b0d1c7ec923b890c4f76

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: b322e67373644e9558ab1f3897971558f1869de9

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: abd452ceeb082c009474ae0a3fd047c97a26bfbf

Download Pinegrow 7.4

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cdbd7a24cce183268c7cd47fe0f94a941e9fba

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: b84a266ce222e27ce44ce27b9be91efda6753440

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: bfcba642254734bb77de59efa956cc5f9c98fe67

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: b69944aa1eca7bf5ad19b3c8b16a84939ee98615

Download Pinegrow 7.3

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 2f81fdad251123158639f335178d91023f2b9d57

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: a7e94474ea5e0b320d645eb25e77a4a5b5230afc

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: f7fb920a7a610943cffb3208d6fac250dfb30136

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 9d0a0b667977f743e5ab7ccd684358edd3133f8c