Pinegrow Web Designer

a desktop app for Mac, Windows & Linux that lets you mockup & design webpages faster with multi-page editing, CSS & LESS styling and smart components for Bootstrap, Foundation and other frameworks. Try it onlineWatch video »

* Also works without Bootstrap

Get Pinegrow for only $49.95

No Cloud. No SaaS. No monthly fees.

Pinegrow is a standalone desktop app for Windows and Mac. Buy it once, install it on your computers and use it on as many projects as you want.

Welcome to the launch party! To celebrate the release of the app we are including free lifetime updates with the purchase (normal time period for free updates is 1 year).

Buy the license through PayPal and make sure to click on "Return to seller's page" at the end. You'll get your serial number there. Install the app (trial version is ok) and use the serial number to activate Pinegrow.


p.s. If you can't afford to buy Pinegrow at the moment, get in touch and we'll help you out.


Latest news

LAST DAY of Summer sale: Get Pinegrow for only $29.95!

Use Pinegrow to create responsive websites.

New tutorials added to the Docs & Support portal. Ask a question if you need a tip.

Add your own components to reusable libraries.

TutsMe Webdesign published a comprehensive review of popular Bootstrap visual editors. Here's the conclusion: 

So which Bootstrap Visual Editor is the best?

Purely looking at the quality of the visual editor and how clean the HTML result is I conclude that Divshot and Pinegrow are both very good options. The graphical interfaces of Divshot and Pinegrow have a lot in common and are both very easy to work with. Looking at the price of those two editors Pinegrow becomes a very attractive choice (Divshot starts at $30 a month; Pinegrow costs only $49.95).

Features

Multi-page editing

Edit multiple pages at the same time. Duplicate and mirror pages (changes in the source page are automatically reflected in a mirrored page), set different zoom levels and device sizes.

Less & Css rules

Customize page design with CSS rules. Use Less variables, functions and expressions to create easily customizable templates. Change values through UI or write the code.

Stylesheet manager

Play around with CSS & LESS variations. Attach, detach, duplicate and reorder stylesheets. Works great together with multipage editing.

Bootstrap 3 and Foundation 5 support

Complete support for CSS and Components sections of Bootstrap specification. Drag & Drop elements, control them through UI properties, context menus and sortable DOM tree.

Works on non-Bootstrap sites as well

Edit any HTML document, even pages opened straight from the internet. Use built-in components for CSS frameworks like 960 Grid or develop your own.

Edit code

Pinegrow doesn’t force you to edit pages through GUI. Edit full HTML and LESS/CSS code, or easily edit code of individual HTML elements and CSS rules. All with live preview. Or use your favorite code editor.

Html transformation

Need to change form layout from inline to horizontal? Make Jumbotron span the full width? Just change a property and Pinegrow will rearrange the html code accordingly.

Open any html file

Pinegrow works on any html file; without limiting you only to projects created with Pinegrow. It fits in your workflow right where you want it and plays nicely with your other tools and source control.

Undo & Redo

Something unintended happened? Undo is your best friend. 20 levels of complete HTML & CSS snapshots per page.

Desktop app

Why use (and pay for) cloud solutions when all your files are on your local computer? Use Pinegrow desktop app to work on as many projects as you want - in privacy.

Online playground

Use free web-based Pinegrow to play around with Bootstrap or to quickly come up with some code. Download Zip archive of your project.

Use Pinegrow to:

Quickly mockup a page

Use element library to quickly put together a page mockup. Duplicate the page and play with different layout variations.

Watch the video »

Work with Bootstrap and Foundation components

Pinegrow knows how to rearrange HTML code of an element if you change its properties. For example, changing form layout from normal to horizontal requires just one click.

Watch the video »

Style a page

Why stop at mockup? Just go ahead and turn it into a custom designed webpage by styling elements with CSS rules. Edit rules through GUI or write code directly.

Watch the video »

Use CSS variables and functions

Use variables instead of hard coding CSS values. Use math expressions and functions like lighten and darken to create designs that can be customised by changing just a couple of variables - all in real time. 

