From creating pages with awesome layouts to clean CSS styling and Javascript manipulations, learn more about editing HTML documents with Pinegrow Web Editor.

  • Updating changed images

    Pinegrow caches images for better performance. Because of that, if you change the image while editing the page, the old image will be shown in Pinegrow even if you reload or refresh the page. Use File -> Clear cache and then Page -> Refresh (CMD/CTRL + R) to update images displayed in Pinegrow.

  • Code editor tips & tricks

    Edit code supports Find and Replace: find = Ctrl-F (PC), Cmd-F (Mac) findNext = Ctrl-G (PC), Cmd-G (Mac) findPrev = Shift-Ctrl-G (PC), Shift-Cmd-G (Mac) replace = Shift-Ctrl-F (PC), Cmd-Alt-F (Mac) replaceAll = Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac) Enable Emmet in Support -> Settings to do things like this. Press CTRL + Space for auto-complete.

  • Building the layout

    With Pinegrow’s powerful tools for adding, editing, cloning and removing HTML elements you can quickly build the layout of your webpage.

  • Editing elements

    Pinegrow supports rich set of properties that let you control how elements behave on the page.

  • Editing text

    Pinegrow lets you edit the text directly on the page.

  • Code editing

    Pinegrow is not just a visual page builder. It also lets you edit the code in a couple of different ways. You can choose the one that the best suits your development workflow.

  • Using Javascript

    You can use any Javascript plugin or custom code with Pinegrow. Learn more about what’s the best way for that.

  • Creating responsive layouts

    Responsive websites adjust their layout and content so that they work great at any screen size. This is done with CSS rules that use media queries to target different screen sizes.

  • Working with CSS stylesheets

    CSS rules are grouped into stylesheets. Pinegrow lets you create, attach, clone and rename stylesheets. You can also share one stylesheet between multiple pages, live edit included.

  • Working with pages

    Pinegrow works with regular HTML files on your computer. Simply open, edit and save HTML files without the need to import or export anything. Pinegrow doesn’t add any HTML, CSS or JavaScript code to your pages. As far as files are concerned Pinegrow works just like any other code editor.

  • Working with themes and templates

    Pinegrow lets you easily customise website themes and templates. And you can even try out templates before you download or buy them.

  • Fixing a Broken Template with Pinegrow

    Flatty, a free Bootstrap theme from Black Tie, is a beautiful and elegant theme perfect for a simple landing page. But its grid layout only works properly on large screen sizes. See how we used Pinegrow to fix the layout issues. Plus we made the theme customizable with LESS variables.

  • Using local images (from your hard drive) in IMG tags

    1. Place the image tag on the page in LIB panel:   2. Select the image and in PROPs click on the folder icon in field URL: A file select dialog comes up. After you select an image Pinegrow will set one of the following src url: if you are editing a local HTML file […]

  • Placeholders for empty elements

    Empty divs and similar elements have default height of 0 and are therefore not visible – they can’t be selected or used as drop targets for child elements.

  • Using Test clicks

    Test clicks in Pinegrow let you interact with your page just like it would be displayed in a normal browser. In this mode you can navigate through your website pages by clicking on links and access interactive features of your page, like responsive menus, modals…

  • Collapsing and hiding elements

    The outline tree is one of the most useful features of Pinegrow. From the tree view, you can clearly visualize the structure of the page and manipulate all its elements.

  • Resize Page Views and Add Responsive Breakpoints

    From Pinegrow 2.4 you can dynamically resize your page views directly in the application and check the responsive behavior but you can also easily define new responsive Breakpoints from your pages custom width.

  • Editing PHP, ASP and ERB templates

    PHP, ASP and ERB HTML templates are server-side code files that contain valid HTML layouts with dynamic PHP, ASP and ERB tags. Starting from Pinegrow 2.4 (2.95 for ASP and ERB) you can visually edit them in Pinegrow Web Editor.

  • Working with partials

    Partials are HTML documents that contain only a part of the complete page. Partials are usually used with web apps where the app logic dynamically constructs the page.

  • How to add Contact forms, surveys and more with Wufoo

    If you want to include a form on your site, you can use PHP email scripts (there is one included with Bootstrap Blocks) or use Wufoo, a form designer that can help you create contact forms, online surveys and invitations so you can easily collect the data, registrations and payments you need.

  • Pinegrow + Atom = The Perfect IDE for the Web

    Now you can use Atom and Pinegrow together: code parts that are easier to code in Atom and use Pinegrow’s powerful tools to work with HTML structure, Bootstrap, WordPress, master pages, components and so on.