https://github.com/templatical/sdk

Open-source drag-and-drop email editor. JSON templates, MJML rendering, framework-agnostic. Vue + TipTap inside.
https://github.com/templatical/sdk

beefree-alternative drag-and-drop email email-builder email-editor email-templates mjml template-editor tiptap typescript vuejs wysiwyg

Last synced: 27 days ago
JSON representation

Open-source drag-and-drop email editor. JSON templates, MJML rendering, framework-agnostic. Vue + TipTap inside.

Host: GitHub
URL: https://github.com/templatical/sdk
Owner: templatical
License: other
Created: 2026-03-24T21:57:56.000Z (3 months ago)
Default Branch: main
Last Pushed: 2026-05-26T09:34:27.000Z (about 1 month ago)
Last Synced: 2026-05-26T10:22:58.710Z (about 1 month ago)
Topics: beefree-alternative, drag-and-drop, email, email-builder, email-editor, email-templates, mjml, template-editor, tiptap, typescript, vuejs, wysiwyg
Language: TypeScript
Homepage: https://templatical.com
Size: 4.76 MB
Stars: 290
Watchers: 1
Forks: 13
Open Issues: 7
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md

Awesome Lists containing this project

stars - templatical/sdk - Open-source drag-and-drop email editor. JSON templates, MJML rendering, framework-agnostic. Vue + TipTap inside. (TypeScript)

README

          


  



Templatical




  Open-source drag-and-drop email editor for modern apps





  

  

  

  

  





  Playground ·

  Documentation ·

  Website ·

  Discussions





  

    

  





  ▶ Try it live in the playground



---

**Templatical** is a production-ready drag-and-drop email editor you can drop into any web app with a single function call. Templates are portable JSON, output is MJML (so they render correctly in every email client), and the editor itself is framework-agnostic — Vue under the hood, but you embed it in React, Svelte, Angular, or vanilla JS the same way. An optional Cloud tier is in development for AI rewrites, real-time collaboration, comments, snapshots, saved modules, multi-tenancy, test email sending, MCP support, and more.

## Power features

Things that are usually paid features in commercial editors — open-source in Templatical:

- **Custom blocks with API-backed data sources** — register your own block types whose content is rendered from a static template *or* fetched live from your API at preview time. Typically a paid-tier feature in commercial editors.

- **Merge tags with pluggable syntax** — `{{handlebars}}`, `{liquid}`, `${js}`, or your own — with automatic human-readable label replacement directly in the editor canvas. Build your CRM-aware tag picker in minutes.

- **Display conditions** — show/hide blocks based on recipient attributes, with live preview in the editor.

- **Full theming via design tokens** — 27 OKLch tokens, custom fonts, dark mode, complete theme overrides. No CSS hacking, no paid tier.

- **Template & block defaults** — define your brand once. New templates and new blocks pick up your brand automatically.

