Pinegrow Web Editor Changelog

What's new in Pinegrow Web Editor 7.93.0

Mar 7, 2024

Pinegrow Web Editor 7.93 brings usability improvements to all users, and introduces a whole new way of working with WordPress.
Search and drill down into CSS variables:
Almost every property in the CSS Visual Editor has a helper tool that opens a dropdown menu that includes all available CSS variables. This is not new.
When there are many variables (as is the case with frameworks and WordPress) the long list gets hard to navigate. In addition, many variables have long names.
New Project screen cleanup:
Pinegrow is celebrating 10th birthday this year, and in this time the list of supported frameworks kept growing and growing. As a result, the list contains frameworks that are no longer in common use, such as Angular 1, Bootstrap 3 and 4…
These ancient frameworks are now hidden on the New Page / Project screen. Toggle them with the Show all frameworks link at the bottom of the list.
Internal web server shows default directory page:
Internal web server now serves index.html when request accesses a directory.
For example, navigating to …/products/ will serve …/products/index.html.
This is aligned with how web servers commonly rewrite URLs, and is useful for avoiding broken links while navigating the site in browser previews.
Note that links pointing to directories should have a trailing slash to ensure that any relative links are resolved correctly.
Explaining the double click on first use:
Pinegrow pros, this one is not for you. We noticed that most new users try double clicking on the page, thus activating a text editing mode.
A quick tooltip now comes up to explain what is going on. This only happens the first time the text editing is activated with double click.
Floating panels are working again:
The previous update broke floating panels, making them unmovable. The floating panels can now move again, but we had to add window frames to make that possible.
Use live WordPress data and preview during editing
You can now build WordPress themes, plugins and blocks while using real data and previews from your WordPress site.
The live preview brings two major benefits, letting you:
See your project as it will appear on the WordPress site and use site styling
Display real content during editing
Pinegrow uses WordPress REST API to access any of your WordPress sites and integrates the data into the edited document.
Components + WordPress actions:
Use Pinegrow’s static HTML components in combination with WordPress actions to create reusable dynamic elements.
Pinegrow includes powerful static HTML components that let you define reusable components with editable areas.
Auto slug and export folder in Project settings:
Are you fed up with coming up with slugs for your new theme or plugin? And then having to wrangle the file explorer to create the export folder?
Pinegrow now does both for you!
Slug is automatically generated from the project name. To create the export folder just select the wp-content/themes or wp-content/plugins and Pinegrow will offer to create the project subfolder for you.
Other WordPress improvements:
Block attributes that control a style property no longer add empty properties is their value is not set. This only works for native React blocks, not dynamic and hybrid blocks.
We rewrote the theme / plugin header parser to make it more robust and avoid errors with missing Theme name value.

New in Pinegrow Web Editor 7.92.0 (Feb 2, 2024)

New in Pinegrow Web Editor 7.9 (Dec 14, 2023)

New in Pinegrow Web Editor 7.8 (Nov 2, 2023)

New in Pinegrow Web Editor 7.7 (Sep 13, 2023)

New in Pinegrow Web Editor 7.6 (Jun 29, 2023)

New in Pinegrow Web Editor 7.5 (May 31, 2023)

New in Pinegrow Web Editor 7.4 (Apr 27, 2023)

New in Pinegrow Web Editor 7.1.1 (Jan 11, 2023)

New in Pinegrow Web Editor 7.0.5 (Dec 29, 2022)

New in Pinegrow Web Editor 7.0.4 (Dec 21, 2022)

New in Pinegrow Web Editor 7.0.1 (Dec 1, 2022)

New in Pinegrow Web Editor 6.8 (Aug 24, 2022)

New in Pinegrow Web Editor 6.7 (Jul 26, 2022)

New in Pinegrow Web Editor 6.6 (Jul 7, 2022)

New in Pinegrow Web Editor 6.5 (Mar 23, 2022)

New in Pinegrow Web Editor 6.4 (Feb 11, 2022)

New in Pinegrow Web Editor 6.3 (Jan 14, 2022)

New in Pinegrow Web Editor 6.21 (Nov 23, 2021)

New in Pinegrow Web Editor 6.1 (Jul 29, 2021)

New in Pinegrow Web Editor 6.0 (Jun 10, 2021)

New in Pinegrow Web Editor 5.992 (Mar 18, 2021)

New in Pinegrow Web Editor 5.991 (Jan 28, 2021)

New in Pinegrow Web Editor 5.99 (Dec 18, 2020)

New in Pinegrow Web Editor 5.98 (Nov 18, 2020)

New in Pinegrow Web Editor 5.973 (Aug 25, 2020)

New in Pinegrow Web Editor 5.972 (Aug 2, 2020)

New in Pinegrow Web Editor 5.971 (Jul 30, 2020)

New in Pinegrow Web Editor 5.97 (Jul 8, 2020)

New in Pinegrow Web Editor 5.96 (May 14, 2020)

New in Pinegrow Web Editor 5.95 (Apr 1, 2020)

New in Pinegrow Web Editor 5.94 (Feb 26, 2020)

New in Pinegrow Web Editor 5.93 (Feb 4, 2020)

New in Pinegrow Web Editor 5.92 (Jan 21, 2020)

