Code editing | Pinegrow Web Editor

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

Let’s take a look at different ways of how code can be edited in Pinegrow.

Note : Don’t know HTML? The Element code panel is a great place to learn about code. No scary code soup – instead take a look at different elements one at a time and observe how different editing operations change the code.

Edit code of a single element

Open the Element code panel.

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.

Select any other element on the page. Its code will appear in the code editor. When you edit the code, the change is immediately seen on the page.

Switch to simplified PUG syntax by clicking on the icon. The simplified syntax is sometimes easier to edit, and it is less prone to errors. Note, this syntax is only used for editing. Normal HTML code will be used on the page.

Use to toggle line wrapping and to toggle display of HTML syntax errors and warnings (not available in the simplified syntax mode).

Editing multiple selected elements

When the range of elements is selected on the page and these elements follow one after the other, all of them are displayed in a single Element code editor.

Inserting new elements

The Element code editor is a handy tool for inserting new elements to the page.

Of course, you can add new sub-elements to the edited element by inserting their code inside the main element’s code.

In addition to that you can also insert new elements by inserting their code before or after the edited element.

Just type before or after edited elements to insert a new element.

Pinning editors to the Edit code panel

Normally, only the code editor for the currently selected elements is displayed in the Edit element code panel. Use the to pin the current element code editor to the panel.

Use pinning to display multiple element code editors.

This will keep the editor displayed even when you select another element on the page. Code editor of the newly selected element will be added to the panel.

Quick Element code editor

To display a floating element code editor press CMD + H (C also works when not typing text) or chose “Edit element code” from the element right-click menu.

This is a convenient way of editing the element code without switching to the main Element code panel.

Page code editor

Open the Page code panel.

The page code editor lets you edit the code of the whole document: page, stylesheet, Javascript code or other file (click on the name of the non-HTML file in the Project view to open it in the code editor).

Press CMD + E or click on the in the top toolbar to toggle the code display for the selected page.

There we can also edit the code of the whole page.

Note that simplified syntax mode is not available in the page code editor.

Elements selected on the page also get highlighted in the page code editor.

All code changes appear in page view as well.

Right click on an element in the code editor. The element will get selected in the page view.

Use icon to open the Code editor options menu:

Toggle line wrapping.
“Show code for the selected page” will always show the code of the currently selected page. When you switch between pages in the page area, code editor will switch code tabs accordingly.
“Display HTML errors and warnings” will highlight any errors in the code. This only works with pure HTML code and you’ll see errors when editing code with server side scripts. In such cases, just turn this feature off and use “Page -> Check for HTML errors” instead.
“Search for the selected CSS rule” will highlight the CSS rule that is currently selected in the Style panel by performing a search for its selector. Use CMD+G while focused in the editor to jump between multiple search hits.

Using the external code editor

Pinegrow watches open files and reloads them when change made with another program is detected. Most code editors will also reload documents after they are saved in Pinegrow.

Pinegrow will ask before reloading the externally changed document if the document has unsaved changes in Pinegrow.

Live-sync with Atom

Using Pinegrow with Atom goes a step further – all edits are synced between the two apps without having to save them first. Check the documentation for details.