Pinegrow web editor works with regular HTML files. It has unique features like editing multiple pages at the same time, complete range of Bootstrap and Foundation components, CSS styling with LESS support, Stylesheet manager… And more useful features are on the way.
This Web Editor doesn’t add any abstraction on top of HTML and CSS. It simply helps you to work with HTML and CSS more efficiently, either visually or through code. As standalone app, it fits into a web development workflow much better than cloud solutions.
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.
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.
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.
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.
Pinegrow Web Editor Features:
- Open HTML files on your desktop
Work with HTML files on your computer. It doesn’t add any frameworks, layouts or styles of its own to your code. There is nothing to upload, import or export. Simply open, edit and save your HTML files.
- 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.
- Live editing
- Bootstrap, Foundation, AngularJS or HTML
Drag components to the page and customize them through UI properties. Pinegrow automatically sets attributes, adds classes or even adjusts the component’s HTML code. AngularJS, 960 Grid and plain HTML are also supported.
- WordPress theme builder
Open or create a HTML page Add WordPress actions to HTML elements and set their parameters. Export the WordPress theme. Pinegrow generates PHP code and splits the page into PHP theme files.
- Multi-page editing
Edit multiple pages at the same time makes responsive website design a breeze. Duplicate and mirror pages, set different zoom levels and device sizes.
- Pinegrow loves the code
Pinegrow 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 are immediately visible on the page and in visual UI.
- Powerful CSS editor
Edit CSS rules visually or through code. Add variables and expressions to create easily customizable themes. Use Stylesheet manager to clone, attach and remove stylesheets.
- Make your pages responsive
Easily design responsive websites with Media query helper tool. Add custom breakpoints or let PG detect them by analyzing stylesheets. Use multi-page editing to edit the page at multiple device sizes.
- 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
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
Pinegrow fits right into your workflow. Use it alongside your favorite code editor (with smart auto-refresh), source control system, package manager and deployment tools.
- Edit PHP HTML templates
Visually edit HTML layouts with dynamic PHP tags. Double-click on any element that contains PHP blocks to edit the code.
Pinegrow PRO is an edition of Pinegrow Web Editor with powerful tools like Projects, Master pages, Partials and Smart components. It is perfect for building and managing multi-page websites.
- Bootstrap 5 Beta
- Improved text editing
- WordPress custom image sizes
- Bug fixes
Changes in Pinegrow Web Editor 5.991 – January 28, 2021:
- Tailwind Blocks
- Tailwind CSS 2
- Tailwind UI works again
- Bootstrap templates
- Bug fixes
Changes in Pinegrow Web Editor 5.99 – December 17, 2020:
- Bootstrap 4 Blocks library
- 2000+ SVG icons
- VG manipulation
- WordPress local video and audio resources
- Performance and bug fixes.
Changes in Pinegrow Web Editor 5.981 – November 20, 2020:
- Fixing the issue with opening a New page dialog
- Changing the attribute with Attribute Editor updates the values in the Properties panel.
- Tailwind CSS colors are now correctly detected in Tailwind Visual Editor.
- Fixing the Customize Bootstrap Theme feature and issues with copying resources to projects.
- Improvement of how multiple Pinegrow windows are managed.
Pinegrow Interactions library updated to 2.01:
- Fixes issues with Scroll scene animations that are played independently (not synced with scroll).
- Added the ability to name the Scroll scene animations.
- Added Invalidate setting for independent Scroll scene animations.
Changes in Pinegrow Web Editor 5.98 – November 18, 2020:
- Pinegrow Interactions 2.0
- Tailwind CSS was updated to 1.9.3
- Display the content of SVG elements in the tree
- Using root project URL mapping is now on by default
- Better highlighting and selecting non-visible elements
- Bug fixes
Changes in Pinegrow Web Editor 5.973 – August 25, 2020:
- Bootstrap 4.5.2,
- The option to serve project files from the web-server root,
- Keeping inline classes when assigning class styles,
- Improved VS Code extension & integration,
- And bug fixes for custom colors in Tailwind Visual Editor.
Changes in Pinegrow Web Editor 5.972 – July 29, 2020:
- Work with customized Tailwind themes in Tailwind Visual Editor
- Faster CSS Grid editor
- Bug fixes
Changes in Pinegrow Web Editor 5.97 – July 8, 2020:
- Tailwind Visual Editor add-on
- Drag & Drop with collapsed elements
- Reorganized HTML element Library
- Copy paste attributes
- Combined Undo history and more.
Changes in Pinegrow Web Editor 5.96 – May 14, 2020:
Improved Page Libraries
Page Libraries let you add any web page (local or remote) to the Library Panel and use it as a library of components that you can then drag to your page. This is a very useful feature and now we made it even better:
- Page library settings let you specify CSS selectors for components and navigation areas.
- Back and Forward buttons let you move back and forward in the navigation history.
- Test clicks toggle lets you switch between selecting the elements on the page and interacting / navigating the page library.
- Page libraries can be zoomed out so that you can see the desktop size of the library page without having to enlarge the Library panel.
- You can open remote websites directly so that navigation and login methods work properly.
Editing XHTML Files
Pinegrow can now be used to edit XHTML files with UTF8 encoding. In the past there was a problem with handling the attribute and auto-closed tags like when they were explicitly closed with .
Preserve attribute case
Although HTML is case-insensitive language, some libraries (for example Angular 2) can require case sensitive attributes, like ngIf and not ngif. Pinegrow now preserves the case of attributes. So, if you name your attribute myAttribute it will remain such in the source code. Before, Pinegrow saves all attributes in lower case.
Correct #Link mapping in components and master pages
Links and URLs in components and master pages are mapped according to the position of the component definition and each individual instance. For example, if the component is defined in /index.html and used on /products/ball.html the link products/index.html will map too index.html in the ball.html instance.
Until now Pinegrow also mapped anchor URLs like #contact. In most cases this was not the expected behavior. Now, Pinegrow leaves URLs that start with # as they are.
WordPress – Register Taxonomy supports Blocks editor
The Register Taxonomy action now automatically adds the “show_in_rest” parameter so that the taxonomy can be used in the WordPress Blocks editor. For existing projects that use Register Taxonomy action, no change is required, just re-export the theme.
- Formatting CSS rules with multiple selectors
- WordPress: set_post_thumbnail_size syntax error when defining custom post thumbnail size
- WordPress: duplicate resource ids when enqueuing scripts and styles
- Partials are back,
- Highlighting the default stylesheet
- Create new file in the Project panel
- Activate and configure Pinegrow with environment variables
- Bug fixes
Changes in Pinegrow 5.94 – February 4, 2020:
- Create custom blocks for WordPress Block Editor
- Improved CSS Grid editor
- Creating new pages
- Speeding up project loading
- Bug fixes
Changes in Pinegrow 5.93 – February 3, 2020:
- Insert special characters
- Exclude project folders and files
- Updated device presets and UI improvements.
- Bug fixes
Changes in Pinegrow 5.92 – January 21, 2020:
- Edit remote documents
- Work with dynamic HTML elements,
- Materialize 1.0.0,
- WordPress improvements
- Bug Fixes.
Changes in Pinegrow 5.91 – December 10, 2019:
- Bootstrap 4.4.1 and Pinegrow Interactions improvements.
Changes in Pinegrow 5.9 – November 27, 2019
- This release also includes our monthly batch of small fixes that make a webdesigner life easier.
Changes in Pinegrow 5.8 – October 29, 2019:
- Reveal CSS rule in source code
- Control CSS code formatting
- WordPress Theme Builder: Post Breadcrumbs
- Bug fixes.
Changes in Pinegrow 5.7 – July 31, 2019:
- Improved Style editor, Components and Master pages…
- Plus, a healthy dose of bug fixes.
Homepage – https://pinegrow.com
Size: 125 MB