Skip to content
pinegrow.com
Docs menuPanels & Tools
Panels & Tools

HTML snippets

Updated

Add any HTML element into a custom snippet library and reuse it on the same page, on other pages and even in other projects.

On this page

NotePinegrow PRO also lets you create auto-updatable smart components with editable areas.

Snippets are listed in the Library panel.

Creating a HTML snippet

To create a snippet just select the element on the page, click open the element context menu and then “Add as HTML snippet”.

Context menu on the div.col-md-4 element with the Add as HTML snippet option highlighted under the Actions list.
Add the element as a snippet.

Another way to add a snippet to an existing library is to click on library’ name in the Library panel and choose Add as HTML snippet. Selected element will be added to the library.

This will create a new library in the Library panel and add the first snippet.

Library panel with a Snippets section under User Lib showing a saved snippet named Comp 1 / Column, with a callout labeled "Snippet".
Snippet in the Library panel.
Snippets section under User Lib with its menu open, listing Add as HTML snippet, Save and Save as, with a callout to click the library name.
Another way to create a snippet.

Inserting snippets to the page

Drag components to the page just as you would drag any other element from the Library panel.

Right-click on the snippet in the Library panel to rename it, delete it or update it with the content of the currently selected element.

Context menu for a saved HTML snippet with insert options such as Append to h2.text-center and HTML Snippet actions Rename, Update and Delete.
Editing the snippet.

Saving the snippet library

If you want to keep the library you have to save it. Click on the library name to do that.

User Lib menu under Snippets with Save highlighted, next to the options Add as HTML snippet and Save as.
Save the snippet library.

Activating snippet libraries

Use “Manage libraries & plugins” (in File and Page menu) to select which libraries are active for the selected page. Pinegrow remembers the settings.

Libraries and Plugins Manager for pinepoems.html listing several libraries, including PinePoems and User Lib, each with Activate or Unload actions.
Manage snippet libraries.

Once you created a library you can use it on any page you want. Just go to “Manage libraries & plugins” for that page and activate the library.

NoteUse “Load plugin” if you need to load the snippet library. Don’t use “Load library”, that refers to Pinegrow PRO smart component libraries.

Behind the scenes

Libraries are saved as Javascript files that are loaded as Pinegrow plugins. That means that you can edit libraries as you would any other Javascrip file (but be careful, at the moment only components, their names and codes can be edited - other stuff will get overwritten when you save a library from Pinegrow).