Home/ Documentation/ Panels & Tools

Panels & Tools

Get the most out of Pinegrow by mastering all its panels and tools.

Page views

Everything you do in Pinegrow is live. All the changes you do are immediatelly visible in one or more page views. There you can build and test your page at the same time.

The Library Panel

The Library panel contains elements that can be placed on the page. You can also use the Library panel to insert the code directly, to define your own components and load any page as a library.

Page Libraries

Load any website into the Library panel and use it as a component library from where you can drag elements to your page.

The Tree Panel

The Tree panel displays the structure of the page. Use it to navigate and edit the page elements with precision.

Element Properties

Use Element properties panel to edit element’s attributes. For example, to edit classes of any element, or to change source and alt text attributes of an image. The panel also contains controls for properties defined by frameworks like Bootstrap.

Styling with CSS

Styling – painting and positioning elements – is done with CSS properties and rules. Pinegrow offers a collection of powerful styling tools to suit different tasks and workflows.

Code editing

Pinegrow’s unique feature is deep integration of visual and code editing tools – both for HTML and CSS editing.

HTML Snippets

Add any HTML element into a custom snippet library and reuse it on the same page, on other pages and even in other projects.

History – Undo and Redo

History panel lets you move back and forward through HTML and CSS edits.

Drag & Drop

Drag & drop in Pinegrow has a bunch of useful tricks up its sleeve.

Tools & Helpers

Pinegrow contains many helpers and tools that can make you even more productive.

Getting the Most out of Pinegrow UI

Pinegrow comes with a powerful and flexible user interface that gets out of your way when you don’t need it.

Keyboard Shortcuts

Pinegrow has many useful keyboard shortcuts that can make your work even faster.

Edit remote websites and web applications

Let’s take a look at how Pinegrow Web Editor can be used to open and edit websites and applications from local or remote web servers.

Working with dynamic HTML elements

Dynamic elements are HTML elements created by Javascript code after the page loads.

Using External Code Editors & Tools

Pinegrow is not an all-or-nothing web development solution. You can use Pinegrow alongside your favorite code editor or IDE like Atom, Visual Studio, Sublime Text, Vim, Emacs, WebStrom or Adobe Dreamweaver.

The Design Panel for Plain HTML

The Pinegrow Design panel allows you to set project wide styling including color palette and fonts. Plus, the saved design and Surprise me! button allow you to easily explore design alternatives.

Working with PHP templates

PHP HTML templates are .php files that contain valid HTML layouts with dynamic PHP parts. Starting from Pinegrow 2.4 you can visually edit them in Pinegrow Web Editor.

Font Awesome

Pinegrow comes with a Font Awesome plugin that lets you easily add icons to the page and edit their properties. It also supports Icon stacks.

Publish your websites on Netlify

All editions of Pinegrow (desktop Pinegrow Web Editor, self-hosted WordPress plugin and Pinegrow Online) now let you conveniently publish projects to Netlify static HTML hosting.

Last updated on October 30, 2023 at 1:44 pm

Print this article