What is Pinegrow?

Pinegrow Web Editor is a desktop application for creating and editing websites.

Pinegrow is a general purpose HTML and CSS editor. Although it has extensive support for frameworks
like Bootstrap and Foundation, Pinegrow is not tied to any particular framework or library.

With Pinegrow you build websites by editing HTML layout and CSS rules. Pinegrow is a collection of
integrated tools: some are visual and some work with code. You’re free to mix & match these tools in a
way that best fits the task at hand.

For example, when working with Bootstrap, you can use Element properties panel to (1) visually control
Bootstrap properties, live-synced with the (2) code view where you can inspect and tweak the HTML
code directly. At the same time you use (3) Style panel to edit active CSS rules.

Note: numbered points ((1), (2)…) used on images in this document are not interactive. Clicking on them
will just open the whole image.

Your page never becomes tied to a closed Pinegrow file format. Pinegrow reads and writes HTML and
CSS directly, so you can use it alongside your other tools.

Let’s take a look at the editing interface. The following description is just a quick overview. Every tool in
Pinegrow has a bunch of useful features for speeding up your work.

Live page views

Most editing operations happen live on the page view. Each page can have multiple page views showing
the page at different sizes and in different devices.
Document structure tree

Tree panel displays the nested HTML structure of the selected page. The tree is editable.

Library

Library panel contains HTML elements and components (groups of HTML elements) that can be placed
on the page. You can also use the Library panel to insert the code directly and to define your own
snippets and smart components. You can drag Library elements to the page view or to the tree.

Selecting elements

Most editing operations in Pinegrow are done on one or more selected elements. Select elements by
clicking on them in the page view or in the tree. Use CTRL (CMD on Mac) and SHIFT to select multiple
elements.

Now let’s take a look at what you can do with the selected elements.

Element properties

Use Element properties panel to edit element’s attributes. For example, to change source and alt text of
an <img> element. Classes are managed there as well. This panel also contains controls for properties
defined by frameworks. Bootstrap pages get a range of handy controls for text alignment, text context
and so on. You can define custom element properties by using Smart components and editable areas or
by creating Pinegrow plugins.
Style

Use Style panel to work with CSS rules. The panel has multiple parts: (1) Active tab shows the list of CSS
rules that affect the selected element. (2) Individual stylesheets can be opened in separate tabs. Click on
any rule to display it in (3) Visual editor with controls for most CSS properties, including: shadows,
transforms, transitions and Flexbox. You can use (4) List editor to directly edit rules and their properties –
or switch to code editor. SASS and LESS stylesheets are fully supported.

Element Code

Pinegrow is not only a visual website builder – you can use it to work with code as well. Edit element
code panel lets you edit the code of individual elements. Instead of dealing with the whole page you
focus only on the relevant parts of the code. And if you prefer a simpler syntax, you can switch to Pug (ex
Jade) mode. Pinegrow will automatically convert HTML code to Pug and back. Code editors and visual
tools are synced, so that you can immediately see how editing operations affect the HTML code.

Page code

Whole page code editor is available as a separate panel. Again, all changes are synced between the code
editor and all open visual tools.

Actions
Actions panel lets you create Smart components, Master pages, Editable areas and more. Select one or
more elements on the page and assign a specific action (behaviour) to them. These features are available
in Pinegrow PRO edition.

WordPress

Use WordPress panel to convert the HTML project into a PHP-based standard WordPress theme. This
feature is available in Pinegrow with WordPress theme builder.

Text editing

Use the “Text edit” control or simply double-click on the text that you want to change. When text editing
mode is active, just click around the page and type to edit the text.

Flexible workspaces

Pinegrow’s user interface can be freely re-arranged: panels and tabs can be (1) moved, (2) resized and (3)
collapsed. You can create the workspace that best fits your workflow or switch between a set of pre-
defined workspaces.

Useful workspace tips

Make the user interface smaller to fit more information on the screen (4). That’s especially useful on
retina screen.
Click on the selected panel tab to collapse the whole panel stack. Click again to expand it (3).

Click on section headings to collapse and expand them (5). ALT + Click to do it for all sections. ALT + Click
also works in the tree.

Using Pinegrow with other tools

Pinegrow can be used with any tool that works with standard HTML and CSS files, for example code
editors or website builders that export complete HTML and CSS files. Pinegrow automatically reloads
open files when they are saved in other apps.

In addition to that, Pinegrow and Atom code editor can be connected together with a special Atom
plugin, so that all edits are live-synced between the two apps, without having to save files.

Plugins

Features like support for Bootstrap, Foundation, WordPress, Smart components are implemented as
Pinegrow plugins. Plugins are JavaScript files that use Pinegrow API to integrate into Pinegrow and
extend its functionality. You can develop your own plugins to add support for your specific frameworks,
component libraries, CMS…

Is Pinegrow the right choice for me?

Short answer: if you read so far – Yes ☺

Long answer:

If you don’t know what HTML elements and CSS rules are, and you’re just looking for a simple drag and
drop editor to quickly build a website without knowing what happens in the background, then Pinegrow
is probably not the right tool for you.

On the other hand, Pinegrow is a good choice for you if:

You’re proficient with HTML and CSS and want a powerful editor that combines visual tools with code
editing and integrates well into your existing workflow.

You aren’t familiar with HTML and CSS yet, but need a playground where you can learn them well.

You’re working with Bootstrap or Foundation and don’t want to remember hundreds of framework
classes and are tired of copy-pasting the code of various components.

You prefer to work with HTML and CSS directly and have complete control over your code or need
flexibility that code generators can’t provide.

You wish to automate your development workflow by using reusable component libraries, master pages
and editable areas.

You are looking for a simple CMS for static HTML websites, either for yourself or for your clients.

You need an easy way to convert HTML websites into WordPress themes.

You’re looking for an efficient alternative to a cloud-based or subscription-based web editing software.