Summary

Background

Commercial web design packages tend to target the space between the powerful – but technical – raw code editors, and the quick – but limited – web based template stuffers (such as Squarespace, Wix etc). 

Visual design software presents a rendered page – either starting blank or using readily available templates – allowing the designer to build the final result by dragging HTML components from a palette onto their desired position on the page.

Adjustments to component properties are done through panels, allowing a solid level of customisation and creativity. Once the final design is achieved, the software generates the resulting code and either exports it to file, or publishes it directly to a host.

Pinegrow, the company

Pinegrow Pro is the titular web design programme from Singapore-based company, Pinegrow Pte Ltd.

My dealings with the company have left me with a rather enigmatic impression of the people behind the product: The rapid response from their support team and the devotion of the forum members suggests a small startup with a niche product. An underdog trying to compete with established players.

Forum members get to suggest new features and engage with management. It feels like every new customer is celebrated and genuinely valued.

Yet the software itself reflects development effort normally only available at well staffed organisations, with decades of effort.

Pinegrow Pro

Not a late entry into the crowded field of web design offerings, Pinegrow is currently up to v8.5, having had a major release roughly every 18 months since launching in early 2014.

What differentiates Pinegrow from nearly every other web design package is its hybrid approach to coding. Rather than offering a compromise between power and ease, Pinegrow attempts to cover the full spectrum, working like a visual editor, but manipulating – and exposing – the underlying code directly.

This approach has two big advantages:

1. It exposes the full power of code editors, allowing the use of new features before the design software has been updated to understand them. This simply isn't possible with visual only editors.
2. Potentially more importantly, there is no proprietary file format. The software can open and update existing websites or third party templates. The code is also svelte compared to the bulky output generated by most visual editors.

User interface

Let's start by addressing the elephant in the room – the user interface.

Opening a project greets the user with a dizzying layout of panels and buttons. It's not hard to understand why it's been described as "cluttered and overwhelming" in one review.

Having said that, Pinegrow does allow the user to choose the level of clutter. Each aspect of design is logically organised within its own panel (e.g. properties, formatting,  DOM etc). Panels can be collapsed, hidden, floated, grouped and rearranged to create the optimal configuration. Different configurations (workspaces) can be saved and easily switched between. Panels can even be moved to a second screen.

Furthermore, the countless optional modules (frameworks, animations, WordPress, blocks etc) can be enabled or disabled for a page as needed, removing unused features.

I can't think of any alternate approach that doesn't limit the designer (the Achilles heel of virtually every other package).

What does make things harder is (I suspect) Pinegrow's use of a cross-platform development framework. It adds a layer of abstraction between the programme and the operating system. This breaks the synergy which comes from conforming to a platform's "human interface guidelines".

As a result, the interface feels flat and limited. Dialogue boxes and alerts look like they're from the 1990s web. The muscle memory of dragging a file from the desktop into Pinegrow's project structure doesn't provide the expected outcome. For some reason, application settings are found under the support menu.

The option to create a new page (HTML file) is under the File menu, but adding a new CSS file is best done through the Styles panel. JavaScript or other files? For that, either right click on the destination folder (in the Project tab) or click on the project title and choose "Create new file…". If done the latter way, the file is put at the root level. Despite searching, I've found no way of moving it to the desired location without switching to the OS to move it, then clicking the project title again and reloading the project.

Compounding the issue are icons which do different things in different places.

For instance, a triangular arrow sometimes expands sections, while in other places it opens a menu. Elsewhere, menus and settings are activated with an icon of a hammer and spanner.

If learning a new application is driving around an unfamiliar (and busy) city, Pinegrow's UI is doing it while driving on the other side of the road in a car with the windscreen wipers where the indicator used to be.

And yet, after a bit of effort and time (and a few accidents), you'll find yourself driving like a local.

Productivity

Ignoring the annoyances mentioned above, productivity is where Pinegrow shines. There are so many nice touches which enhance the design process.

Pinegrow comes with a plethora of documentation and videos demonstrating the features, so here we will only concentrate on the highlights.

One valued feature is the ability to display (side-by-side) the rendered page at various sizes (as shown in the screenshot above). Any editing of one view highlights and reacts in the other views. This is a dramatic time saver compared to dragging layout edges back and forth after each adjustment.

The whole ethos of the programme seems to be flexibility. Styles can be created through inspectors related to each aspect, typing them in the panel (with code-sense) or directly in the code editor. They can either be assigned directly to an external CSS file, or applied inline. When ready, inline styles can effortlessly be transferred to a chosen CSS file – along with prompted selectors.

Helpfully, selecting an element jumps to the related bit of code (when the code editor is open) and code changes are immediately updated on the rendered page. It is a great way of experimenting as well as learning the interactions of HTML.

On the topic of styles, other appreciated touches include a popup to change size units with the existing size value converting automatically to the newly chosen one, as well as being able to "drag" the value up or down while the rendered page updates.

Selecting an element shows applied styles, with an option to show inheritance. A CSS tree panel can be opened to better absorb the whole CSS file.

It's also possible to select a dynamically generated element (not existing in source code) for CSS styling.

As could be expected, building a page involves various methods to assemble components from a library, either to the rendered page or the source "tree" view. Constant feedback indicates the receiving location.

There are several other ways to insert elements before / after / within the currently selected element.

A neat trick is typing a number before performing an action, and having the action repeated the specified number of times.

