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.
NoteDon'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.
Open the Element code panel.
The 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 277_ICON 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 266_ICON to toggle line wrapping and 269_ICON to toggle display of HTML syntax errors and warnings (not available in the simplified syntax mode).
When a 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.
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.
Normally, only the code editor for the currently selected elements is displayed in the Edit element code panel. Use the Pin_ICON to pin the current element code editor to the panel.
This will keep the editor displayed even when you select another element on the page. A Code editor for the newly selected element will be added to the panel.
To display a floating element code editor press CMD+H_KEY (C_KEY 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.
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_KEY or click on the KODA_ICON 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 down_ICON icon to open the Code editor options menu:
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.
Using Pinegrow with Atom or VSC goes a step further - all edits are synced between the two apps without having to save them first. Check the documentation for details.