I know each framework has its pros/cons, opinionated in a certain way. Vue is my favorite.

TipTap was the easy half. It's basically the go-to option when a good WYSIWYG editor is needed.

GrapesJS is the forever OG that proved this whole space could be an embeddable SDK rather than a paywalled SaaS. It also standardized the palette/canvas/inspector layout that every serious visual builder now ships by default — including Templatical. I took direct inspiration from a few other patterns too: the block-as-first-class-citizen model, and the trait system, which maps almost 1:1 to how Templatical's custom blocks expose typed fields into the inspector.

And yeah — agreed on MJML. Building email layouts that work for most clients is notoriously hard. I think the people who built MJML absorbed an enormous amount of pain so the rest of us don't have to.

Huge respect for what you built.

I'd love to hear your feedback on what worked and what didn't. Feel free to open an issue or start a discussion on GitHub.

And yeah — at this stage every star is statistically significant, so anyone reading: appreciated.

If your team gives it a spin, I'd genuinely love their feedback.

If you ship your app with it, send a link — happy to feature it on the showcase page. Also, if you have existing HTML-based templates, try the @templatical/import-html package to convert them to Templatical JSON true — should get you a reasonably close starting point.

No — built from scratch on Vue 3 + TipTap, no React anywhere. Output is MJML, not the React-component-to-HTML approach React Email takes.

Adjacent category but no shared foundation: React Mail is a code-first library for devs to write emails as components; Templatical is an embedded visual editor for marketers to build them without touching code.

1. Custom block extensibility: full. You define a custom block as a schema — typed fields displayed in the editor (text, textarea, image, color, number, select, boolean, repeatable that contains basic fields) plus a Liquid template that emits HTML using those field values. The editor auto-renders the form for marketers to fill in, then runs the Liquid against those values to show a live preview on the canvas — so consumers don't write a Vue component themselves. The renderer wraps that HTML in , so it still goes through MJML's table layer for cross-client rendering. Optional dataSource.onFetch lets the block hit your API at render time, so use user can fetch custom block contents from existing data source — instead of having to manually type values into every field. Check out the docs and playground for custom blocks usage.

2. Headless render path: that's exactly what @templatical/renderer is. Separate package, zero UI dependency, pure JSON -> MJML conversion. You store the JSON tree in your storage; on the backend you pass it to renderToMjml() and get MJML back. Since MJML has compiler libraries in almost every language, you compile MJML to HTML yourself whenever. Currently the renderer is TypeScript-only (browser + Node.js); porting to other languages as first-party packages is on the roadmap.

The whole shape — store JSON in your DB, render at send time on your server, send via your own provider — is the transactional flow you described.

The cross-client rendering thing is why Templatical outputs MJML instead of raw HTML. MJML was built to abstract all the table-based, Outlook-2007-quirks, Gmail-strips-style nonsense — you write semantic blocks, MJML compiles to table HTML that works across every major email client. So when your marketing person moves a block or changes a button color, it doesn't silently break in Outlook two weeks later.

On sustainability — same concern. Even while I was building it, multiple times I caught myself asking "is this even worth theeffort? Maybe not with all the functionalities I've built, but someone could vibe-code a lightweight version of it in a day." But at the same time, I see and personally used SaaS products with the same or fewer features selling for $2,500/mo, which seems ridiculous.

I'm currently working on a subscription-based Cloud version, but only for things that actually need an infrastructure and backend: AI chat/rewrite, image-to-template conversion, MCP integration, hosted media gallery, saved modules, commenting, real-time collab, email testing, version history, etc. Sending stays your own provider — no per-contact, per-email, or per-delivery charges.

GrapesJS — the OG embeddable visual builder. Yes, I like it. I haven't used it recently, but I built production landing-page builders on top of it a while back.

I saw they also have an email builder now and checked it just now. Looks and works fine, but you can tell it's a retrofitted approach from a landing-page builder. With Templatical I wanted to build something from the ground up, email-only.

I was considering IntroJS, but Claude Code generated a simpler version in ~120 lines — just @vueuse/core helpers (useLocalStorage, useIntervalFn) and focus-trap, no tour library.

The SDK is fully client-side — it runs in your app, the JSON templates go wherever you decide to store them (your DB, S3, anything). Nothing touches my infrastructure. SDK also has zero telemetry.

The Cloud tier on the roadmap (AI rewrite, real-time collab, MCP, saved modules, media library, comments) is opt-in — you only hit it if you actively sign up.

I can't directly compare it with Maily, but what I see from first glance is that it is a minimalist email template editor that gets the job done. Please correct me if I'm wrong.

Beefree and Unlayer are paid services that offer powerful features like custom blocks, merge tags, display conditions, theming. The catch is most of those features sit behind enterprise tiers, and you're tied to their cloud render API to get HTML out.

Templatical aims for that same feature set, open-sourced and self-hostable. No vendor render API — output is MJML, which is battle-tested across the major email clients.

Check out the playground — it has templates showcasing different features. See if it suits your use case.

Comments URL: https://news.ycombinator.com/item?id=48038019

Points: 157

# Comments: 44