Issue #2791✓ SolvedOpened May 20, 2020by MarlonV1234 reactions

Import and export templates help please

快速解答by Ju99ernaut❤ 4

At the bare minimum you need commands for saving the templates and opening a modal that shows the saved templates, and to handle loading a template onto the editor. To save a template using local storage you can use something like To open a modal with the templates you can use To load a template you can use something...

Read full answer below ↓

Question

Good morning, please I need help to create templates and then load them, I really cannot do anything, I want to be able to save templates, later load them, I have been days without trying, I am new to programming I have followed everything to the letter , and really the only thing that I am missing are the templates please if you can help me, I will be very grateful to you.

const LandingPage = { html:<!DOCTYPE HTML><html></head><body><h1>test message</h1></body></html>`, css: null, components: null, style: null, };

  const editor = grapesjs.init({
    components: LandingPage.components || LandingPage.html,
    // We might want to make the same check for styles
    style: LandingPage.style || LandingPage.css,
    showOffsets: 1,
    noticeOnUnload: 0,
    container: '#gjs',
    height: '100%',
    dragMode: 'absolute',
    fromElement: true,
    allowScripts: 1,
    storageManager: {
      id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
      type: 'local',          // Type of the storage
      autosave: false,         // Store data automatically
      autoload: false,         // Autoload stored data on init
      stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
      storeComponents: true,  // Enable/Disable storing of components in JSON format
      storeStyles: true,      // Enable/Disable storing of rules in JSON format
      storeHtml: true,        // Enable/Disable storing of components as HTML string
      storeCss: true,         // Enable/Disable storing of rules as CSS string
      urlStore: '/plant',
      urlLoad: '/plant',
      params: {},   // For custom values on requests
    },
    plugins: ['gjs-preset-webpage', 'grapesjs-tui-image-editor','gjs-component-countdown','grapesjs-lory-slider',
              'grapesjs-tabs','grapesjs-tooltip','grapesjs-custom-code','gjs-social','gjs-modal','grapesjs-typed',],
    pluginsOpts: {
      'gjs-preset-webpage': {},
      'grapesjs-tui-image-editor': { some: 'value' },
      'gjs-component-countdown': {},
      'grapesjs-lory-slider': {},
      'grapesjs-tabs': {},
      'grapesjs-tooltip': { some: 'value' },
      'grapesjs-custom-code': {},

代码片段TEXT

'gjs-social': {},
          'gjs-modal': { 'includeExternalLinks' : true },
          'grapesjs-typed': {},
        }
      });

      // Add the button
      editor.Panels.addButton('options', [{
        id: 'save-db',
        className: 'fa fa-floppy-o icon-blank',
        command: 'save-db',
        attributes: {title: 'Save DB'}
      }]);

      // Add the command
      editor.Commands.add
      ('save-db', {
          run: function(editor, sender)
          {
            sender && sender.set('active'); // turn off the button
            editor.store();
          }
      });

      editor.on('storage:load', function(e) { console.log('Loaded ', e);});
      editor.on('storage:store', function(e) { console.log('Stored ', e);});
`

I don't know what to do to do to create a button where the created templates are displayed or where they are saved or anything :( I want everything to be locally on my computer

Answers (1)

👍 Most helpfulJu99ernaut• May 25, 2020

At the bare minimum you need commands for saving the templates and opening a modal that shows the saved templates, and to handle loading a template onto the editor.

To save a template using local storage you can use something like

let template = ""; //Use this to set the template name, you could set this value to listen to an input field

editor.Commands.add('save-template', {
   run: function(editor, sender)
   {
      sender && sender.set('active'); // turn off the button
      let components = editor.getComponents();
      let style = editor.getStyle()
      let templateData = {
         components: components,
         style: style
      };
      localStorage.setItem(template, JSON.stringify(temlateData));
   }
});

To open a modal with the templates you can use

const modal = editor.Modal;

cmd.add('open-templates-modal', {
   run: function(editor, sender)
   {
      sender && sender.set('active'); // turn off the button
      modal.setTitle('<div>Choose Template</div>');
      modal.setContent(/*Place your templates here*/);
      modal.open();
      modal.getModel().once('change:open', function () {
         //do stuff before modal open
      });
   }
});

To load a template you can use something like

//given that each template is represented by an element with class gjs-template 
document.getElementsByClassName('gjs-template').addEventListener('click', e => {
   //given that each element representing a template has a data attribute that is it's key in local storage
   let templateData = JSON.parse(localStorage.loadItem(e.currentTarget.dataset.name));
   editor.setComponents(templateData.components);
   editor.setStyle(templateData.style);
   modal.close();
});

All you have to do now is find a way of making the visual representation of the templates i.e. what goes in modal.setContent.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →

Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

预设插件组成部分方块资产指挥 I18n 层次风格存储 RTE 通讯网页场地建设者

Import and export templates help please

Question

Answers (1)

Related Questions and Answers

How to trigger the 'Import Template (modal)' on page load

FEAT: Create the canvas from a URL

custom component save

Want to replace wrapper div

Paid Plugins That Match This Issue

Related tutorials

How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services

Embed GrapesJS in Your SaaS: A Weekend Guide

GrapesJS vs Webflow vs Builder.io vs Puck: Which Visual Builder to Choose in 2026

Browse Plugin Categories