The editor: blocks, structure and preview
How the block canvas, structure tree and live preview fit together.
Three panels, one document
Every newsletter you build in Sumezi is one underlying document: a list of blocks, each with a type and its own properties. The editor just gives you three ways to look at and change that document at once — a block palette on the left, a live canvas in the middle, and a properties panel on the right.
The left panel has two modes, switched with the two icons at its top: Blocks, a grid of draggable tiles grouped into Layout, Content, Brand & navigation and Advanced; and Outline, a tree view of the document you're currently editing. Drag any tile onto the canvas — a dashed line shows exactly where it'll land, including inside a Section.
Tip: the canvas is what you're actually building — properties panel edits and drag-and-drop both write straight into the same document, live.
The structure tree
Switch the left panel to Outline and you get a flat list of every block in document order, each with its type's icon and label. Blocks placed inside a Section appear nested underneath it. Click any row to select that block — it highlights on the canvas and its properties open on the right, exactly as if you'd clicked it directly.
Sections can hold any other block type, but not another Section — drag one section tile into another and the editor blocks the drop with a toast instead of nesting it.
Selecting and editing a block
Click a block on the canvas and it gets a highlighted outline plus a small floating toolbar: a drag handle, move up/down, duplicate and delete. Its properties then fill the right-hand panel — a text block gets text, size, alignment and color; a button gets a label, link, alignment, background/text color and corner radius; and so on. Nothing is generic — the panel only shows fields that make sense for the selected block's type.
The panel has a second tab, Global styles, that's not about the selected block at all: accent color, body background, heading/body font and content width, applied live to the whole canvas and shared across every template in this workspace.
Preview modes are simulations, not separate files
The device toggle switches the canvas frame between desktop width (your content width, 600px by default) and a fixed 375px mobile width. Dark mode and Outlook are a separate, mutually exclusive pair: Outlook adds a blue simulated top bar and switches the preview to a serif stack with square button corners, the way Outlook's own rendering engine ignores border-radius; dark mode remaps the specific colors the compiler uses so you can sanity-check contrast.
None of this changes what gets sent. Every recipient gets the exact same compiled HTML — these toggles only change how the editor renders that same HTML for you to check, not what Sumezi generates.
Undo, redo and saving
Ctrl/Cmd+Z undoes, Shift+Ctrl/Cmd+Z redoes — or use the two buttons at the top left. History is a 50-step stack, and a burst of fast edits (like typing a sentence) is coalesced into a single undo step about half a second after you stop, so you don't need 40 undos to walk back one paragraph. The save-status pill next to it switches to "Saving…" and writes your change about 1.2 seconds after you stop editing.
Common mistakes
- Forgot a Footer block: if your document has none, one gets silently added at compile time with a blank brand name and address — add your own Footer block so subscribers see your real details.
- Test email does nothing: the Test button needs your template saved at least once and a known account email — until then you'll get a toast instead of a send.
- Undo history resets on reload: it lives only in the current browser tab, not on the server — refreshing the page clears it, even though your last saved state is safe.