Templatical Studio

Drag-and-drop email editor, JSON templates, MJML output, merge tags and blocks for every inbox live.

Templatical Studio — drag-and-drop email editor, JSON templates, MJML output, merge tags and blocks for every inbox live

How to use Templatical Studio

Add blocks from the 14 built-in types, reorder them, and edit the selected block in the side panel
Set a display condition on any block to wrap it in MJML if-guards for a recipient segment
Preview the email with merge tags resolved to their samples, then open the MJML and JSON tab
Copy or download the MJML for any MJML compiler, or download the JSON template for the renderer
Use the install snippet to mount the real Vue editor in React, Svelte, Angular or vanilla JS

Built on the real templatical/sdk repo (FSL-1.1-MIT, 528 stars) with its exact 14 built-in block types
Column layouts verbatim from the renderer: 1, 2, 3, 1-2 and 2-1 with the repo width percentages
MJML output following the repo renderers: mj-text, mj-image, mj-button, mj-divider, mj-spacer, mj-social, mj-section
Video thumbnails ported from the renderer: YouTube maxresdefault and Vimeo vumbnail derivation rules
Merge tags in handlebars, liquid and JS syntax with sample resolution and display-condition guards
Honest scope: JSON templates and MJML run in the browser, the Vue canvas and Cloud AI need a host app

Yes, unlimited.