Edit remote websites and web applications:
Use Open URL to open documents from local or remote web servers and seamlessly save any changes into a selected local folder/project.
When the URL is re-loaded local saved changes are injected back into the remote document so that you can continue the editing process.
This is useful for styling remote projects and for prototyping.
Learn more about editing remote projects
Work with dynamic HTML elements:
Dynamic elements are HTML elements created by Javascript code after the page loads. Until now it was not possible to select and edit such elements in Pinegrow.
Now you can select dynamic elements and style them in the Style panel.
Lean more about working with dynamic elements
Materialize 1.0.0:
Support for Materialize framework was updated to the stable release version 1.0.0.
Improved Google Fonts support
Google Fonts manager now:
Uses the correct font category sans-serif, serif, cursive and monospace with the font name.
Shows selected fonts and selected style in the font list.
Only displays the available selected font weight in the CSS Visual Editor.
To open the Google Fonts manager:
Select Page -> Manage Google Fonts, or
Select Manage Google Fonts in the Font Family property dropdown in the CSS Visual Editor.
Handling imported CSS stylesheets:
Pinegrow Web Editor now properly handles the situation where a CSS stylesheet is imported by multiple parent stylesheets.
WordPress Theme Builder improvements:
These features are also coming soon to Pinegrow Theme Converter.
Conditionally enqueue scripts and styles:
Scripts and styles can now be conditionally included to the page by adding IF Conditional statements to <script>, <link> and <style> elements.
Learn more about conditionally enqueueing resources
Use Customizer to show or hide an element:
The Customizer Field – Smart action got a new Edit option: “Show element” that creates a checkbox control for setting the visibility of the element.
Bug fixes:
Right-clicking on a unselected element on the page and doing Transform operations now targets the correct element.
Prevent adding elements outside of the <body> elements when dropping elements on the page view.

New in Pinegrow Web Editor 5.9 (Dec 10, 2019)

New in Pinegrow Web Editor 5.8 (Oct 29, 2019)

New in Pinegrow Web Editor 5.7 (Jul 31, 2019)

New in Pinegrow Web Editor 5.6 (Jun 26, 2019)

New in Pinegrow Web Editor 5.5 (Jun 20, 2019)

Drag & Drop:
Dragging elements over the page is now smoother, thanks to improved performance under the hood.
The Tree doesn’t jump up and down when dragging elements over the page. And the page doesn’t jump up and down when dragging elements over the tree.
Both page view and the tree still show the drop position, but they don’t scroll to it when it’s out of the view.
CSS improvements and fixes:
Fixed importing stylesheets from external urls.
Improved syncing with external editors for imported files.
CSS rules with same media queries are grouped together (if the new rule comes after or before the existing media query declaration it is added into it).
Gradient and shadow CSS editors.
Major update to WordPress Theme Builder:
The purpose of WordPress Theme Builder is to let us easily create WordPress themes with custom designs and flexible content model that is tailored to specific requirements of every individual project.
The present iteration of the WordPress builder achieves this goal.
Even smarter Smart Actions:
For this release we greatly improved the set of Smart WordPress actions that now support posts relationships, advanced loop structures, author fields and even fully-featured form handler.
The general principle of Smart actions is that they adjust the WordPress output to fit into your custom HTML structure and styling – not the other way around.
Smart actions are now divided in two groups: Post smart actions that are used to display posts and their properties, and Site smart actions that can be used anywhere on the page.
New smart actions are compatible with the old smart actions.
Check out the overview of the theme creation process for details. Every smart action now has a complete documentation, for example Show Posts action.
New Theme Settings:
Theme Settings now have a proper dialog box and also support defining custom image sizes. Use “WordPress -> Theme Settings” to open the settings.
Learn more about the new Theme Settings.
WordPress menu grew larger, with additions of Theme Settings, Page Settings, Update theme screenshot, clearing the theme folder and more.
Import WordPress content for the whole page
No more running Import WordPress content on individual elements. Now doing WordPress -> Import content from the site populates the whole page with content taken from the WordPress site.
Theme screenshot:
Take a photo of the selected page and use it as the theme screenshot.
Regenerate functions.php
Changed the theme slug? Want to use the latest functions.php preset? Just regenerate the file with WordPress -> Regenerate functions.php. Note that doing this will remove any manual edits you did to functions.php.
Control which files are exported:
Project panel shows what files and folders are copied to the theme and what HTML files are exported into template files.
Right-click on the file or folder to change its default export setting
Complete documentation:
We also have new – and complete – documentation on creating WordPress themes, including guides and examples for every smart action.
That’s also a good place to start if you’re not familiar with WordPress. Key WordPress concepts are introduced along the way.
To quickly get started with Theme Converter and improved Smart actions, check out the step-by-step tutorial on converting Proof Webflow template to a fully-featured WordPress theme.
Pinegrow Theme Converter:
WordPress Theme Builder now comes in two forms:
as part of Pinegrow Web Editor and
as standalone application, Pinegrow Theme Converter.
The difference is that Theme Converter doesn’t add WordPress actions directly into HTML sources and instead stores them in a special file. That makes it super convenient for using with other website builders.
Theme Converter lets you use your favorite website builder – like Webflow, Dreamweaver, Blocs, anything that outputs HTML – to create custom WordPress themes.
After setting up the theme conversion in Pinegrow Theme Converter, you continue to edit the project in your website builder.
Then, you just export the HTML again and re-run it through Pinegrow Theme Converter to generate the updated WordPress theme.
So, should you use Pinegrow Web Editor with WordPress builder, or the new Theme Converter?
In short, if you edit HTML and CSS in Pinegrow then using the built-in WordPress theme builder is the best approach.
If you use non-Pinegrow solutions for building websites, then Pinegrow Theme Converter is the right tool for you.
Application icon:
We have multiple applications now, so Pinegrow Web Editor got the new logo icon and the new application icon:

