How Does Pinegrow Compare to Webflow for Web Designing Without Code?
There are a number of products on the market to allow users to put together a static webpage with little or no coding. On the surface, the Pinegrow Web Editor and Webflow are very similar products that let you accomplish this task. They both allow users to easily assemble web pages visually, using a variety of elements that can be positioned and styled on the page with visual controls and without writing a single line of code. Pinegrow does this in the form of a stand-alone web app that does not require the internet, while the Webflow builder is completely on-line.
While they have a number of similar features, philosophically, these two apps approach web design a little differently and deliver slightly different end products.
When you start comparing the features of Pinegrow versus Webflow, you’ll find that they overlap to a great degree, but while Webflow is presented as a no-code solution, Pinegrow is closer to a low-code solution. Both offer a non-opinionated way to visually build websites, but Pinegrow makes it easier for you to color outside of the predefined lines. With Pinegrow you can touch the code directly as a core feature, while Webflow only allows for code export without much, if any, ability to directly modify it once this has been done.
Another large distinction is the approach each app has to integrating existing web standards. Pinegrow provides predefined UI components for a number of well-established frameworks, like Bootstrap, Foundation and Tailwind. These standards have proven their merits outside of the world of Pinegrow and open up the possibility of using a vast number of design resources that exist on the internet. In contrast, Webflow has their own pre-designed components. Duplicating outside content requires more hands-on work due to the closed nature of the app.
For Pinegrow, the user is not restricted to just the baked-in components. Along these same lines, Pinegrow allows you to directly open existing HTML and PHP pages for editing. This means that you can open and edit old projects with ease.
Both Pinegrow and Webflow have their own integrated content management system. The Webflow system is arguably more full-featured, approaching the utility of WordPress, but does require that you subscribe to their hosting and use their database system. Pinegrow on the other hand has approached this feature a little differently.
The CMS functions as expected, allowing set-up of templates with editable areas for recurring content. However, these pages are output as static code, and thus can be hosted on any site you choose, even free solutions like GitHub pages. Additionally, Pinegrow allows for integration with WordPress, including the creation of custom themes and advanced custom fields. While this does require some code manipulation, there are built-in actions that handle much of the heavy code writing for you.
Again this allows the user to take advantage of the extensive documentation, as well as tutorials, on the internet and the large library of WordPress plugins, all while not being dependent on a proprietary database or specific hosting.
Visually building complex, multi-step interactions is easy in both apps. While the interfaces are comparable, once again the difference is the approach. Pinegrow employs a custom interface to the GreenSock GSAP library, while Webflow has its own library. Many features are the same, however Pinegrow allows you to manipulate those animations through an API, not just visually if you choose. Once again this provides users with tools to color outside the lines.
Each app is great for designers to turn their visions into beautiful pages. One “feature” of Pinegrow that simply doesn’t exist in Webflow is the ability to learn how to produce clean, semantic code by observing how the design is output.
Like Webflow, Pinegrow has an easy to interpret DOM tree, but also has easy editors for observing and altering the HTML of an element on the page.
Pinegrow also makes it easy to directly alter your stylesheets, like rearranging rules, without leaving the program. While coding isn’t necessary, Pinegrow can act as a way to begin to understand both HTML and CSS and take your designs further.
Another unique feature to Pinegrow is extensibility. Web design agencies often have their own workflow. With Webflow, that workflow has to be changed to mesh with the Webflow interface. Pinegrow can easily be extended with custom controls and actions that can be adapted for any workflow.
While not a feature, we should also compare the pricing of Pinegrow versus Webflow. A yearly subscription to Pinegrow costs $99 (USD) plus an additional $50 each for the WordPress Theme Builder and Tailwind Visual Editor add-ons. They also offer monthly and one-time subscription plans.
These subscriptions allow for the construction of an unlimited number of sites, but do not include hosting.
Webflow has two different types of plans. Their “Accounts” come without hosting. While they have a free plan that allows you to design pages, you need to purchase hosting from them to make the page live, and cannot export code. The next step up is the “Lite” account with a yearly fee of $192 (USD). This level allows you to have 10 exportable projects, meaning that you can export the project when finished to host on another server, but this means losing any CMS functionality. Like Pinegrow, they also have a monthly plan.
Overall, Pinegrow acts as a visual builder that leverages established web standards and integrates visual design with the ability to manage page code for quickly and easily constructing a website. Webflow, in contrast, acts as a one-stop shop for visual page building and hosting within a closed ecosystem, in many ways comparable to either Wix or Squarespace. This can greatly simplify the web development pipeline, but does limit the choices that you can make. In contrast, Pinegrow gives you a much wider freedom of choice.
These approaches are fundamentally different even if the end web page products appear similar.
A document by Roel Van Eyken and Robert Means