Pinegrow Web Editor 8.1, October 24, 2024

Download Pinegrow 8.1

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

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

Pinegrow for Mac (Apple Silicon) Antivírus checkedMac: 19c51f1f073b1f53723ed390a33ac9ccbaf52733

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

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

Pinegrow WordPress Plugin 1.0.20

Pinegrow WordPress Plugin (Zip)

Find and replace

The new Find & Replace tool lets you search elements across the selected elements, page or whole project. To open it, select it from the Edit menu, from the toolbar or with CMD/CTRL+F shortcut.

CMD/CTRL+F was previously assigned to “Focus on selected element” command. The shortcut for that is now SHIFT+CMD/CTRL+F.

Pinegrow Edit menu open with Find and Replace highlighted, beside a black and white surfer photo and a callout for the search icon.

Search elements by tags, classes, attributes, text and selectors. If multiple criteria is set, the element must match all criteria.

Then, you can add one or more actions on matched elements.

Available actions include adding and replacing classes, replacing text and transforming elements with AI Assistant.

Pinegrow Find Elements dialog set to the h1 tag, with the Add action menu open showing Replace text and Transform with AI Assistant.

Then, run the actions on matched elements. Click on any matched element to select it in the page view.

Pinegrow Find Elements dialog with a Replace text action changing Wave to Bob, and a Run on matched elements button.

Filter projects

Use project filter to filter projects on the dashboard.

Pinegrow start dashboard with the project search box set to pine, showing the PinegrowWeb, PinekitBlocks and PinegrowDocs4News projects.

Use o1 models with AI Assistant

The latest OpenAI o1 models can now be used with AI Assistant. Note that at the moment, vision, streaming and function calling is not supported for o1.

Pinegrow AI Assistant Models section with Quick model OpenAI o1-mini and Smart model OpenAI o1-preview.

The rest of new features are connected with Tailwind Visual Editor:

Customized controls with external Tailwind CSS build

Pinegrow can now use your custom Tailwind colors, fonts, spacings and other utilities in visual controls and Class tree inspector - even if you are using external Tailwind CSS build process. Until now, this was only possible for projects that use Pinegrow’s internal Tailwind compiler.

This feature works with npm based build process. It is not available with standalone Tailwind executable.

To get started, just point Pinegrow to your Tailwind config file and the source stylesheet:

For projects that use Design Panel, do that in Tailwind CSS Options in Design Panel:

Pinegrow Design Panel Tailwind CSS Options section with a Compiler and custom config button and a callout explaining built-in and external compilers.

Select external compiler and select config and source CSS files:

Tailwind CSS Options dialog with Compiler set to External build process, and config file and source CSS file paths filled in.

For projects that do not use Design Panel, use “External build settings” in settings menu of the Properties panel:

Pinegrow element class menu with External build settings checked under Tailwind CSS, above the Shadow and Filter style controls.

Next, follow the instructions to install Pinegrow Tailwind npm module. This module is only required during development and is not deployed in production.

Visual controls will be automatically updated when the project is opened and every time these two files are modified through Pinegrow.

You can manually update the controls at any time by running Customize visual controls from the menu in the Properties panel.

Pinegrow element class menu with Customize visual controls highlighted under Tailwind CSS, with a callout about the Tailwind configuration.

Class Tree Inspector improvements

Class Tree Inspector is very helpful for managing complex Tailwind styling.

Color swatches are now displayed next to all color values.

Class Tree Inspector listing bg-gray-800 and text-gray-400 classes with color swatches, plus a dark: variant bg-red-700 with a red swatch

Colors are selected with the color picker and not through nested menu.

Color palette opened from a class swatch in the Class Tree, showing Tailwind shades from white to black across all hues

Numerical and color custom values can be adjusted inline. Simply click on a color swatch to change the color.

Custom color picker in the Class Tree set to #fc7b09 for a from-[ ] gradient class, with Choose and Cancel buttons

For numerical values, press down the mouse key over the value and then scrub the value by moving the mouse up and down, while keeping the button pressed.

Class Tree with the from-[58%] value being scrubbed with the mouse, and a callout reading Scrub numeric values

Class combinations

Certain utilities can be combined with / in a single class. For example, text size / line height (text-2x/normal) and color / opacity (text-red-100/50).

To edit such combinations, click on the class and then select the secondary value from the Line height or Opacity submenu.

For text size and line height:

Class menu for text-8xl with the font size list shown, 8xl checked, and the Line height submenu open with 5 highlighted

For colors and opacity:

Color and Opacity submenus open from a class menu, with the opacity list from 0 to 95 and 60 highlighted

Variants in Add class dialog

Add class dialog now shows a separate field for variants. This makes it easy to add multiple classes for the selected variant.

Add Classes dialog for p.font-semibold with the search set to dark: and text-red-100 selected, showing Assigned and Recent class lists

Custom configurations helpers in Design panel

Compiler options let you define custom Tailwind configuration settings.

Use Add config settings… button to add declarations for dark mode, screen sizes and other settings.

Tailwind CSS Options dialog with the Add config settings menu open, showing Extend submenu items such as Screen sizes, Spacing and Border radius

Flowbite Tailwind CSS components

Use a large collection of Flowbite Tailwind CSS components directly from the Insert panel.

First, activate Flowbite in File › Manage libraries and plugins:

Libraries and Plugins Manager for index.html with Tailwind CSS marked active and the Flowbite Activate link under the cursor

Then, open Flowbite components page library in the Insert / Library panel:

Insert Element panel with the Tailwind CSS Blocks menu open, listing Flowbite Components as the highlighted option

Use the menu to navigate sections and drag components to the page:

Insert Element panel showing the Flowbite site in a preview with a Default alert and a tip to zoom out to reveal the side menu

Flowbite Blocks are also available in the desktop Pinegrow Web Editor.