New in Pinegrow Web Editor 5.4 (Mar 27, 2019)

Redesigned element context menu:
We redesigned the element context menu that is accessible by right-clicking on elements on the page view or in the Tree panel:
Introducing sub-menus allowed us to better organize the menu and to add more commands.
For example, new elements can be added to the page directly from the menu.
Insert submenu contains all the elements and components from the Library panel:
The Insert menu also gives us control and preview of the placement of the new element:
Hint: Hold down the SHIFT key when right-clicking to jump straight into the Insert menu.
Commands that change the HTML structure of the element are tucked under the
Transform submenu:
Select submenu lets us quickly select parents and children of the current element:
Paste submenu lists the most recent items on the internal clipboard and provides control over placement of the HTML elements:
Copy & Paste actions:
Copy and paste actions from one element to another. Use the Copy submenu to copy all or one of the assigned actions:
Or, click on the Copy icon next to the assigned action in the Action and WordPress panel:
To copy all assigned actions on the element click on the Copy icon next to the element name:
Use Paste to add copied actions to another element.
SASS stylesheets compiler:
Pinegrow now correctly handles projects with complex SASS structures that contain multiple imported files with the same name, for example variables/_buttons, mixins/_buttons…
WordPress Theme Builder:
Add actions using the context menu
WordPress actions can now be added to the element using its context menu. Right-click on an element on the page or in the tree and choose an action from the
WordPress submenu:
And, as mentioned above, WordPress actions can also be copy pasted between elements.
Enhanced display of WordPress actions in the Tree panel
In the Tree panel view, actions are now displayed before the text snippet in order to make them more visible.
Actions like Customizer Field, Customizer Section and Post Field show their most important arguments right in the Tree display:
Outline all elements with WordPress actions
Use the new visual helper to outline all elements with WordPress actions:
Post & Loop:
Using the original id on the post element
The “Post & Loop” Smart action automatically sets the id attribute of the post element to the id value provided by WordPress. This can interfere with styling or Javascript code that targets that element by its id.
The action now offers the choice to opt-out of modifying the id attribute, in case the id attribute of the post element is set:
Note that having a fixed element id on the post element only makes sense if only one post item is shown. Otherwise there would be multiple elements with the same id.
Displaying a range of elements:
Sometimes we just want to display a subset of posts contained in the WordPress loop (or custom query). For example, we might want to display the first post in one way and the rest of posts in another way. Or, we might have predefined positions for individual posts and we can’t just display all of them with the same loop.
The new “Range of items to show” lets us specify which of the items returned by the loop query we want to display:
We can either specify a single post, for example 0 for the first one, or a range, for example 1-3 to display second, third and fourth posts.
Note: the post count starts at 0.
Note: this parameter doesn’t affect what posts are retrieved from the WordPress database – it is used to specify which of the posts returned by the WordPress query should be displayed.
The same argument is also available directly on “The Loop” action.
Menu – Smart:
The behavior of the action is changed. It now uses Smart menu walker by default on pages that don’t use Bootstrap (Bootstrap menus are used there). The Smart menu walker replicates the exact HTML layout of menu items, instead of using the default WordPress markup.
The action is also now smarter in figuring out which class is used to denote the active menu item.
As always with smart actions, if you need more control over these actions change them to regular WordPress actions.
Reusable Customizer Sections and Fields:
Customizer Sections (both Smart and regular actions) got the checkbox “Use section id as prefix for enclosed fields”. When checked, the id of the section is used as a prefix for all enclosed customizer fields.
This is very useful in many cases. Let’s take a look at an example.
Imagine that we have four sections for showcasing our past experience on our portfolio website. Each section contains fields for a company name, our job position and duration of the engagement. We want to use the Customizer to control the content of these values.
Normally, we would have to setup four unique fields for company names, four for position and four for the duration – each with unique field id. That makes it impossible to simply copy paste actions from one item to another, or to define these blocks as reusable components.
Now we can check “Use section id as prefix…” on the first section with id exp1 and assign simple ids – company, job, duration – to enclosed fields. When Pinegrow exports the theme it will append the session id “exp1_” to fields ids, thus creating unique fields ids “exp1_company”, “exp1_job” and “exp1_duration”.
If we copy paste these actions on related elements in other experience sections we’ll get fields experience2_company and so on, provided that “Use section id as prefix…” is checked on their Customizer section actions.
We can go a step further and create a reusable component in the Actions panel with editable attributes that control section id and name.
Then we make the other three items instances of this component:
Then we use the Properties panel to configure section id and name of Work Experience instances:
Using global customizer fields inside a section
When “Use section id as prefix…” is on the section id will be prepended to all field ids – regardless is fields are registered or just used.
If we want to simply use a value of customizer field from another section – for example, a color value defined in Colors section – we can use Display theme mod action and check its “Don’t use enclosing section id as field prefix” setting.

