Topol Email Editor vs. Topol Landing Page Editor

Topol Plugin comprises two editors built on the same integration model. The Email Editor produces email templates; the Landing Page Editor produces web pages. Both are embeddable, white-label drag-and-drop editors that run in an iframe, authenticate with the same domain-restricted API token, and hand the result to your application as JSON and HTML.

The choice usually follows from what your users publish. A product whose users design campaigns and newsletters calls for the Email Editor. A product whose users build pages that live at a URL calls for the Landing Page Editor. Many products embed both, since a campaign and the page it links to are usually designed by the same person. This page covers the technical differences.

INFO

The Landing Page Editor is in beta. Features and configuration options may still change.

At a glance

	Email Editor	Landing Page Editor
Output	Email-client-safe HTML, MJML-rendered	Responsive HTML page
Loader	v3.email-assets.topol.io/loader/build.js	v1.page-assets.topol.io/topol-lpe.js
Initialization	TopolPlugin.init(TOPOL_OPTIONS) global	LandingPageEditor() factory, then render()
Callbacks	Inside a callbacks object in the options	Top-level properties next to config
Template JSON	Email schema, loads only in the Email Editor	Page schema, loads only in the Landing Page Editor
Conversion API	POST /email/v1/json2html, X-Secret-Key header	POST /landing-page/get-html, API key in the body
Status	Generally available	Beta

What each editor produces

The Email Editor renders for inboxes. Its output is HTML built to survive email clients, produced through MJML rendering, and its feature set follows from that medium: merge tags, conditional content, multilingual templates, subject line handling, and test sends.

The Landing Page Editor renders for browsers. Its output is a responsive HTML page meant to be published at a URL, with page-level concerns the email side has no use for: meta title, description, and keywords (with optional AI generation), device-size previews, and content locking by role.

The two template JSON schemas are different and not interchangeable. An email template does not load in the Landing Page Editor and a page does not load in the Email Editor. Plan separate storage for each, keyed by which editor produced the template.

Integration differences

Both editors follow the same pattern: a loader script, a container element, a configuration object, and callbacks that return the result. The API shapes differ enough that code is not copy-paste portable between them.

The Email Editor is driven through a global. The loader exposes TopolPlugin on window, options and callbacks travel together in one TOPOL_OPTIONS object, and callbacks live in a callbacks sub-object:

const TOPOL_OPTIONS = {
  id: "#app",
  authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
  callbacks: {
    onSave(json, html) { /* ... */ },
  },
};

TopolPlugin.init(TOPOL_OPTIONS);

The Landing Page Editor is driven through an instance. The LandingPageEditor() factory takes the options under a config key with callbacks as top-level siblings, and returns the instance your application calls methods on:

const LPE = LandingPageEditor({
  config: {
    authorize: { apiKey: "YOUR_API_KEY", userId: "user-123" },
  },
  onSave(json, html) { /* ... */ },
});

LPE.render("#landing-page-editor");

The same split runs through the runtime methods: the Email Editor's live on the TopolPlugin global, the Landing Page Editor's on the LPE instance. Each editor's methods reference lists its own set, and option names overlap only partially, so check the options reference rather than assuming an email option carries over.

What works the same

The account, the token, and the data model are shared. One API token from your Topol account authorizes both editors on its allowed domains. Neither editor stores templates on Topol's side; both hand the JSON and HTML to your application through onSave and leave storage, access control, and versioning to you. Images uploaded through either File Manager go to Topol storage by default under the same monthly data traffic allowance, and both editors can route uploads to your own infrastructure instead.

The collaboration model is shared too. Both ship comments and autosaves as built-in UI backed by endpoints you implement, so the backend work you do for one editor closely mirrors what the other needs, even though the exact request shapes differ.

Conversion APIs

Both products expose a REST endpoint for rendering a template's JSON into HTML server-side, and the two differ in authentication. The Email Editor's JSON to HTML endpoint authenticates with the X-Secret-Key header. The Landing Page Editor's JSON to HTML endpoint carries the API key and hostname in the request body, validated against the token's allowed domains.

Which one to choose

Choose the Email Editor when your users design emails: campaigns, newsletters, transactional templates. It is the mature product with the larger feature set.

Choose the Landing Page Editor when your users build pages that live on the web, and you are comfortable with a beta: the integration model is stable, but options may still change.

Choose both when campaigns and their target pages are designed in your product side by side. The shared account, token, and integration pattern keep the second editor much cheaper to add than the first.

Getting Started walks through a first Landing Page Editor integration. For help deciding, contact our team.