Add your own components to reusable library

NOTE: This feature was renamed from components to HTML Snippets to avoid confusion with new Smart components.

Now you can add any HTML element into a custom snippet library and reuse it on the same page, on other pages and even in other projects. This is a great way to save hours and hours of your time!

To create a snippet just select the element on the page, click Actions and then Add as HTML snippet. This will create a new library in LIB panel and add the first snippet.

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

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

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

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

Use Manage frameworks (in File and Page menu, as well as cog icon next to the search bar in LIB panel) to select which libraries are active for the selected page. Pinegrow remembers the settings.

Once you created a library you can use it on any page you want. Just go to Manage frameworks for that page and activate the library.

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