New in Pinegrow Web Editor 5.3 (Feb 27, 2019)

New in Pinegrow Web Editor 5.2 (Feb 7, 2019)

Color picker:
Picking a color from the screen:
We had to change how the picking a color from the screen works, so that the feature works with floating windows.
Until now, the screen picker was activated by clicking on the icon and then moving the cursor over the Pinegrow window and then clicking to confirm the selection.
Now, the icon is dragged over the Pinegrow window and releasing the mouse will confirm the selection.
Using the system color picker:
Clicking on the color button next to the Picker icon opens up the system color picker.
CSS Grid Editor input validation:
CSS Grid editor now checks the syntax of grid properties. It caches common error like missing “(“ and “)” characters, wrong units and so on.
Only valid values are stored into CSS rules.
Attribute editor:
The element Attribute editor now supports editing values that contain JSON code, for example … Pinegrow will automatically use the right quote for the attribute in HTML: ‘ if the value contains “ and “ for all other cases.
More resilient stylesheet loading:
A lot of templates and projects out there in the real world contain broken code. Browsers are designed to work around such errors instead of complaining about them.
Pinegrow is more sensitive by design, because the goal is to notice and fix errors during development.
Still, we often get support requests with issues that are caused by such errors. One recent case involved a template with a stylesheet that imported itself. Pinegrow now detects and survives such situations.
On a similar note, we also see a lot commercial templates that are loaded with 10s of Javascript plugins. That can easily lead to performance issues when editing such projects in Pinegrow.
One solution is to disable Javascript while editing in Pinegrow, but then you’re often stuck with poorly implemented loaders that rely on Javascript to be cleared from the screen.
That actually makes Pinegrow a good tool for checking how projects behave in various sub-optimal environments, for example in browsers without Javascript.
WordPress Theme Builder:
Apply Master page command takes the current page, opens its master page and applies any changes to areas outside of the Site content.
A while ago we added the “Apply master page to all open files” that does this for all open pages.
Still, on larger projects with multiple templates and potentially multiple master pages, doing that is cumbersome. The easiest way is to open all template files and then run “Apply master page to all open files”.
Now, we added two more options:
Apply master pages to the whole project will go through all template files in the project and apply their respective master pages to them.
Apply master page to related files will do the same but only for project files that use the current page as their master page.

New in Pinegrow Web Editor 5.1 (Jan 24, 2019)

Floating Panels and Multiple Screens:
Supporting multiple screens has been the top feature request for a while now.
That’s understandable.
Pinegrow’s UI – with multiple page views, code editor, component libraries, panels for properties, styling, CMS and more – takes up a lot of screen real estate.
Until now the whole UI had to be contained in a single window, so things quickly got crowded.
In Pinegrow 5.1 you can float panels – and groups of panels – in separate windows. Panels can be freely dragged between windows and rearranged within a window.
Easily upgrade Bootstrap:
Bootstrap starter pages, library components and properties have been updated to the latest versions, 4.2.1 and 3.4.0 respectively.
Pinegrow can also easily update your existing Bootstrap projects to the latest Bootstrap version (Bootstrap 3.x to the latest Bootstrap 3 and Bootstrap 4.x to the latest Bootstrap 4).
Read the complete guide on how to upgrade Bootstrap to the latest version.
Fixed Master Pages and WordPress Site actions on plain HTML projects:
Pinegrow had a bug that prevented using Master Page actions and WordPress Site actions correctly on projects that didn’t use Bootstrap or Foundation.
In those cases both actions didn’t remember their parameters.
WordPress Theme builder changes:
Post image – Smart action:
Until now, the action added the ( is_singular() || in_the_loop() ) when displaying a post image in the background of the element. This created problems with custom queries and non-singular templates.
Now, the action only checks for the presence of the current post ID, if post ID is not specified as a parameter of the action.
Another change is that this action doesn’t automatically add with-image class to the element with the background, as it did before.
Action parameters:
Some WordPress actions had checkbox parameters that were on by default. Unchecking them actually set the non-default, negative. action parameter value.
That made it difficult to spot such checkbox that were set off, and distinguish them from checkboxes that were simply off by default.
That’s why all such checked-by-default checkboxes are changed into select boxes with default value “Yes”. This makes the controls set to “No” very easy to notice.
Starter Theme 2 update:
Starter Theme 2 has been updated to Bootstrap 4.2.1 and optimizations have been applied to some HTML templates. Similarly, some WooCommerce templates have been updated to adapt to the latest versions of the plugin.
Save partials:
Save partial action (in Actions panel) can now correctly save content of script and style elements.
Attribute editor in the Properties panel:
Until now editing attributes that contained HTML tags, stripped the tags from the value.
To prevent this, the Attribute editor now skips such attributes and displays the notice that you can edit them with Element code.
Controlling visibility of CSS Grid buttons and resize points:
CSS Grid buttons can get in a way, especially when elements are small.
Network proxy settings:
It is now possible to let Pinegrow know to use a proxy server for accessing the network by specifying the configuration string in Settings

New in Pinegrow Web Editor 5.0 (Nov 20, 2018)