Watch the video »

Edit multiple pages at the same time

Open multiple pages that share the same stylesheet. Style changes are reflected on all pages in real time. View them at different screen sizes. Mirror content from one page to another.

Watch the video »

Experiment with different designs

Take a page and open a mirrored copy. Use Stylesheet manager to duplicate and attach / detach stylesheets. Play with different designs in real time. Bonus points if you use different screen sizes and CSS variables.

Edit content of a page

Use Pinegrow as a CMS for your static Html pages. Move elements around and double click on any element to edit its text content.

Watch the video »

Try templates online

Just open a template demo from the internet and start customizing it with your images and content. Immediately see if the template works for you or not.

Watch the video »

Need a quick code snippet?

Need a Bootstrap form or navbar? Design it in Pinegrow, change its layout with a single click. Select the form, click on Actions / Edit code and copy the html.

Keep your existing workflow

Work with your local files. Use Pinegrow together with your existing tools. For example, do layout changes in Pinegrow and edit script sections of the page in a code editor.

Reuse components

Save frequently used page elements into libraries and reuse them across pages and projects. Or share them with your team members.

Watch the video »

See Pinegrow in action: Fixing a broken Bootstrap template with Pinegrow

It is the best design and code editor i have used so far... And this comes from a person who works fluidly in Sublime Text and Dreamweaver.

Thomas Djärv, Cloudier

This is a sweet app for web design. Got it this morning and I'm already using it a lot to throw some prototypes together. Awesome!

Ray Baer on Twitter

Looks amazing! @Pinegrow A Win/Mac app that lets you mockup & design #Bootstrap sites.

Creative Punch on Twitter

Geniale IDE! Pinegrow Web Designer.

Sven Kubiak on Twitter

Hey, just bought your product and I love it.

Kevin Ramirez, SixtyVocab

Showcase

Bootstrap examples

Play with example pages from Bootstrap distribution. Blank page is included.

Open editor 

The Magic of Pine Trees

Open a demo website and experiment with different Css variations and page elements.

Open editor 

Interactive Bootstrap Docs

Open Bootstrap docs in Pinegrow and experiment with examples. A great way to learn about Bootstrap or to come up with a quick piece of code.

Open editor 

Pinegrow in Pinegrow

Open this page in Pinegrow editor. If you make any improvements, send them to us :)

Open editor 

Have fun on #ProjectFridays

Let's do a fun Pinegrow project together every Friday, like building a website, doing HTML5 experiments, making a simple game...

Subscribe here and each Friday we'll send you instructions and resources for making a project of your own. You can make projects online or with the app.

Get Pinegrow for only $59.95 $39.95 *

LAST DAY - Summer Sale ends on July 22 Get Pinegrow for only $29.95 $49.95

* This offer ends today at midnight GMT.

Pinegrow is a standalone desktop app. Buy it once, install it on your computers and use it on as many projects as you want.

30 day money back guarantee


Personal license Company license
Price $49.95 $29.95
+ 20% VAT for EU
save $20 until June 30
$99.95 $79.95
save $15 until June 5
+ 20% VAT for EU
Free updates 1 Year 1 Year
Use Pinegrow to make money Yes Yes
License is assigned to Person Company
Who can use the app? Only the person to whom the license is assigned One concurrent user per license
Install on up to 3 personal computers Any company computer

Choosing the best license type for you: Personal or Company?

Review the license agreement and buy the license. You'll receive email with the serial number after checkout. Launch the app and input your serial number under "3. Enter the serial number".

VAT will be added for EU customers. If you are registered for VAT enter your VAT ID during the checkout process to buy without tax.

    Buy Now    

Are you a student or educator? We have a special offer for you.

Download Pinegrow: Mac - Win - Linux 64 - Linux 32


p.s. If you can't afford to buy Pinegrow at the moment, get in touch and we'll help you out.

Subscribe to product updates

Frequently Asked Questions

How is Pinegrow different from Jetstrap, Divshot, Webflow...?