The library itself adapts based on which frameworks (of about two dozen – including Bootstrap, Tailwind, Foundation, Font Awesome, Materialize…) have been activated.

Included is an image library, which consolidates all images found in the project folder; plus a direct connection to Unsplash.

The tree panel has a filter option to help find particular items. Separately, find and replace does a whole lot more than expected.

Naturally, Pinegrow includes the ability to create smart components, templates, design themes (with the ability to choose colours from a selected image, plus a "surprise me" button) and partials.

Other features worth mention include the ability to open – and edit – a remote site, with changes saved locally. Additionally, an existing project can be loaded as a library in another, allowing components to be reused easily.

While virtually all user software has some bugs, unfortunately Pinegrow does have more than what should be considered acceptable.

Notable Features

Mr Pine Cone

Pinegrow includes a feature called Mr Pine Cone, which integrates with several third party "AI" providers to help speed things up.

An existing account with a chosen provider is required. However once your key is entered, Mr Cone amazes with his abilities. While watching the demonstration videos I was stunned by the complex tasks which can be performed by detailed requests (included dictated ones) and adjusted with following instructions. Complex redesigns which would take 10-20 minutes could be done in seconds.

Interactions

Interactions is an add-on to Pinegrow (included in the subscription, but not the one-off purchase), licenced from GSAP. It allows complex JavaScript interactivity on a page with very little effort. You can use one of the many common (and included) animations, modify them, or create your own.

(Word of warning: just because you can do something, doesn't mean you should!)

Extensibility

With Pinegrow being an HTML editor (as opposed to generator) its comparitive shortcomings in specialist areas (such as spell checking) can be augmented by external applications. This allows dedicated tools to accept the tasks Pinegrow lacks.

This doesn't need to be a back-and-forth workflow either. Two common (and free) text editors (Visual Studio Code, and Atom) connect directly to Pinegrow, allowing simultaneous editing of code while watching Pinegrow reflect the changes as they happen. Furthermore, selecting an element in Pinegrow's visual editor jumps to the code in the external editor.

While that level of interactivity is reserved for the two mentioned editors, other editors can be used with Pinegrow refreshing its display whenever the external editor saves.

Additionally, enterprising developers have access to Pinegrow's API in order to write their own add-ons to customise things further, or integrate into automatic workflows.

Optional extras

Pinegrow on its own has the power to create sophisticated websites. In fact, while trialling the software, I took a commercially available template and used my existing code editor to customise it to create a home page.

Pushing that to the side, I recreated the page from scratch – no templates, frameworks or anything. Just plain, unadulterated HTML5. It was easier and faster doing that than customising the template and trying to figure out how it functioned.

Optionally available (at extra cost) are modules for visually editing Tailwind, creating WordPress themes, or incorporating WooCommerce functionality.

DreamWeaver comparison

Once past the UI fright, Pinegrow impressed me. But my experience was with code editors and some consumer grade visual editors. I wanted to know how Pinegrow stacked up against the default of professional web design – Adobe's subscription only DreamWeaver. It is also the only other editor I've encountered which can do both visual and code editing.

Not being able to justify the NZ$535 Adobe demands each year, I decided the best test was to use Pinegrow to follow the DreamWeaver tutorials and see how they compared. Note that comparisons might be inaccurate due to many of Adobe's tutorials being years old.

My expectations were tempered, given DreamWeaver costs 80% more on subscription (and no perpetual licence available). Nevertheless, what I found surprised me.

In the tutorials, DreamWeaver was effectively being used as a code editor, with very little benefit coming from the visual interface other than placing the cursor at the spot to insert the next component.

Reflecting this, DreamWeaver's code editor was more capable (activating Emmet in Pinegrow reduced the difference). The pop-up visuals of image tags and quick help on HTML code was great.

Pinegrow's ability to "out-source" the code editing effectively neutralised the difference though.

DreamWeaver does offer functionality which Pinegrow lacks, such as Git integration; dynamic pages with database connections; integration with Adobe libraries; and a built in ability to publish directly to third party hosts. (Currently, Pinegrow only allows publishing directly to Netlify).

Additionally, DreamWeaver edits XML and other languages.

Places Pinegrow could improve

• While the non-native UI detracted greatly from the pleasure of using the app, there's little hope of it ever changing.
• While CSS grid editing in Pinegrow is impressive, table editing is weak without any visual editor included.
• A few recent CSS attributes aren't yet implemented (such as text-justify: balanced or container-type). It's not surprising given the pace of CSS change. Even without Pinegrow offering the options as a choice, it does allow custom code to be typed in such cases.
• Troubleshooting could be improved by having an element inspector (as in Webkit) showing all properties on an element.
• Even better would be a visual representation on the layout where margins or border corners could be dragged to resize.
• I would think Git integration and publishing to a specified host shouldn't be too difficult to implement.

Final word

For coding geeks on a budget, one of the many freely available code editors with accompanying live view would be the way to go.

If you are have no interest in web design, but need a basic page for yourself or a small business, use one of the online editors such as Wix etc.

For designers who wish to create their own layouts, without needing advanced features, there are countless visual editors which offer great value and ease of use.

Otherwise – assuming you aren't already paying the $1350pa for an Adobe bundle which includes DreamWeaver – if you design professionally for clients or wish to speed up manual coding and don't need the few additional things DreamWeaver does offer, Pinegrow might be what you've been looking for.

It does have its idiosyncracies, but they aren't a dealbreaker.

You may find it a more productive option than anything else, at a substantially lower cost than the closest alternatives.