First, a quick look back. In the year since Pinegrow Web Editor 4 was released, we had 10 strong updates with features like Smart WordPress Actions and powerful Visual CSS Grid Editor.
A note about upgrades to Pinegrow 5: if your license is eligible for free updates (one year after the license purchase and renewal, or as long as subscription is active) you get all Pinegrow Web Editor updates for free, including Pinegrow 5.
With Pinegrow 5 we focus on improving the workflow of dealing with HTML layout and CSS styling. We even created a feature called “Focus on”.
So, let’s start with that.
Focus on…
“Focus on…” lets us isolate an element on the page and deal with just this element instead of the whole page. That’s very useful on complex HTML layouts.
“Focus on…” command is available in the top toolbar, on the element context menu or with the shortcut CMD+F (CTRL+F on Windows/Linux).
A couple of things happen when we Focus on an element:
The Tree panel displays the structure of the focused element, with all its children nodes collapsed (only the top most level is expanded):
Drag & drop on the page deals only with top level children of the element. For example, grabbing anything within the element will grab the top level child:
Similarly, dropping an element from the Library panel will place the element on the top level of the focused element.
That’s very handy for dealing with the top level structure of the focused element without worrying that we’ll drop something in the wrong place.
If we want more control over drag & drop placement, we can expand relevant nodes in the Tree panel and use it for dropping or rearranging elements:
The “Focus on” menu also contains a shortcut to focusing on the Page layout of the Body element:
The Focus bar also lists the elements that can be inserted into the focused element, if available:
To exit the “Focus on” mode click on the close icon in the Focus bar or select Clear from the Focus menu.
Improved CSS Styling
Starting from Pinegrow 3 it has been possible to style elements with inline styles (with HTML element style attribute).
The benefit of inline styles is that we can jump straight into styling an element, without thinking about classes, ids and CSS rules.
But eventually, all inline styles should be transferred into proper CSS rules. That’s hard to do if inline styles are scattered around the page.
Pinegrow 5 has a solution for that.
Working with inline styles
First, the Style panel now clearly indicates when inline styles are used:
Second, the Quick Create CSS Rule tool offers to transfer the inline styles into a newly created CSS rule:
And the Tree panel shows the style icon next to elements with inline styles. Clicking on the style icon in the Tree jumps straight into Style editor for that element:
The Tree panel filter can be used to only display elements with inline styles:
With these tools we have the best of both worlds: the freedom to directly style with inline styles and the systematic process for creating CSS rules for those styles.
And some might ask: Why not have a feature that would automatically save all inline styles on the page as CSS rules?
It would be easy for Pinegrow to go through the page and store all inline styles into CSS classes like .rule1, .rule2…
Although it sounds useful, such feature would lead to messy CSS code. Creating maintainable CSS structure requires strategic thinking about properly naming and organizing CSS rules. That’s not something that an app can do for you.
Creating clean and maintainable code is the top goal and quality of Pinegrow Web Editor. We don’t want to introduce any feature that would go against this.
Other styling improvements
There are more styling improvements worth mentioning:
Stylesheets and their CSS rules can be hidden in the Active Style panel by clicking on the Hide stylesheet icon next to the stylesheet name:
Before, the “Ignore in Active” function was only available from the Stylesheets menu.
Text indent control was added to the Text section of the CSS Visual Editor:
“Customize variable” command (for SASS and LESS files) will ask for the new value if the default value uses a custom function:
This avoids breaking SASS/LESS files with functions that are not yet defined in the section where custom variables are defined:
Pinegrow uses CSS Autoprefixer when compiling SASS and LESS files. Now you can control the Autoprefixer configuration in the Settings dialog. This feature is for advanced users, most users can just leave the autoprefixer settings as they are.
The Project panel
Note, the Project panel is a Pinegrow PRO feature.
Now, we can drag images, stylesheets and scripts from the Project panel to the page. Draggable files have a Drag icon displayed next to their names:
Dragging an image inserts the image to the selected place on the page or in the Tree
Dropping an image on an existing image on the page replaces that image:
Dragging a stylesheet (.css file) to the page appends the stylesheet to the page.
Doing that with a Javascript (.js) script file will insert the script to the footer of the page.
Image previews in the Project panel now also display the dimensions and size of images:
And using the search in the Project panel expands all folders with matched files.
The Tree panel
The Tree panel got a “Filter” function that lets us display only elements with inline styles, images, texts, links, components or WordPress actions:
The filter works alongside the existing search function that lets us search with strings and CSS selectors:
Other improvements
Use arrow keys to select elements
UP_KEY selects the parent element
DOWN_KEY selects the first child element
LEFT_KEY selects the previous element
RIGHT_KEY selects the next element
Use SHIFT_KEY with LEFT_KEY and RIGHT_KEY keys to select a range of elements.
Selecting a duplicated element
A duplicated element is now automatically selected, if the Duplicate command was run on a selected element.
Element dimensions in pixels are shown when an element is selected or hovered with the mouse pointer:
Clicking on a image in the Unsplash photo browser replaces the currently selected image:
Use “Clear code” icon in Insert code in the Library panel to clear the code from the editor:
Page and project thumbnails are now turned off by default on Linux because on Linux, generating thumbnails requires briefly showing a second window. You can turn them on in the Options menu on the Start screen:

New in Pinegrow Web Editor 4.911 (Sep 25, 2018)

New in Pinegrow Web Editor 4.91 (Aug 29, 2018)

New in Pinegrow Web Editor 4.9 (Jul 5, 2018)

New in Pinegrow Web Editor 4.8 (May 31, 2018)

