Pinegrow Web Designer

Easily mockup and design webpages with drag & drop components library, multi-page editing, LESS Css styling and Bootstrap 3 support.

Pinegrow Web Designer lets you easily build and design webpages. It is available as a web app and as standalone desktop app. Pinegrow works together with your existing tools and saves you tons of time with building responsive layouts. EDIT MULTIPLE PAGES AT THE SAME TIME Multi-page editing lets you open multiple pages (or multiple views of the same page) at different screen sizes. All changes you do, either in Html or Css are updated in real-time to all open pages. STYLE PAGE WITH CSS + LESS Customise page design with Css rules. Use Less variables, functions and expressions to create easily customisable 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 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 FILES AS WELL Multipage editing, drag & drop elements, code editing and Less & Css styling work on any Html page, even on a non-Bootstrap page openned from the internet. 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. SMART 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 desktop app 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 & Style snapshots per page. USE PINEGROW TO: - Mockup a page Use element library to quickly put together a page mockup. Duplicate the page and play with different layout variations. - Style a page Turn a mockup into a finished webpage by styling elements with Css rules. Use Less variables and expressions to create designs that can be easily customized. - Check different screen sizes Open a page from local file or remote url, duplicate it and set different device sizes. Edit layout and Css and observe how it handles different device sizes. - Experiment with Css versions Take a page, open the Stylesheet manager and duplicate its stylesheet. Attach / detach it to the original page or its duplicates. Play with styles and Less 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. - Play around with websites Open pages from the internet, change their layouts, customize styling and extract useful components (if allowed by the author). - Create a form 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. - Build a website And of course, you can use Pinegrow to build a complete website. - Use Pinegrow when it makes sense 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.