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>

test message

`, 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': {},
      '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

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
```js
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.

GrapesJS / grapesjs

Import and export templates help please #2791

test message