Build your own websites faster using drag and drop!

Pinegrow Web Editor for Mac

Join our mailing list

Stay up to date with latest software releases, news, software discounts, deals and more.

Subscribe

Pinegrow Web Editor for Mac

  -  234 MB  -  Trial
Pinegrow Web Editor for Mac is a desktop web editor that lets you build responsive websites faster with live multi-page editing, CSS & SASS styling and smart components for Bootstrap, Foundation and WordPress. Create websites from scratch or edit your existing projects. Pinegrow for macOS has everything you need to build websites: HTML editing tools, styling, framework tools, component libraries and more. Use element library to quickly put together a page mockup. Duplicate the page and play with different layout variations.

Use variables instead and other SASS and LESS goodies. 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. Why stop at mockup? Just go ahead and turn it into a custom designed webpage by styling elements with CSS rules. Edit rules through the Visual editor or write the code directly. Open multiple pages that share the same stylesheet. Style changes are reflected on all pages in real time. View them at different screen sizes. Use Pinegrow Web Editor for Mac as a CMS for your static Html pages. Move elements around and double click on any element to edit its text content. Need a Bootstrap form or a navbar? Design it in the program, change its layout with a single click. Select the form and copy the HTML code. Use standard source control tools like Git to manage your code and to collaborate on projects with your team members.

Features and Highlights

Speed up working with HTML
Quickly build the layout of your webpage with powerful visual tools for adding, editing, moving, cloning and deleting HTML elements. Insert N elements with repeater and modify the layout of multiple selected elements with one move.

Bootstrap 3 & 4 and Foundation
Turn hundreds of framework classes into powerful visual tools such as layouts with resizable columns, grid display, responsive controls for text, color, spacing, visibility and even Bootstrap flex classes. Insert elements from rich library of components.

Edit & test your page on all device sizes at once
Use multi-page editing to edit the page at multiple device sizes. Easily design responsive websites with Media query helper tool. Add custom breakpoints or let the app detect them by analyzing stylesheets.

Pinegrow Pro
Lets you speed up your work even more with smart features such as master pages that let you define templates for your project. Turn page elements into reusable components with custom editable areas. Use the tool as CMS for static HTML websites.

Create production-ready WordPress themes
Open or create a HTML page in the Web Editor. Add WordPress actions to HTML elements and set their parameters. Export the WordPress theme. The app generates PHP code and splits the page into PHP theme files.

Pinegrow loves the code
The app doesn't hide the code from you. Edit pages visually and through code - at the same time. Changes made through visual UI are immediately reflected in the code view. Code edits - even if made in external code editor - are immediately visible on the page and in visual UI. (BTW, this makes Pine grow the perfect tool for learning about HTML & CSS).

Quickly build websites with Blocks
Use the collection of ready-made website blocks to quickly build great looking websites. Drag blocks to the page, customise the content, style CSS rules if you want - and your website is done. You can even create fully customisable WordPress themes with blocks.

Edit any page from the web
The program also lets you open any page from the web. Just enter the URL and start editing the remote page: change layout, edit text and images, modify CSS rules... This is great for editing CSS of server-generated pages and for trying out templates. Then save modified HTML and CSS files to your computer.

Use Pinegrow alongside your favorite code editor
The tool fits right into your workflow. Use it alongside your favorite code editor (with smart auto-refresh), source control system, package manager and deployment tools. Use plugin for Atom to live sync edits with the app.

Edit PHP, ASP and ERB HTML templates
Visually edit HTML layouts with dynamic server-side code tags. Double-click on any element that contains PHP, ASP or Ruby on Rails blocks to edit the code.

Note: 7 days trial version.

Also Available: Download Pinegrow Web Editor for Windows

  • Pinegrow Web Editor 7.93 Screenshots

    The images below have been resized. Click on them to view the screenshots in full size.

    Pinegrow Web Editor 7.93 Screenshot 1
  • Pinegrow Web Editor 7.93 Screenshot 2
  • Pinegrow Web Editor 7.93 Screenshot 3
  • Pinegrow Web Editor 7.93 Screenshot 4
  • Pinegrow Web Editor 7.93 Screenshot 5

What's new in this version:

- Pinegrow Web Editor 7.93 brings usability improvements to all users, and introduces a whole new way of working with WordPress

Search and drill down into CSS variables:
- Almost every property in the CSS Visual Editor has a helper tool that opens a dropdown menu that includes all available CSS variables. This is not new.
- When there are many variables (as is the case with frameworks and WordPress) the long list gets hard to navigate. In addition, many variables have long names

New Project screen cleanup:
- Pinegrow is celebrating 10th birthday this year, and in this time the list of supported frameworks kept growing and growing. As a result, the list contains frameworks that are no longer in common use, such as Angular 1, Bootstrap 3 and 4…
- These ancient frameworks are now hidden on the New Page / Project screen. Toggle them with the Show all frameworks link at the bottom of the list.

Internal web server shows default directory page:
- Internal web server now serves index.html when request accesses a directory
- For example, navigating to …/products/ will serve …/products/index.html
- This is aligned with how web servers commonly rewrite URLs, and is useful for avoiding broken links while navigating the site in browser previews
- Note that links pointing to directories should have a trailing slash to ensure that any relative links are resolved correctly

Explaining the double click on first use:
- Pinegrow pros, this one is not for you. We noticed that most new users try double clicking on the page, thus activating a text editing mode.
- A quick tooltip now comes up to explain what is going on. This only happens the first time the text editing is activated with double click.

Floating panels are working again:
- The previous update broke floating panels, making them unmovable. The floating panels can now move again, but we had to add window frames to make that possible.
- Use live WordPress data and preview during editing
- You can now build WordPress themes, plugins and blocks while using real data and previews from your WordPress site

The live preview brings two major benefits, letting you:
- See your project as it will appear on the WordPress site and use site styling
- Display real content during editing
- Pinegrow uses WordPress REST API to access any of your WordPress sites and integrates the data into the edited document

Components + WordPress actions:
- Use Pinegrow’s static HTML components in combination with WordPress actions to create reusable dynamic elements
- Pinegrow includes powerful static HTML components that let you define reusable components with editable areas

Auto slug and export folder in Project settings:
- Are you fed up with coming up with slugs for your new theme or plugin? And then having to wrangle the file explorer to create the export folder?
- Pinegrow now does both for you
- Slug is automatically generated from the project name. To create the export folder just select the wp-content/themes or wp-content/plugins and Pinegrow will offer to create the project subfolder for you.

Other WordPress improvements:
- Block attributes that control a style property no longer add empty properties is their value is not set. This only works for native React blocks, not dynamic and hybrid blocks.
- We rewrote the theme / plugin header parser to make it more robust and avoid errors with missing Theme name value

Join our mailing list

Stay up to date with latest software releases, news, software discounts, deals and more.

Subscribe