First of all, Pinegrow is a desktop app that can open your existing Html files. We believe that a standalone app fits into a web development workflow much better than cloud solutions.

Plus, Pinegrow has unique features like editing multiple pages at the same time, CSS styling with LESS support, Stylesheet manager, page mirroring... And more useful features are on the way.

Pinegrow doesn't try to take over your workflow. Rather, it is a tool that can be used to save effort and time, where it makes sense.

What are the license terms?

A separate license is needed for each individual user who is using the app. Exception is made for your family members - it makes no sense requiring your kids to buy a separate license if they want to play with Pinegrow on your computer.

You can install your copy of Pinegrow on up to 3 of your computers (at home and at work, Windows, Mac or Linux) as long as you are the one using the app. Contact us if you need more flexible licensing.

How to activate the app?

After you complete the PayPal payment process and get the serial number install the app (trial version is ok), run it and click on the upgrade link in the top right corner. Enter the email address you used for PayPal payment and your serial number. Internet connection is only required for activating the app; you can run it offline.

How is the app made?

The web playground and the desktop app versions share the same JavaScript code. We do lots of DOM manipulation and Css processing with the modified version of Less.js library. Desktop apps are made with node-webkit that packages Node.js, Chromium browser and the app into an executable desktop app. Node-webkit is great! See Support / About for the complete list of all used open source projects.

What is _pgbackup folder?

Whenever the app saves a file (HTML page or LESS/CSS stylesheet) it stores the existing file into the _pgbackup folder with timestamp appended to the name. We do this to play safe. We don't want you losing your files if something goes wrong.

Will you offer a hosted version of Pinegrow?

We might, tell us if you need it. For the existing functionality it doesn't make much sense to have it in the cloud - the files you edit are usually located on your computer. But we have a couple of scenarios in mind where hosted version would be a perfect fit. Stay tuned.

Are there any limitations?

Editing templates (handlebars and similar) is not supported at the moment because browser engine tries to "fix" invalid HTML. That can break the template code. Also if the page has JavaScript that modifies DOM the modified version will be saved when you save the page in Pinegrow. See how to get around this. We are working on fixing both of these issues.

Why can't I select certain elements?

Most likely the parent of the element you are trying to select is collapsed - it has yellow menu when it gets selected. Collapsing is useful when manipulating elements. To select child elements simply expand the element with the element Actions menu or by clicking on an arrow icon in the tree.

What's the product roadmap?

The first release is just the first 10% of what Pinegrow will become. We're working on:

  • Improving UI (keyboard shortcuts, selecting multiple elements, better properties controls…)
  • Making Pinegrow go faster especially when editing more complex pages.
  • API for creating user components and actions.
  • Theming Bootstrap through Less variables.
  • Support for templates and static site generators.
  • Full Less Css support and more.

Visit Pinegrow Community on Github for details.

Why the name "Pinegrow"?

We love pine trees. They smell amazing and it’s fun to chill in their shadow in the summer. Pine needles let through the perfect amount of sunlight. And as trees normally do, they grow. So, Pinegrow!

Get news about Pinegrow

We send out news about Pinegrow every two weeks or so. You can unsubscribe at any time.

About us & Contact

Our story

Pinegrow is made by Humane technologies, a small company in Slovenia run by my wife Ivona and me, Matjaz. Pinegrow is a tool we wanted for ourselves.

Pinegrow was first announced as 2.5 years ago. The concept was quite different at that time: web building part was tied to custom CMS and a hosting platform. The service was never publically launched in that form. It turned out that developers want the freedom to choose their own CMS (or just build a static site) and to host their websites on their own servers. 

Pinegrow Web Designer was rebuilt from scratch with this freedom in mind. We only kept the name.

Our other products are Booklers and Pllop.it.

Contact & Support

Run into problems? Have a suggestion? Want to say hi? We would love to hear from you!

E-mail: info [spam bots can't see that] pinegrow.com

Follow @Pinegrow on Twitter for product updates.

Visit Pinegrow Support portal to report an issue and to participate in feature development.