Architecture Overview

The Philosophy Behind Immutability

Stripo Editor was designed from day one for multi-user, real-time editing. This enables efficient teamwork without conflicts or data loss. This collaboration model places specific requirements on the editor’s architecture and on how an email template is modified. The system must:

• Distribute changes quickly and reliably to everyone participating in the session;
• Resolve conflicts correctly when multiple users edit the same part of a template at the same time;
• Track a full history of changes—who changed what and when.

Why raw HTML/CSS editing is disabled

To guarantee a consistent result for all users and preserve a verifiable change history, direct editing of HTML and CSS inside the editor is disabled. All modifications are expressed as patches—atomic operations that change structure or content. These patches are broadcast to all participants and applied using a CRDT (Conflict-free Replicated Data Type) algorithm adapted by the Stripo team for HTML/CSS. This ensures that every participant converges to the same state deterministically.

Data model in the Extensions SDK

To prevent accidental direct mutations of the template, the Extensions SDK does not expose the template as DOM elements (HTMLElement). Instead, it uses special, read-only ImmutableNode objects. ImmutableNode lets you inspect structure and properties, but it does not allow direct writes to the template.

// Traditional DOM (NOT supported in extensions)
const element = document.querySelector('.my-element');
element.style.color = 'red';           // ❌ Direct mutation
element.setAttribute('data-id', '123'); // ❌ Direct mutation
element.innerHTML = '<span>New</span>'; // ❌ Direct mutation

// Immutable Node System (REQUIRED in extensions)
const node = this.api.getDocumentRoot().querySelector('.my-element');
const color = node.getStyle('color');     // ✅ Reading is allowed
const id = node.getAttribute('data-id');  // ✅ Reading is allowed
const html = node.getInnerHTML();         // ✅ Reading is allowed
// node.style.color = 'red';              // ❌ This doesn't exist!

How to modify a template correctly

Templates are modified through the "Template Modification System" — a set of safe, editor-validated operations that automatically sync across all participants in a session. Use this system for any changes to an email’s structure or content.