Appearance

Changelog - January, 2026 ​

New Features ​

Programmatic Template Updates ​

You can now programmatically replace the entire email template at runtime using the new updateTemplate function. Unlike the load function used during initial template loading, updateTemplate is designed for in-session updates while the editor is active. It automatically validates the template against Topol's schema, creates an undo snapshot (configurable), and marks the template as edited.

Why It Matters ​

Programmatic Template Updates enable real-time template synchronization with external systems, collaborative editing workflows, and automation-driven content changes — all without requiring manual user interaction. The built-in undo snapshot support ensures that programmatic changes remain reversible, giving end users full control over their editing history. Error handling via onError and confirmation via onTemplateUpdated callbacks provide clear feedback for robust integration.

How To Enable ​

The updateTemplate function is available on the TopolPlugin instance and accepts a template object or JSON string:

js
window.TopolPlugin.updateTemplate(templateJson);

To skip undo snapshot creation (e.g., when syncing with external state), pass the skipSnapshot option:

js
window.TopolPlugin.updateTemplate(templateJson, { skipSnapshot: true });

For full details, please refer to the documentation.

Dark Mode Email Preview ​

We've added a built-in dark mode preview that lets you see how your email template will likely appear when viewed in dark mode on recipient devices. A dedicated toggle in the editor's Preview mode applies an approximation of the color transformations that email clients perform when rendering emails in dark mode.

Why It Matters ​

Most major email clients (Gmail, Outlook, Apple Mail, Yahoo Mail, etc.) implement their own dark mode rendering, often transforming backgrounds, text colors, and images in ways that can break carefully designed layouts. Dark Mode Email Preview gives content creators immediate visual feedback during development, eliminating the need to send test emails and check them across multiple clients just to verify dark mode compatibility.

How To Enable ​

Enable the feature by adding the following option to your TOPOL_OPTIONS configuration:

ts
enableDarkMode: true,

For full details, please refer to the documentation.

Synced Sections ​

We've introduced Synced Sections — a new way to reuse content across multiple email templates while keeping it automatically synchronized. Unlike regular saved blocks, which create independent copies when inserted, synced sections maintain a live connection to every template where they're used. Editing a synced section updates it everywhere, ensuring consistent content across your entire email program.

Why It Matters ​

Teams that manage recurring content — such as headers, footers, legal disclaimers, or branded sections — often need to update the same element across dozens of templates. With regular saved blocks, each instance is a separate copy that must be updated individually. Synced Sections eliminate this overhead by propagating changes automatically, reducing manual effort and minimizing the risk of outdated or inconsistent content reaching recipients.

How To Enable ​

Enable synced sections by setting syncedSectionsEnabled to true in your TOPOL_OPTIONS configuration:

ts
syncedSectionsEnabled: true,

Once enabled, users can save structures as synced by clicking "Save as Synced structure" in the section actions menu. To programmatically refresh the synced sections listing and reload the template with the latest changes, call:

js
TopolPlugin.refreshSyncedSections();

For full details, please refer to the documentation.

Improvements ​

Tiptap Text Editor ​

We've introduced Tiptap as an alternative text editor for editing text blocks. Tiptap is a lightweight, modern editor that provides a streamlined editing experience as an alternative to the default TinyMCE editor.

Tiptap offers a cleaner, more minimal interface that can reduce visual clutter and improve focus during content editing. By providing a choice between TinyMCE and Tiptap, you can select the editor that best fits your users' workflows and preferences.

Set the textEditor option to "tiptap" in your TOPOL_OPTIONS configuration:

ts
textEditor: "tiptap",

For full details, please refer to the documentation.

Option to Hide Pexels Integration ​

You can now hide the built-in Pexels stock photo integration from the File Manager. By setting hidePexelsIntegration to true in the fileManagerPreferences configuration object, the Pexels option is removed from the File Manager interface, giving you full control over which image sources are available to your users.

For full details, please refer to the documentation.

API-Based Configuration for Saved Blocks and Synced Sections ​

Saved blocks and synced sections now support a fully API-based configuration. By setting savedBlocks to true and configuring the API.SAVED_SECTIONS endpoint, you can store and manage all saved blocks and synced sections on your own server with support for folders, search, pagination, and preview images.

ts
const TOPOL_OPTIONS = {
  savedBlocks: true,
  syncedSectionsEnabled: true,
  api: {
    SAVED_SECTIONS: "https://your-domain.com/saved-blocks",
  },
};

Both saved blocks and synced sections use the same endpoint, differentiated by the type field in API responses and requests. For full details, please refer to the documentation.

Multilingual Preheader Support ​

Preheader text in multilingual templates is now language-specific. Each language mutation can have its own unique preheader text, instead of sharing a single preheader across all language versions. This ensures that the preview text recipients see in their inbox accurately matches the language of the email content.

Bugfixes ​

  • Resolved an issue where the editor failed to load in Django-based applications due to Django's default same-origin referrer policy stripping the parent page's origin from document.referrer, causing the authorization payload to omit the required hostname.