An embedded editor for composing pages, reusing content and controlling shared styles.
This visual email builder case study covers an editor the client could embed in its own product. Users compose pages and email templates from blocks, edit the text on the canvas and adjust the styles. The surrounding application supplies the content library, the storage and the publishing services.
A structured project format saves the work for later. HTML, CSS and JavaScript exports then give the host the output it needs to publish the result.
The challenge
A shared style and a one-off tweak do very different things. Change a class and several elements move with it. A reusable component can also have copies that carry their own overrides, and those overrides need to survive a change to the original.
Those relationships have to stay intact when a project is saved and reopened. The editor keeps the component model behind the page.
What we built
Users arrange blocks on the canvas and walk through their structure in a dedicated layers tree. Style controls and an asset manager handle the detail around each element. Responsive previews resize the canvas so that each of its media queries takes effect at the right width.
A project can hold several pages and reusable components. When a linked copy updates, the editor checks its overrides before it propagates the change. A copy can be detached to stand on its own. Extension points let the host adapt the panels, the component types and the storage.
Technical approach
Imported HTML becomes a tree of tracked components. CSS rules are stored on their own, and each rule's key comes from its selectors, states and media conditions. A class rule can affect several matching elements, while an identifier-based rule targets a single component. The style interface shows each inherited value and where it came from.
The browser renders the page inside an iframe. Editing overlays sit outside that frame and follow the calculated positions of each element. Component views react to individual property changes, so one interaction does not force a full project rebuild.
Autosave passes the whole JSON project to the storage adapter, and reloading rebuilds the pages and components from it. Concurrent editing and version control stay with the host. Publishing, forms and routing stay there too. A multi-page export also asks the host to pick the pages and manage the shared CSS.
The host has to handle template scripts with care. Neither the iframe nor the parser is a complete boundary for untrusted code on its own.
Project success
The client can offer visual composition while keeping control of storage and publishing. Users keep shared components and instance overrides, and reopen saved projects. The exports make the result available to the surrounding application, and the editor's job ends before runtime behaviour and publishing decisions begin.
Technology stack
Editor implementation
TypeScript, Backbone
Canvas
HTML, CSS, browser iframes
History
Backbone undo support
Code editing
CodeMirror
Persistence and output
JSON project format, HTML/CSS/JavaScript export
Other engagements
Recognize the pattern?
If one of these looks like your situation, the discovery call is where we find out how close.
