Pinegrow Web Editor

This IDE is unlike anything I've tried. Not that I got that much experience, but exactly therefore I've been looking for one like this pretty much my whole life.

I'm definitely no programmer, but have learned a bit of HTML/CSS some years ago, never really used it though. Also, I'm a graphic designer and not being able to make proper websites is a downer. So I've been very interested in visual IDE's. I've been working with Adobe Muse, but the limitations annoy me a lot, and now it's even discontinued. So Pinegrow came into my world!

With Pinegrow you get a visual interface for a lot of the things you'd normally write – it's really complex, you can do a lot, and it's very logical, clever and innovative too (I design UI's myself). However, if you run into limitations the code is right at your fingertip, the selected element is highlighted in the code, and vice versa if you right click the code. And everything you do in one place is immediately update in the other! There's also integrated bootstrap, so you can chose a template as a foundation and customise it any way you like. And in the full version you can make full Wordpress themes. I could keep naming great features, but I'll stop here.

You do have to know a little bit about HTML and CSS (like me) to fully understand the interface, but there are obviously tons of material to help with that on the internet, and you just have to get the basics. And the dev team have made some nice video tutorials. The reason why you have to know the basics is because the whole logic of the interface is built on it, e.g. the way you assign classes, arrange elements etc. It's visual, but the structure and the terms are based on coding. This makes sense, even though some aspects maybe could have been simplified if the target group was complete newbies. Actually I think the main target group is professional programmers who want to make their workflow more effective and smooth.

But this logic has another significant benefit, namely that you actually learn to program by learning and using this software – without writing code! I've just started using Pinegrow a few days ago, watched some tutorials and played around, and I already feel how what I've learned is coming back to me, and I encounter terms that are unfamiliar, but because I have the whole visual overview it's easy to see what they do and work with them.

The application is quite affordable for this advanced features. There are 3 versions, basic, pro and pro with Wordpress (maybe they're called something else). You can chose between an annual pay plan or a one-time purchase (1 year of updates), and if you're a student or non-profit you get more than half the price cut off. I've even read that if you still can't afford it, you can just write them to get a special deal (or get it for free..?), yeah they're nice.

Conclusion: I recommend Pinegrow.

I only tested it briefly, looks nice, so far. What is missing for me is FTP. You need to use your own FTP program to down-/upload files. Not a big deal for occasional use, but essential for serious development work.

yesss i like it i want to try this for my site

Went through so many others before finding this.. It's an html / css editor with integrations for popular frameworks and tools like bootstrap, foundation, materialize, fontawesome, angular, google fonts, etc, bringing in the appropriate gui elements as you select these from the menu. You can also just use it to build a normal html / css / javascript site without using a framework. A big thing to me is to be able to edit the code directly when that's faster but use the gui when that's more logical or when i can't remember css properties etc. Certain other visual editors restrict full access to the code or allow you to access it but then blow up all the time when you try to do things manually. Also, it's a desktop app, so you won't wake up one day to find that you can't work because the predictable happened. Pinegrow may not be perfect, but it's a good shot better than others i've looked at. I love that when clicking an object, it automatically highlights the code that defines that object. So you can visually select the thing you want to work on and it takes you straight to the code that defines that thing, helpfully highlighting the entire block that applies (also useful if you want to copy or delete it). There's also a tree view of the DOM, which might at first seem like a vertical version of what you already have in code, but it gives you a few things you can't do directly in the code, such as allowing you to drag a component into exactly the position you want it to be in or to visually change the nesting of components (that tends to be more fiddly on a complex site in a text only editor). If you have javascript enabled components, you may interact with them by ALT clicking (or using the 'test clicks' mode). It's the closest thing to the best of both worlds (text vs visual) that i've been looking for for a while.

It is one of a kind I haven't found a web editor like it yet.

Pinegrow is truly a gem: it will open and edit HTML/CSS, and it won't save your website in a proprietary format. It can even open any online site and make it instantly editable.

While there's a lot of tools out there (mostly cloud solutions) I prefer using a desktop app, so I can do all my work locally and then publish to the web. Pinegrow is also developed very frequently, the latest version (2.93) added a full CMS feature to static sites!

I'm not even close being a front-end dev, so I'm using its visual tools to create and edit my personal and business sites, while slowly using it as the main tool to learn to code, along Youtube videos about Bootstrap, CSS and such. I could even make my first Wordpress theme, all by myself!

Pinegrow is way better and affordable than Dreamweaver, and it gives me a lot of tools and freedom than using just an IDE.

[Edited by csfalcao, January 04] Disclosure: as I provide websites and software localizations services, Pinegrow Web Editor became my main tool for that, and fortunately I had the chance to work with them translating the Pinegrow site and documentation for another language.

Well, Pinegrow has the most needed features you will ever need to design your HTML/CSS website, you can use a lot of different frameworks like Bootstrap and Zurb Foundation, it does linking Automagically! you can edit your html without touching the code, there are code for advanced users too, the most cool feature i liked in pinegrow is that i can edit css easily, without needing to search for specific element CSS, i would suggest everyone to use Pinegrow!