New in Pinegrow Web Editor 4.71 (May 11, 2018)

New in Pinegrow Web Editor 4.7 (May 11, 2018)

New in Pinegrow Web Editor 4.6 (Apr 3, 2018)

New in Pinegrow Web Editor 4.5 (Mar 5, 2018)

New in Pinegrow Web Editor 4.4 (Feb 26, 2018)

New in Pinegrow Web Editor 4.3 (Jan 25, 2018)

New in Pinegrow Web Editor 4.2 (Jan 18, 2018)

New in Pinegrow Web Editor 4.1 (Dec 12, 2017)

New in Pinegrow Web Editor 4.0 (Nov 23, 2017)

New in Pinegrow Web Editor 3.1 (Sep 14, 2017)

New in Pinegrow Web Editor 3.07 (Aug 24, 2017)

New in Pinegrow Web Editor 3.06 (Aug 10, 2017)

New in Pinegrow Web Editor 3.05 (Jul 28, 2017)

New in Pinegrow Web Editor 3.04 (Jul 20, 2017)

New in Pinegrow Web Editor 3.02 (Jul 10, 2017)

New in Pinegrow Web Editor 3.01 (Jul 3, 2017)

New in Pinegrow Web Editor 3.0 (Jun 29, 2017)

Redesigned user interface:
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:
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.
Editable Tree view:
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:
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:
Just type a number and Pinegrow will repeat the next operation that many times. For example, type 10 and then click on Duplicate.
Seamless inline text editing:
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.
Multiple page views - instantly in sync:
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:
"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
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:
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.
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.
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.
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.
Undo / redo history:
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.

New in Pinegrow Web Editor 2.94 (Sep 26, 2016)

New in Pinegrow Web Editor 2.93 (Sep 26, 2016)

New in Pinegrow Web Editor 2.92 (Jul 27, 2016)

UI improvements:
Double clicking on an image will open image selection dialog.
When selecting an image located outside of the project folder, Pinegrow asks if you want to copy the file to the project.
Classes are shown in the tree. The first class is displayed, all can be seen by hovering the mouse over the it.
Background image property was added to Style section of the PROP panel.
ESC key exits the inline edit mode, no more mouse clicking the Done button.
More stable inline editing prevents DOM changes done with Javascript leaking into the source.
Setting for ignored subfolders, for example node_modules. This significantly speeds up working with projects.
Larger click area for assigning classes in the CSS panel.
Deleting an element will select the next element. Up to now, no element was selected after deletion.
When Javascript is disabled during editing, scripts show as normal scripts in the tree and head scripts don’t go into body anymore.
File -> Quit menu added.
Master pages & components:
Learn and experiment with master pages with a comprehensive master pages tutorial. We’ll keep adding more topics and examples.
Background image can be editable (inline style background-image property).
Listing which component types can be edited in the inner content of the editable area. All other elements will be locked. “Add instance” buttons will be shown in the PROP panel when the component or editable area is selected.
Components -> Quick update now runs in the interactive mode that will ask you what to do when updating a component or child page would cause some editable information to be lost. See 5-LostEditableArea in Master pages tutorial for an example.
When duplicating an element that is also a component definition, Pinegrow will offer the choice to duplicate the definition or to make the cloned element an instance of the component.
A warning notice before a component definition is deleted.
Child pages: added Page -> Restore master page optional areas to bring back optional editable areas that were deleted on the child page.

New in Pinegrow Web Editor 2.91 (Jul 21, 2016)

New in Pinegrow Web Editor 2.9 (May 27, 2016)

New in Pinegrow Web Editor 2.7 (Mar 5, 2016)

New in Pinegrow Web Editor 2.65 (Mar 5, 2016)

New in Pinegrow Web Editor 2.6 (Mar 5, 2016)

New in Pinegrow Web Editor 2.51 (Mar 5, 2016)

New in Pinegrow Web Editor 2.5 (Mar 5, 2016)

Foundation 6:
Pinegrow now lets you easily create and edit Foundation 6 projects, in addition to Foundation 5, Bootstrap, MaterializeCSS, AngularJS and general HTML. See how you can easily work with the full range of Foundation components
Components, Libraries and Master pages:
Pinegrow PRO has lots of powerful features that can make your web development work easier and quicker
Plus, components have new & improved features:
Choose if components are auto-updatable or not (check the tutorials for more)
Nested component definitions are supported now
WordPress theme builder:
Pinegrow provides a very efficient way to build professional WordPress themes and we’re continuing to improve the process.
Define multiple master pages with custom headers and footers:
With Pinegrow 2.5 you can now have more than one header and footer template in your WordPress theme.
Set Define master page action to the top level of your HTML template and you will be able to customize everything that is on top and below the Site content element.
This action overrides the Use master page setting on the WordPress site action.
If the page is not index.html, page name is used as a slug for the header and footer.
Apply master pages to all open files:
A real time saver! You can now apply the master page settings to all the open files in Pinegrow editor.
It is very convenient if you proceed to some modifications to your master page HEADER and FOOTER and need to spread the modifications to all the other templates of the project.
Enclose multiple elements in conditional statements:
By using the new action Add to previous if, you now can include any element into the if statement of the previous element.
The action can also be added to a string of subsequent elements to include all of them into a single if block statement.
Create template parts with content of the element:
In Define template part action, It is now possible to set a template part on a container (DIV for example) but using only its content.
Organize theme files in subfolders:
You can now create subdirectories in your theme folder and organize your templates files according to your needs.
The subfolders and their contents will be exported in your WordPress theme just like the other files located at the root of your project.
UI tool for Google fonts:
Easily browse and add Google Fonts to your projects – right within Pinegrow. Support for Google Fonts is a part of evolving Asset manager and is currently in Beta.
To manage Google Fonts open Page -> Manage assets. From there you can search and add new fonts, select styles and charsets and get the font family name for use in CSS rules.
UI tweaks:
Selecting an element inside a collapsed section will now select that element and open the collapsed section in the tree. Once the element is de-selected the section will close again. Before 2.5, clicking on any element within the collapsed section selected the whole section.
Page tabs have unsaved changes indicator. Finally!
Bug fixes:
Among them, the issue with opening pages that contain other HTML documents in iframes and bugs with restoring window position and size.

