Skip to content
pinegrow.com
Docs menuPanels & Tools
Docs

Panels & Tools

Updated

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

Learn the panels you use to build pages, such as the page views, the Library, Tree and Element properties panels and the CSS styling tools. The Check and publish pages cover Content Workspace, Spell Check, Page Health, Accessibility checks, visual change review, the site map and publishing. The last pages explain how to use Pinegrow with external code editors.

Interface

  • 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…

  • Keyboard shortcuts

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

  • Tools and helpers

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

Editing and styling

  • 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…

  • 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…

  • 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.

  • 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…

  • Drag and drop

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

  • 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.

  • SVG controls

    Preview inline SVG graphics, replace them with SVGs already used in your project, or paste complete SVG code. Pinegrow checks the code and rejects scripts and external content.

  • Code editing

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

  • 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.

Check and publish

  • Content Workspace

    Edit the text, images, links and page information of an existing HTML page in a focused workspace, and choose who can edit each field in CMS Mode.

  • Spell Check

    Find and fix spelling mistakes in page text, alternative text, labels and placeholders, on one page or on all open pages, and keep product names in a project…

  • Page Health

    Check pages for invalid HTML nesting, missing document essentials, duplicate IDs and broken label, ARIA and in-page link references, then fix the findings yourself or with AI Assistant.

  • Accessibility checks

    Scan the rendered page with the axe accessibility engine, review confirmed problems and items that need a person’s judgement, and fix them with guided fixes or AI Assistant.

  • Visual change review and revisions

    Save revisions of your project, see what changed as code, as rendered pages or element by element, and restore single changes, selected files or a whole revision with…

  • Site map for search engines

    Create sitemap.xml, a site map page for visitors and the robots.txt Sitemap line for a Pinegrow project. Choose which pages are listed, fix search engine titles and descriptions…

  • Publish your website

    Publish a Pinegrow project to GitHub, Netlify, Cloudflare Pages or an SFTP server. Review what will be uploaded, removed and excluded before anything is sent, and send only…

Code editors and tools

  • Use external code editors and 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…

Older content

  • Legacy: An older version of Pinegrow

    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.