> **Cloud features** — AI rewrite, AI chat, real-time collaboration with block locking, comments, snapshots and version history, saved modules, hosted media library, template scoring, test email sending, MCP integration, multi-tenancy, headless API, and more — are part of the Templatical Cloud tier currently in development. The Cloud implementation is also open code in `@templatical/core/cloud`. [Learn more about Cloud →](https://docs.templatical.com/cloud/)

### And more

- **Drop-in mount** — one `init()` call, one `unmount()`. No framework lock-in.

- **Style-isolated, both directions** — Shadow DOM by default keeps host CSS out of the editor; `tpl:` Tailwind prefix and no preflight reset keep editor styles out of your app. Drops into any page, any framework, any CMS — no resets, no conflicts. [Learn more →](https://docs.templatical.com/guide/shadow-dom)

- **14 block types** — Title, Paragraph, Image, Button, Section, Divider, Spacer, Social Icons, Menu, Table, HTML, Video, Countdown, Custom.

- **JSON templates** — portable, versionable, store anywhere, render anywhere.

- **MJML output** — works with any email provider (Postmark, Resend, SES, Mailgun, anything).

- **Framework-agnostic** — first-class examples for React, Vue, Svelte, Angular, vanilla.

- **Bilingual** — en/de built in, easy to add more locales.

- **TypeScript strict** — full types for blocks, config, and callbacks.

- **Battle-tested** — ~1,400 unit tests + Playwright E2E coverage.

## Quick Start

```bash

npm install @templatical/editor @templatical/renderer

```

```js

import { init } from '@templatical/editor';

import '@templatical/editor/style.css';

const editor = await init({

  container: '#editor',

  onChange(content) {

    // content is JSON — store it, version it, send it anywhere

    console.log('Template updated:', content);

  },

});

// Render to MJML when you're ready to send

const mjml = await editor.toMjml();

```

```html



```

[Read the full guide →](https://docs.templatical.com/getting-started/quick-start) · [React, Svelte, Angular examples →](https://docs.templatical.com/getting-started/installation)

## Packages

| Package | Description | License |

|---------|-------------|---------|

| [`@templatical/editor`](https://www.npmjs.com/package/@templatical/editor) | Visual drag-and-drop editor | [FSL-1.1-MIT](./LICENSE) |

| [`@templatical/core`](https://www.npmjs.com/package/@templatical/core) | Framework-agnostic editor logic, state, history | [FSL-1.1-MIT](./LICENSE) |

| [`@templatical/media-library`](https://www.npmjs.com/package/@templatical/media-library) | Media library — composable, components, standalone SDK | [FSL-1.1-MIT](./LICENSE) |

| [`@templatical/types`](https://www.npmjs.com/package/@templatical/types) | Shared TypeScript types and block factories | [MIT](./LICENSE-MIT) |

| [`@templatical/renderer`](https://www.npmjs.com/package/@templatical/renderer) | JSON → MJML → HTML renderer (browser + Node) | [MIT](./LICENSE-MIT) |

| [`@templatical/quality`](https://www.npmjs.com/package/@templatical/quality) | Accessibility linter for templates (browser + Node) | [MIT](./LICENSE-MIT) |

| [`@templatical/import-beefree`](https://www.npmjs.com/package/@templatical/import-beefree) | Convert BeeFree templates to Templatical format | [MIT](./LICENSE-MIT) |

| [`@templatical/import-unlayer`](https://www.npmjs.com/package/@templatical/import-unlayer) | Convert Unlayer templates to Templatical format | [MIT](./LICENSE-MIT) |

| [`@templatical/import-html`](https://www.npmjs.com/package/@templatical/import-html) | Convert HTML email templates (table-based) to Templatical format | [MIT](./LICENSE-MIT) |

## Why FSL-1.1-MIT?

Editor packages (`@templatical/editor`, `@templatical/core`, `@templatical/media-library`) are licensed under [Functional Source License 1.1](./LICENSE), which automatically converts to MIT after **2 years per release**. You can:

- ✅ Embed it in your SaaS, CRM, marketing tool, or transactional product

- ✅ Self-host, modify, fork for internal use

- ✅ Use it commercially without paying anything

The only restriction: don't repackage Templatical itself as a directly competing email-editor product. Renderers, types, and importers are pure MIT.

[Full license FAQ →](https://docs.templatical.com/license-faq)

## Documentation

- [Getting Started](https://docs.templatical.com/getting-started/quick-start) — install, mount, render

- [Block Reference](https://docs.templatical.com/guide/blocks) — all 14 block types

- [Theming](https://docs.templatical.com/guide/theming) — design tokens, dark mode, custom fonts

- [Custom Blocks](https://docs.templatical.com/guide/custom-blocks) — extend with your own

- [Cloud (AI, Collab, Comments)](https://docs.templatical.com/cloud/) — optional managed tier

- [Migrating from BeeFree](https://docs.templatical.com/guide/migration-from-beefree)

- [Migrating from Unlayer](https://docs.templatical.com/guide/migration-from-unlayer)

- [Migrating from HTML](https://docs.templatical.com/guide/migration-from-html)

Full docs: **[docs.templatical.com](https://docs.templatical.com)** (English + Deutsch).

## Contributing

Contributions, bug reports, and feature requests are welcome.

```bash

git clone https://github.com/templatical/sdk.git

cd sdk

pnpm install

pnpm run build

pnpm run test

```

See [CONTRIBUTING.md](./CONTRIBUTING.md) for the full guide.

## Sponsors

Templatical is built and maintained by a solo developer. If your company uses it in production, consider [sponsoring on GitHub](https://github.com/sponsors/orkhanahmadov) — it directly funds new features, faster releases, and continued open development.

## License

- **Editor packages** (`@templatical/editor`, `@templatical/core`, `@templatical/media-library`) — [FSL-1.1-MIT](./LICENSE)

- **Types, renderer, importers** — [MIT](./LICENSE-MIT)

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/templatical/sdk

Awesome Lists containing this project

README

Templatical