New in Pinegrow Web Editor 1.22 (Oct 3, 2014)

Edit pages with dynamic JavaScript elements:
When the HTML file was saved In previous PG releases all dynamic modifications were saved alongside the HTML code. In best case scenario this just added clutter to the source and in worst it broke the page. Pinegrow now has its own source parser and source manipulation engine that knows how to distinguish source HTML from the current dynamic DOM structure that is rendered by the browser
Use code & visual editing at the same time:
Library, Properties, CSS panels and the layout tree remain visible when you go into the Edit code mode. Any page changes that you do with GUI controls (adding new elements to the page, changing element properties, changing layout in the tree, etc.) are immediately visible in the code view. Vice versa, any changes done in the code editor are immediately visible on the page and in the tree.
Selecting an element on the page will highlight it in the code view. And righ-clicking on the element in the code will select it on the page.
Play around with pages opened directly from the internet:
PG had this feature before but it was limited by the browser's security model. Now, external pages are loaded through a built-in proxy, so that you can use Show Active CSS option on all stylesheets or attach local stylesheet to a remote page. This is perfect for trying out template previews. Just Open them from url and start changing content, layout and styles.
Preview changes without saving:
Just press Page -& Preview in Browser (CMD + B) and the current version of the page will be opened in your default browser (click on the link icon in the Page menu to get the url). No need to save changes first. In the future, we might even add an auto-refresh feature.
Control sliders:
Pinegrow will recognise Bootstrap carousel and Revolution sliders and add Pause slider, Resume slider, Next slide, Prev slide, Insert slide commands to the element Actions menu. It also auto-scrolls to the selected slide when you select it in the tree. For Revolution slider, it's PG plugin must be activated on the page for that (Page -> Manage frameworks). This is a kind of proof of concept. We'll add support for more plugins in the future.
Edit code supports Find and Replace:
find = Ctrl-F (PC), Cmd-F (Mac)
findNext = Ctrl-G (PC), Cmd-G (Mac)
findPrev = Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
replace = Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
replaceAll = Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
CSS panel and tree are now about 10x faster:
Also CSS panel scrolls so that the stylesheet list, search bar and Add rule links are always visible.
Refresh page CMD+R:
Up to PG 1.21 CMD+R reloaded the page from disk. Now it uses special magic to reload the working state of the page (including unsaved changes). This is useful when editing pages with JS plugins that can get messed up during editing. Just do a refresh if that happens.
Undo & Redo will auto refresh the page:
This makes undo and redo operation a bit slower, but is necessary to restore page properly if it is using JS plugins.
A couple of small things:
Zoom in Window menu
Option to auto add .html extension when saving
Vertical align and list style added to CSS props
Better readability, no more small-caps in tree and CSS panel

New in Pinegrow Web Editor 1.2 Beta (Sep 8, 2014)

Features:
Working with HTML pages that use JavaScript code and plugins
Better Edit code - Visual page synchronization
Support for Revolution Slider and Bootstrap Carousel
Bug fixes
At the first glance Pinegrow 1.2 looks very similar to previous releases. But it has a very important change under the hood. Till now Pinegrow relied on embedded Chromium browser to parse and manipulate HTML source making it impossible to distinguish between the original source HTML that was loaded from the file and the current DOM that was potentially modified by JavaScript code after the page was loaded in browser.
The unpleasant side-effect of that was that when the HTML file was saved all dynamic modifications were saved alongside the HTML code. In best case scenario this just added clutter to the source and in worst it broke the page completely.
For example, Google Analytics code snippet dynamically creates a script tag to load it's JavaScript code. Each time such page was loaded and saved in Pinegrow one redundant script tag was added to the HTML code. Another example is modernizr script that adds a bunch of classes to the html element. When such page was saved all these classes got saved as well.
Starting with Pinegrow 1.2 we do things differently. Pinegrow now has its own source parser and source manipulation engine that knows how to distinguish source HTML from the current dynamic DOM structure that is rendered by the browser.
For pure static HTML pages that use no JavaScript code or plugins everything works just as before.
Most modern sites and templates use some kind of JavaScript though: Google Analytics, carousels and sliders, Ajax... Pinegrow now lets you work on such files without worrying that saving the changes will break the code.
Pinegrow will not let you modify DOM elements that were dynamically added by JavaScript code. The logic behind that is that if you want to change such dynamic elements you need to do that by changing the JavaScript code that created these elements.
For this to work Pinegrow needs to load local files through an internal web server that is running on port 40000 by default (changeable in Support -> Settings).
This lays a solid foundation for building new features and modules on top of Pinegrow. That includes working with scripting languages like PHP (up-coming developer edition), adding support for other frameworks and UI controls for popular JavaScript plugins (a proof-of-concept support for Revolution slider and Bootstrap Carousel is included in this Beta).
We switched to CodeMirror for the internal code editor (before we used Ace editor). Synchronization between edit code view and the page is also faster and more precise (when you click on a element on the page, its code will be selected in the editor).
Revolution slider Pinegrow plugin will recognise sliders with .rev_slider class and add Pause slider, Resume slider, Next slide, Prev slide, Insert slide commands to the element Actions menu. It also auto-scrolls to the selected slide when you select it in the tree. Revolution slider PG plugin must be activated on the page for that (Page -> Manage frameworks). Note, that this will not add Revolution slider JavaScript code to your page. You have to do that manually.
Bootstrap Carousel support works in the same way and is included in Bootstrap plugin.

