Template Picker

In this example, we will show a few templates to the user so they can choose one and start editing.

Choose a Template

JavaScript

In the JavaScript, we will define a loadTemplate function that will simply load the design JSON based on the template id. You can modify this logic to match your application requirement.

unlayer.init({
  id: 'editor-container',
  displayMode: 'email',
});

function loadTemplate(id) {
  if (id == 1) {
    unlayer.loadDesign({
      /* design json here */
    });
  }

  if (id == 2) {
    unlayer.loadDesign({
      /* design json here */
    });
  }

  if (id == 3) {
    unlayer.loadDesign({
      /* design json here */
    });
  }
}

HTML

Next, we'll add the HTML to show the templates and their image previews.

Template Management

If you save the templates in your own database, you can simply query them from your database. Otherwise, if you use our dashboard to save and manage the templates, you can fetch them using our REST API. Check out the docs for template management.

Image Previews

You can use our Export API to generate an image for your designs or templates.

<div id="templates">
  <a class="template" onClick="loadTemplate(1)">
    <img src="..." />
  </a>

  <a class="template" onClick="loadTemplate(2)">
    <img src="..." />
  </a>

  <a class="template" onClick="loadTemplate(3)">
    <img src="..." />
  </a>
</div>

<div id="editor-container"></div>