Skip to content

Loading and saving Template

When working with Topol Editor, the templates are always managed on your system. Topol does not store any template data and never will.

We can examine the diagram below to get a better idea of how the data flows.

Loading template

Topol exposes a handful of functions in its TopolPlugin instance, which is added to the window object. One of the exposed methods is the load method.

In this example, we assume that we are working with an existing template, and you are attempting to load the template in a JSON format.

ts
const template = "..."; // template obtained from your system

window.TopolPlugin.load(template);

Saving template

Before we get to the code, we should know when the saving is actually called. One of the simplest ways is to use our Top bar, where the save button is already present. When users interact with the button, the onSave callback is triggered, and we can retrieve the template in JSON and HTML formats.

ts
const TOPOL_OPTIONS = {
  id: "#app",
  authorize: {
    apiKey: "YOUR_API_KEY",
    userId: "UserID",
  },
  callbacks: {
    onSave: function (json, html) {
      // Here we would typically save the json and html to the system
    },
  },
};