New in Pinegrow Web Editor 1.15 (Jun 23, 2014)

New in Pinegrow Web Editor 1.14 (Jun 17, 2014)

New in Pinegrow Web Editor 1.13 (Jun 11, 2014)

New in Pinegrow Web Editor 1.12 (Jun 5, 2014)

New in Pinegrow Web Editor 1.11 (May 30, 2014)

New in Pinegrow Web Editor 1.108 (Apr 26, 2014)

New in Pinegrow Web Editor 1.107 (Apr 24, 2014)

New ways of adding elements to the page:
When complex elements like forms, nav bars, dropdowns and jumbotrons are selected, blue buttons for inserting their children elements are shown at the top of the LIB panel. Just click on any of them to quickly insert a children element into the selected element. Use right click to decide between inserting the element at the beginning or at the end of the parent.
All other LIB buttons also got a right click menu that lets you choose the position of the newly added element in relation to the currently selected element.
Improved CSS workflow:
Add class link was added to the class list in Style section of PROP panel. Click on it and type in the name of the class you want to assign to the selected element. As before classes can also be assigned from the CSS panel.
Adding new or existing stylesheets to a page is now easier than before.
Pinegrow will not save stylesheets with syntax errors. You'll get a warning message when trying to save such stylesheets. In the past that could cause that the stylesheet content was lost when saved.
Bootstrap improvements:
Bootstrap for starter pages was updated to 3.1.1.
Dropdown menu element got an option to insert a menu item through Actions menu and blue buttons in LIB. Use menu item properties to choose the type of the menu item (link, header or divider).
Navigation bar Collapsible checkbox is now working as it should - alternating between making the selected navbar collapsible or not.
Bootstrap 2.3.1 was added to Pinegrow frameworks. This is a backport of Bootstrap 3.1 Pinegrow plugin and it is provided as a convenience for those who still work with Bootstrap 2.3. Basic things like grids should work ok.
Other changes:
Plain HTML starter page was added in File -> New page selection.
Project related menu items were removed from File menu. They were causing confusion because they worked in an unconventional way. Remember project stored the content of the currently opened pages in browser storage and Load project loaded it back. That is useful for the Pinegrow web playground where we still have these features. Let me know if you truly miss them in the app. In the future Pinegrow will get proper projects.

New in Pinegrow Web Editor 1.106 (Apr 14, 2014)

New in Pinegrow Web Editor 1.102 (Mar 28, 2014)

Foundation 5:
Create and edit web pages with full range of Foundation 5 components. Drag them to the page or to the tree and control their behaviour with properties. Components that use Javascript are also supported. Page -> Refresh or Page -> Reload are usually required to activate changes related to Javascript.
SASS export:
Whenever you save a stylesheet with variables and expressions, Pinegrow will save a .scss version along .less and .css files. Internally, Pinegrow still relies on LESS format for variables, functions and expressions. That means that you write variables with @ instead of $. Pinegrow converts LESS to SASS when you save the file, giving you a easy start for customising SASS files outside of Pinegrow. Note that at the moment, Pinegrow doesn't know how to read .scss files - it only exports them.
Bootstrap Javascript components:
Modals, tabs with panes, carousels, accordions, tooltips, alerts and popovers can now be easily edited through drag & drop and properties. Page -> Refresh or Page -> Reload are usually required to activate changes related to Javascript.
Choosing the framework:
If Bootstrap or Foundation are not properly auto-detected when you open a page use Page -> Manage frameworks to manually select which framework to use. HTML5 framework should be always enabled.
Formated HTML output:
Due to an embarrassing bug in 1.09 release generated HTML code was sometimes not properly formatted - everything was in a single long line. This is fixed now and HTML output is properly beautified.
Save files in trial version:
Trial version is fully-featured now and you can open and save your files directly. It is still only 3 days. We know that it is not much and we are considering extending it. We hope you understand that we have to take care of our conversion rate because that's what fuels Pinegrow development. Btw. if your trial already expired you'll get an extra day to try new things out.
Shift + Click:
Shift + Click is a shortcut to test clicks. It is very useful when you need to open a dropdown button or switch slides in carousel. Instead of checking Test clicks in top bar, clicking and then unchecking it again, just predd SHIFT when you want to test a click.