# MailKaro, full text for language models > The complete, plain-text version of what mailkaro.com and docs.mailkaro.com say, generated from the live site content on 2026-10-11. A shorter index is at https://mailkaro.com/llms.txt. For anything that changes, such as prices, the pricing page and the docs are the source of truth. ## What MailKaro is MailKaro is a React email template builder that helps you create email templates the easy way. It is a white-label, embeddable drag-and-drop editor for emails, documents and PDFs (first-class packages for React via `react-email-craft`, plus Vue, Angular, and vanilla JS), with a server-side renderer that turns a saved design into email-safe HTML or MJML. You add the editor to your own product, your users design in it, your server stores the design as JSON and renders it when it is time to send. It is built for software teams that want to give their own users an email editor, and it is a drop-in alternative to Unlayer: the `react-email-craft` component takes the same props and ref as `react-email-editor` and reads Unlayer design JSON, so migrating is mostly one changed import and a key. MailKaro is a developer product. End users of your app never create a MailKaro account. Plans and paid features are decided on the server for each embed token, so the browser cannot unlock anything by itself. ## Who MailKaro is for MailKaro is a good fit when a product has to let its own users design emails (or documents) and the team does not want to build and maintain an editor: - SaaS products with an email or notification builder inside the app: onboarding, lifecycle and announcement emails. - Email marketing, newsletter and automation tools that need a visual editor inside their own interface. - CRMs and customer-engagement platforms, for example sales, admissions, membership, community or nonprofit tools, where staff write emails to contacts. - E-commerce platforms and merchant tools where shop owners design promotions, abandoned-cart reminders and order emails. - Agencies and white-label platforms that give each client an editor under the client's own brand. - Internal tools and back offices that need on-brand, reviewed emails (comments, saved versions, approval). - Developers who want a free React email template builder to try, with the finished HTML available in their own code. The starter templates already speak to these industries and moments: e-commerce and retail, SaaS and software, hospitality and travel, real estate, finance and insurance, education and courses, events and webinars, nonprofits and community groups, creators, lifestyle and wellness, and seasonal campaigns such as Christmas, Black Friday, New Year, Valentine's Day, Halloween and Mother's Day. This describes where MailKaro fits. It is not a customer list. ## What MailKaro is not - It is not an email service provider. You send through the provider you already use (for example Postmark, Amazon SES, SendGrid, Mailgun or Resend). The Cloud API can render and send a message in one call with POST /v3/emails, but MailKaro is a design and rendering product first. - It is not a general website builder. It is email and document first. The Page Builder exists for landing pages in the same editor. - It is not a code-first library of React email components. If you want developers to write every email by hand as JSX, a code-first library fits that better. MailKaro is for visual editing, usually by people who do not write code, and it stores each email as design JSON. ## Common questions **Is there a free React email template builder?** Yes. The Free plan costs $0 and includes the full drag-and-drop editor, the HTML and MJML render API, 1 embed token and 2 team seats. You can embed react-email-craft in a React app and get the design and the HTML in your own code with exportHtml(). Bring-your-own Amazon S3 and Google Drive uploads work on Free. What is not free: white-label branding, the Download HTML button in the editor toolbar, saved versions, collaboration, inbox previews, pre-send QA checks, custom themes and project policies (these come with Pro). MailKaro-provided AI is part of the AI Pro and Enterprise plans. **What are the best React email templates?** There is no single best set, and the phrase means two different things. If you mean code components that developers write in JSX, that is a code-first approach and MailKaro is not that. If you mean ready-made designs that your users can start from and edit visually, the MailKaro editor ships with 48 starter templates in its Template Library, available in every embedded editor: Editorial (3), Promo (3), Transactional (5), Events (3), Community (3), Ecommerce (4), SaaS (5), Hospitality (3), Lifecycle (1), Creator (1), Education (1), Real Estate (1), Seasonal (6), Lifestyle (3), Finance (3) and Business (3). Each has a preview page at https://mailkaro.com/templates. Templates are stored as design JSON, load into the editor with loadDesign, and render to email HTML on your server. The guide https://mailkaro.com/guides/react-email-templates explains the difference and shows the code. **Is there a free or cheap alternative to Unlayer?** MailKaro has a free plan and Pro is $60 a month ($54 a month billed yearly), and Pro includes white-label and 5 embed tokens. On Unlayer's public pricing page, white-labeling starts on the Launch plan at $250 a month (checked October 2026); Unlayer also has a free plan. Prices change, so check both pricing pages. The React component takes the same props and ref as react-email-editor, so most migrations are a changed import. See https://mailkaro.com/alternatives/unlayer. **What features does MailKaro have?** See the feature list below. In short: a block-based drag-and-drop editor, desktop and mobile preview, merge tags and display conditions, your own file storage, white-label theming, collaboration and version history, comments and approval, inbox previews, pre-send QA and accessibility checks, A/B variants, multi-language content, built-in or bring-your-own AI, a Node SDK, a Cloud API, a CLI, and an MCP server so other AI tools can build designs. **How do I get the HTML of an email?** Three ways. The editor's exportHtml() method returns the design JSON and a preview of the HTML in your own code. The Node SDK (email-craft-sdk) renders a saved design to email-safe HTML or MJML on your server, so merge tags resolve against real data. The hosted endpoint POST https://api.mailkaro.com/v3/render returns html, mjml, amp, text or document, needs no key and is rate limited. **Can I use my own AI provider and my own storage?** Yes. Bring-your-own AI works on any plan through an adapter you pass to the editor, and MailKaro ships first-party adapters. Uploads can go to your own Amazon S3 bucket, Google Drive or any storage through an onImageUpload handler. The AI generation limits quoted for AI Pro and Enterprise cover only the AI that MailKaro provides. **Which frameworks are supported?** React (react-email-craft, React 18 or newer), Vue (vue-email-craft), Angular (angular-email-craft), vanilla JavaScript (vanilla-email-craft) and a Node backend SDK (email-craft-sdk). The framework packages are thin wrappers around a hosted iframe, so no editor code ships in your bundle. ## Features **Builders.** Email Builder (the default, output tested across Gmail, Apple Mail, Outlook and more), Page Builder for landing pages, Document Builder for reports, proposals and contracts on a paged canvas that exports to PDF, Popup Builder for signup and exit-intent popups, and an Image Editor (crop, rotate, flip, resize, filters). **Content blocks.** Text, Heading, Image, Button, Divider, Spacer, Menu, Social links, Video, HTML, Timer (countdown), Form, Table, Carousel, File, Custom grid, Page break, GIF, Columns, and saved templates as blocks. You can register your own custom tools, reuse saved and synced blocks across emails (edit once, update everywhere), and add property editors. **Editing on the canvas.** Undo and redo, responsive controls with desktop and mobile preview, text editing with clean paste, an emoji picker, inline font controls and a spell checker, change events, and a props, ref and methods API. **Personalization.** Merge tags that your backend supplies, display conditions to show or hide a block per recipient, design tags, dynamic images and special links. **Files and assets.** Image uploads through your own handler, Google Drive, Amazon S3, custom file storage, image libraries, stock images, a file manager and SVG images. Free includes the private asset connectors. **Appearance and white-label.** Custom themes and CSS for the email your end users build, custom fonts, layout options, and editor localization with full right-to-left support. White-label branding (your logo, no MailKaro badge) is a Pro feature. **Collaboration and history.** Live multi-user editing with presence (a paid capability), history and versions (snapshots you can save, restore and compare), threaded comments anchored to a block, and review and approval (draft, review, approved, published, with an audit trail). Approvals, version branching and single sign-on are Enterprise features; shared template and version libraries come with Pro. **Deliverability and quality.** Inbox previews with a client switcher that simulates each client's rendering quirks, a live pre-send QA audit with an error and warning count, accessibility checks for contrast and alt text, test email, email stats (sends, deliveries, bounces, complaints), A/B variants rendered with weights, and Languages (one design, many languages: translate the subject and the words, keep the layout). **AI and MCP.** AI actions in the editor: generate a design, rewrite copy, suggest subject lines, write alt text and generate images. Use MailKaro-provided AI on AI Pro and Enterprise, or bring your own provider on any plan. AI credits meter usage against a monthly cap. The mailkaro-mcp server lets any AI tool that speaks the Model Context Protocol build, validate and render email designs with MailKaro's own renderer, and the MailKaro Skill is one markdown file that teaches a model the design JSON shape. **Embedding, plans and security.** Publishable embed tokens (pk_live_...) with a domain allow-list, secret server keys (sk_live_...) that stay on your backend, per-token feature control enforced on the server, keys encrypted at rest with AES-256-GCM, one database per workspace, and TLS everywhere. **Rendering and API.** Render to HTML, MJML, AMP for Email, plain text, a document output and a ZIP bundle. The Cloud API (v3) covers render, templates, template folders, emails (render and send), webhooks, sending domains with DKIM, delivery events and suppressions, editor sessions and HTML import (POST /v3/import turns existing email HTML into an editable design). The machine-readable description is at https://mailkaro.com/openapi.json. A CLI renders, exports, validates and migrates designs from a terminal or CI. **Frameworks and migration.** React, Vue, Angular and vanilla JavaScript packages. Existing Unlayer design JSON is converted when it is loaded, and the migration guide describes the one-import change. ## Plans and limits Every plan includes the full drag-and-drop editor and the HTML and MJML render API. Prices are in US dollars. | Plan | Monthly price | Per month, billed yearly | Embed tokens | Team seats | AI generations per month provided by MailKaro | | --- | --- | --- | --- | --- | --- | | Free | $0 | $0 | 1 | 2 | 0 | | Pro | $60 | $54 | 5 | 5 | 0 | | AI Pro | $200 | $180 | 10 | 10 | 1,000 | | Enterprise | $499 | $449.10 | 25 | 25 | 10,000 | - Billing yearly takes 10% off the monthly price. Pro starts with 1 month free, no credit card. - On the pricing page, AI Pro and Enterprise are marked "Coming soon". - Extra capacity is sold as add-ons: an extra team seat is $5 a month, an extra embed token is $5 a month, and a pack of 500 AI generations is $10. - Pro adds white-label branding, saved versions, collaboration, inbox previews, pre-send QA checks, custom themes and project policies. Enterprise adds approvals, version branching and single sign-on. - A missing, invalid or expired token always falls back to the free editor. ## How it works 1. Install react-email-craft (or the Vue, Angular or vanilla package) and mount the editor in a sized container with a publishable token. 2. Load a saved design with editor.loadDesign, or start from a blank canvas or one of the 48 starter templates. 3. When the user saves, read the design JSON back (editor.exportHtml returns the design and an HTML preview) and store the JSON in your own database. 4. On your server, render the design to email-safe HTML or MJML with email-craft-sdk or POST /v3/render, then send it through the provider you already use. ## Glossary - **Design JSON:** the source of truth for an email. You store it and reload it into the editor. - **Embed token:** a publishable key that starts with pk_live_. It scopes a workspace's plan and enabled features and can carry a domain allow-list. - **Server key:** a secret key that starts with sk_live_. It stays on your backend and is shown in full once, when it is created. - **Merge tag:** a placeholder such as {{first_name}} that your backend fills in when the email is rendered. - **Entitlements:** the plan and feature decisions made on the server for each embed token. - **Render API:** the endpoint and SDK call that turn a design into HTML, MJML, AMP, plain text or a document. ## Canonical links - Home: https://mailkaro.com/ - Pricing: https://mailkaro.com/pricing - Facts: https://mailkaro.com/facts - Email templates: https://mailkaro.com/templates - Unlayer alternative: https://mailkaro.com/alternatives/unlayer - Guides: https://mailkaro.com/guides/react-email-builder, https://mailkaro.com/guides/react-email-templates and https://mailkaro.com/guides/render-mjml-node - Documentation: https://docs.mailkaro.com/ - OpenAPI description: https://mailkaro.com/openapi.json - Short index for models: https://mailkaro.com/llms.txt ## Part 1: Website pages ### Home URL: https://mailkaro.com/ Drag and drop blocks to design, embed the editor in your product in a few lines (install `react-email-craft`), and render send-ready HTML from your server. Also ships for **Vue**, **Angular**, **vanilla JS**, and a **Node backend SDK**, a white-label, developer-friendly Unlayer alternative. React Vue Angular Vanilla JS Node SDK Get started free See how it works app.yourproduct.com/emails Render-ready HTML for any ESP Postmark Amazon SES SendGrid Mailgun Resend ##### A complete email editor, delivered as a component. Not a widget you outgrow. MailKaro is the full builder your customers expect, delivered through a props-driven React component and a server-side renderer. ###### Drag-and-drop builder Text, image, button, columns, video, dividers: everything your users need to compose an email, no code. ###### White-label & theming Make it yours: your fonts, colors, and logo. Lock the UI so it always looks native to your product. ###### Merge tags & personalization Serve field pickers from your backend so users drop in first_name, order totals, or any data you expose. ###### Render API Get email-safe HTML and MJML back from the server, ready to send through any ESP you already use. ###### Entitlements & plans Gate features per embed token. Free, Pro, and Enterprise capabilities enforced server-side, never spoofable. ###### Teams & multi-tenancy Invite teammates, isolate every workspace in its own database, and manage seats from one dashboard. ##### Two installs. A few props. Done. Drop the editor into your app with `react-email-craft`. The same editor ships for `vue-email-craft`, `angular-email-craft`, and vanilla JS, and you render designs to HTML on your server with `email-craft-sdk`. No editor engineering, no email-client quirks to chase. - Drop-in for React, Vue, Angular & vanilla JS - Server-authoritative plans & merge tags - Email-safe HTML + MJML output EmailStudio.tsx ``` import EmailEditor from "react-email-craft"; // drop-in for react-email-editor export function EmailStudio({ design, mergeTags }) { return ( u.loadDesign(design)} // same API as Unlayer /> ); } ``` ##### One editor, every email surface. ###### SaaS platforms Give users a branded email designer inside your product, onboarding, receipts, campaigns. ###### Agencies Ship client-ready email tooling without maintaining an editor across every project. ###### E-commerce Let merchants design promos and order emails that match their storefront. ###### Newsletters A clean composer for editorial teams, with render-ready output for any sender. ##### Security is part of how it is built. Your keys, sessions, and data are protected across the backend, API, and browser. ###### Keys encrypted at rest Server and publishable keys are AES-256-GCM encrypted and found by an HMAC hash, so the database never holds a key in plain text. A server key is shown once, then masked. ###### Passwordless & hardened sessions Sign in with a single-use email code or Google. There's no password to store, leak, or reset. Sessions live in httpOnly, same-site cookies that scripts can't read, are constant-time verified, single-active-session, and revoked on logout. ###### Origin-locked embeds Publishable keys resolve only from their allow-listed domains, on every path. A leaked key cannot be replayed from another site, and server keys stay backend-only. ###### Server-authoritative The editor renders only what the API grants. Plans and features cannot be elevated client-side, and downgrades revoke paid capacity instantly. ###### Tenant isolation Each workspace has its own database, and every request is checked against the person's membership of that workspace. ###### Encrypted in transit and at rest TLS in transit, MongoDB Atlas encryption at rest, and field-level encryption for the secrets that matter most. ##### Answers before you embed. Both give you an embeddable drag-and-drop email editor with React, Vue, Angular and vanilla JS packages. The differences are price and control. MailKaro includes white-label from the Pro plan, renders designs to email-safe HTML and MJML on your own Node backend with email-craft-sdk, lets you bring your own S3 and AI keys, and enforces plans on the server per embed token. Designs use a JSON format with an importer, so moving from Unlayer is mostly swapping the import and your key. On published prices, yes. MailKaro Pro is $60/mo ($54/mo billed yearly) and includes white-label and 5 embed tokens. On Unlayer's public pricing page, white-labeling starts on the Launch plan at $250/mo, with Scale at $750/mo and Optimize at $2,000/mo (checked October 2026). Both have a free plan. Prices change, so check both pricing pages before you decide. Yes. Your users drag text, images, buttons, columns, video, tables, forms and countdowns onto the canvas, see a live desktop and mobile preview, undo and redo, personalise with merge tags, and can use optional AI writing help. There is nothing to install for them and no MailKaro account to create. MailKaro is email-first. It pairs the editor with a native server-side renderer for email-safe HTML and MJML, publishes its pricing, and controls features per embed token. GrapesJS is a general-purpose web builder, so you build the email layer yourself. See our Beefree SDK and GrapesJS comparison pages for the details. No. You embed the editor with a publishable token and manage your own end-users. MailKaro gates features per token and plan, and never sits between you and your customers. Yes. Style it to your brand and lock the UI to your fonts, colors, and merge tags. Your customers see your product, not ours. Call the server-side renderer to get email-safe HTML or MJML, then send it through whatever ESP you already use (Postmark, SES, SendGrid, …). A publishable key (pk_live_…) that scopes a workspace's plan and enabled features. Free includes one; Pro and Enterprise raise the limit. Enterprise supports custom data residency and deployment options. Talk to sales about your requirements. Downgrade or cancel anytime. Paid features lapse to Free at the end of your billing term, and your designs stay intact. ### Pricing URL: https://mailkaro.com/pricing Every plan includes the full drag-and-drop editor. Upgrade to Pro to embed it, AI Pro for built-in AI, or Enterprise for scale and security. All features are enforced per embed token. Free $0 /mo Embed the full editor in your product, free. Get started - Full drag-and-drop editor - Email-safe HTML + MJML render API - 1 embed token - 2 team seats - Community support Most popular Pro $54 /mo $60 1 month free · no credit card Embed the editor in your product. Start with 1 month free, no credit card. Billed yearly, $648 a year. Start 1 month free - Everything in Free, plus: - Embed the editor, 5 tokens - Exports (HTML / design JSON) - Saved versions · collaboration - 5 team seats · priority support AI Pro $180 /mo $200 Pro plus built-in AI. Billed yearly, $2160 a year. Coming soon - Everything in Pro, plus: - AI assist, 1,000 generations/mo - 10 embed tokens - 10 team seats Enterprise $449.10 /mo $499 Scale, security, and control. Billed yearly, $5389.20 a year. Coming soon - Everything in AI Pro, plus: - 25 tokens · 25 seats - AI, 10,000 generations/mo - SSO / SAML · audit logs - Uptime SLA · dedicated CSM ##### Everything, side by side. See exactly what’s included in each plan. Feature | Free | Pro | AI Pro | Enterprise --- | --- | --- | --- | --- Editor Drag-and-drop email builder | ✓ | ✓ | ✓ | ✓ All content blocks (text, image, button, columns, video, table…) | ✓ | ✓ | ✓ | ✓ White-label (your logo, no MailKaro badge) | - | ✓ | ✓ | ✓ Theme manager & custom CSS | - | ✓ | ✓ | ✓ Custom web fonts | ✓ | ✓ | ✓ | ✓ Standard merge tags | ✓ | ✓ | ✓ | ✓ Custom, backend-served merge tags | - | ✓ | ✓ | ✓ Export & rendering Email-safe HTML + MJML render API | ✓ | ✓ | ✓ | ✓ Export design JSON | - | ✓ | ✓ | ✓ Download HTML from the editor | - | ✓ | ✓ | ✓ AI & productivity AI assist, generate & rewrite copy | - | - | ✓ | ✓ AI generations / month | - | - | 1,000 | 10,000 Saved versions & undo history | - | ✓ | ✓ | ✓ Real-time collaboration | - | ✓ | ✓ | ✓ Workspace & embedding Embed tokens (pk_live_…) | - | 5 | 10 | 25 Team seats | 2 | 5 | 10 | 25 Isolated multi-tenant workspaces | ✓ | ✓ | ✓ | ✓ Per-token feature policies | - | ✓ | ✓ | ✓ Security & governance SSO / SAML | - | - | - | ✓ Audit logs | - | - | - | ✓ Data residency & deployment options | - | - | - | ✓ Support Support | Community | Priority | Priority | Dedicated CSM Uptime SLA | - | - | - | ✓ | Get started | Start Pro | Coming soon | Contact sales ##### Answers before you embed. Both give you an embeddable drag-and-drop email editor with React, Vue, Angular and vanilla JS packages. The differences are price and control. MailKaro includes white-label from the Pro plan, renders designs to email-safe HTML and MJML on your own Node backend with email-craft-sdk, lets you bring your own S3 and AI keys, and enforces plans on the server per embed token. Designs use a JSON format with an importer, so moving from Unlayer is mostly swapping the import and your key. On published prices, yes. MailKaro Pro is $60/mo ($54/mo billed yearly) and includes white-label and 5 embed tokens. On Unlayer's public pricing page, white-labeling starts on the Launch plan at $250/mo, with Scale at $750/mo and Optimize at $2,000/mo (checked October 2026). Both have a free plan. Prices change, so check both pricing pages before you decide. Yes. Your users drag text, images, buttons, columns, video, tables, forms and countdowns onto the canvas, see a live desktop and mobile preview, undo and redo, personalise with merge tags, and can use optional AI writing help. There is nothing to install for them and no MailKaro account to create. MailKaro is email-first. It pairs the editor with a native server-side renderer for email-safe HTML and MJML, publishes its pricing, and controls features per embed token. GrapesJS is a general-purpose web builder, so you build the email layer yourself. See our Beefree SDK and GrapesJS comparison pages for the details. No. You embed the editor with a publishable token and manage your own end-users. MailKaro gates features per token and plan, and never sits between you and your customers. Yes. Style it to your brand and lock the UI to your fonts, colors, and merge tags. Your customers see your product, not ours. Call the server-side renderer to get email-safe HTML or MJML, then send it through whatever ESP you already use (Postmark, SES, SendGrid, …). A publishable key (pk_live_…) that scopes a workspace's plan and enabled features. Free includes one; Pro and Enterprise raise the limit. Enterprise supports custom data residency and deployment options. Talk to sales about your requirements. Downgrade or cancel anytime. Paid features lapse to Free at the end of your billing term, and your designs stay intact. ### Facts URL: https://mailkaro.com/facts Last updated 7 October 2026. Prices are in US dollars. This page lists plain, quotable facts about MailKaro. For anything that changes, such as prices, the pricing page (https://mailkaro.com/pricing) and the docs (https://docs.mailkaro.com/) are the source of truth. ##### What MailKaro is MailKaro is a white-label, embeddable drag-and-drop editor for emails, documents and PDFs. You add it to your own product, your users design in it, and your server renders the saved design to email-safe HTML or MJML. A design is stored as JSON in your own database. Plans and paid features are enforced on the server for each embed token, so the browser cannot unlock anything by itself. ##### Plans and limits Every plan includes the full drag-and-drop editor and the HTML and MJML render API. Plan | Monthly price | Price per month, billed yearly | Embed tokens | Team seats | AI generations per month provided by MailKaro --- | --- | --- | --- | --- | --- Free | $0 | $0 | 1 | 2 | 0 Pro | $60 | $54 | 5 | 5 | 0 AI Pro | $200 | $180 | 10 | 10 | 1,000 Enterprise | $499 | $449.10 | 25 | 25 | 10,000 - Billing yearly takes 10% off the monthly price. - Pro starts with 1 month free, no credit card. - On the pricing page, AI Pro and Enterprise are marked "Coming soon". - Extra capacity is sold as add-ons: an extra team seat is $5 a month, an extra embed token is $5 a month, and a pack of 500 AI generations is $10. - Bring-your-own AI works on any plan. The AI generation limit above only covers AI that MailKaro provides. - An embed token is a publishable key that starts with `pk_live_`. A server key starts with `sk_live_` and stays on your backend. - Pro adds white-label branding, saved versions, collaboration, inbox previews, pre-send QA checks, custom themes and project policies. Enterprise adds approvals, version branching and single sign-on. - A missing, invalid or expired token always falls back to the free editor. Source: plan limits and prices come from the MailKaro code (`PLAN_PRICE`, `PLAN_SEAT_LIMIT`, `PLAN_TOKEN_LIMIT`, `PROVIDED_AI_MONTHLY_CAP`) and match the pricing page (https://mailkaro.com/pricing). ##### Supported frameworks - React: `react-email-craft`, with the same component, props and ref as react-email-editor (React 18 or newer). - Vue: `vue-email-craft`. - Angular: `angular-email-craft`. - Vanilla JavaScript: `vanilla-email-craft`. - Node backend: `email-craft-sdk` renders designs and resolves entitlements with a secret server key. The framework packages are thin wrappers around a hosted iframe, so no editor code ships in your app bundle. Existing Unlayer design JSON is converted when it is loaded. ##### Export and render formats - HTML, email-safe, from the render API and the SDK. - MJML. - AMP for Email. - Plain text. - Document output (a paged sheet that the browser can save as PDF). - A ZIP bundle with the HTML, MJML, AMP, plain text and design JSON. - Design JSON, the source of truth you store and reload. Image and PDF export are Pro features. The Cloud API endpoint `POST https://api.mailkaro.com/v3/render` returns `html`, `mjml`, `amp`, `text` or `document`. It needs no key and is rate limited. The machine-readable description is at /openapi.json (https://mailkaro.com/openapi.json). ##### Security basics - Server keys and publishable keys are encrypted at rest with AES-256-GCM. A server key is shown in full once, when it is created. - A publishable key can carry a domain allow-list, so it resolves only from your own origins. - Plan and feature decisions are made on the server. The browser cannot grant itself a paid feature. - Each workspace has its own database, and every request is checked for membership. - All API and database traffic uses TLS. - Sign-in uses a 6-digit email code that expires in 5 minutes and works once. No passwords are stored. - The Cloud API accepts only secret server keys on its authenticated endpoints, never a publishable key. ##### Comparison with Unlayer On Unlayer's public pricing page, white-labeling starts on the Launch plan at $250 a month (checked October 2026). MailKaro includes white-label from Pro at $60 a month. Both have a free plan. Prices change, so check both pricing pages. More detail is on the Unlayer comparison (https://mailkaro.com/alternatives/unlayer). ##### Free plan - The Free plan costs $0 and includes the full drag-and-drop editor, the HTML and MJML render API, 1 embed token and 2 team seats. - You can embed react-email-craft in a React app and get the design and the HTML in your own code with exportHtml(). - Your own Amazon S3 and Google Drive uploads work on Free. - Not on Free: white-label branding, the Download HTML button in the editor toolbar, saved versions, collaboration, inbox previews, pre-send QA checks, custom themes and project policies (Pro), and MailKaro-provided AI (AI Pro and Enterprise). ##### Features - Builders: Email, Page, Document (exports to PDF), Popup and Image Editor. - Blocks: Text, Heading, Image, Button, Divider, Spacer, Menu, Social links, Video, HTML, Timer (countdown), Form, Table, Carousel, File, Custom grid, Page break, GIF and Columns, plus custom tools and saved blocks. - Editing: undo and redo, desktop and mobile preview, clean paste, emoji picker, inline font controls and a spell checker. - Personalization: merge tags from your backend, display conditions, design tags, dynamic images and special links. - Files: your own uploads, Amazon S3, Google Drive, custom storage, stock images and image libraries. - Brand: custom themes and CSS, custom fonts, editor localization with right-to-left support, and white-label on Pro. - Teamwork: live collaboration, version history, threaded comments, and review and approval (Enterprise). - Quality: inbox previews, pre-send QA, accessibility checks, test email, email stats, A/B variants and multi-language content. - AI: generate a design, rewrite copy, subject lines, alt text and images, with MailKaro-provided or your own AI, plus an MCP server and a Skill file for other AI tools. - Output and API: HTML, MJML, AMP for Email, plain text, document and ZIP; Cloud API v3, Node SDK and CLI. ##### Who it is for Product teams that give their own users an email editor: SaaS products, email marketing and automation tools, CRMs and customer-engagement platforms, e-commerce platforms and merchant tools, agencies and white-label platforms, and internal back offices that need on-brand, reviewed emails. The 48 starter email templates cover e-commerce, SaaS, hospitality, real estate, finance, education, events, nonprofits, creators, lifestyle and seasonal campaigns. This describes where MailKaro fits. It is not a customer list. ##### Email templates The editor ships with 48 starter templates in its Template Library. They are design JSON for the MailKaro editor, not React components. Browse them on the templates page (https://mailkaro.com/templates). The guide on React email templates (https://mailkaro.com/guides/react-email-templates) explains the difference between code components and a visual editor. ##### Where to read more ### Compare embeddable email editors URL: https://mailkaro.com/compare How MailKaro compares on price, white-label, rendering, your own S3 and AI keys, security and ease of use. Every MailKaro claim here can be checked in our docs or on the free plan. - White-label and the paid features from $60/mo, published on one page. - Render email-safe HTML and MJML on your own server, with no hosted export call. - Your S3, your AI key and your ESP: files, prompts and data stay with you. Start free View the docs In short Pick MailKaro if you want white-label at a published price, rendering on your own server, and your own files, AI keys and data. Pick something else if you need a big library of ready-made templates on day one. Ours has 33 starters and is still growing. Embeddable email editors look alike in a demo. The differences show up later: what removing the vendor badge costs, where rendering runs, whose storage holds the images, who sees the AI prompts, and what happens when your team grows. We read the public pricing pages and docs of established hosted editors in October 2026 and left their names out. Where a row says "varies", it really does vary, so check each vendor's own pages before you decide. **Credit where it's due:** Established editors have large template galleries, years of polish and long customer lists. If a big marketplace of ready-made designs matters most to you, one of them may suit you better today. Ours has 33 starters and we keep adding more. ##### MailKaro vs other embeddable editors Feature | MailKaro | Other embeddable editors --- | --- | --- Price & white-label White-label (no vendor badge) | From the Pro plan, $60/mo | Often a higher tier. One popular editor starts at $250/mo Published pricing | Yes, on one page | Varies. Some quote larger plans only Free plan with the full editor | ✓ | Varies, often limited Rendering & backend Render to email-safe HTML on your own server | Yes, Node SDK, no headless browser | Often a hosted export call MJML output | ✓ | Varies React, Vue, Angular and vanilla JS | ✓ | Varies, often React first Follows the common React email editor API (load a design, export HTML, events) | ✓ | Varies Your data Bring your own S3 for images and files (any plan) | ✓ | Varies by plan Bring your own AI key (stays on your server) | ✓ | Often vendor-managed AI Self-host the backend | Enterprise | Rarely offered Security & control Origin-locked publishable keys | ✓ | Varies Plans and features enforced on the server, per token | ✓ | Varies Secrets encrypted at rest (AES-256-GCM) | ✓ | Varies Easy for your users Blocks | 19, including table, form, countdown, carousel, file and a custom grid | Varies Live desktop and mobile preview, undo and redo, merge tags | ✓ | Common Your users need no account with us | ✓ | Varies Starter templates | 33, growing | Often a larger library Product names are not used here. Information is taken from the publicly available pricing pages and documentation of established embeddable email editors as of October 2026. Spotted something out of date? Let us know (https://docs.mailkaro.com). ##### Where MailKaro is different ###### White-label without the enterprise price Your customers should not see another vendor's logo inside your product. White-label is part of the Pro plan at $60/mo ($54/mo billed yearly), with custom fonts and your own colors. At least one popular editor charges $250/mo before it allows white-labeling. ###### Rendering on your own server Pass the saved design to email-craft-sdk on your Node backend and get email-safe HTML or MJML in milliseconds. There is no hosted export call in the middle and no headless browser to run. ###### Your files, your AI, your data Images go to your own S3 bucket on any plan. AI runs on your own provider key, held on your server and never in the browser. Each workspace's designs are isolated by default. ###### Easy for the people who use it Drag text, images, buttons, columns, tables, forms and countdowns onto the canvas, check a live desktop and mobile preview, undo anything, and personalise with merge tags. Your users never create an account with us. ##### Comparing email editors: common questions Is MailKaro the best embeddable email editor?It depends on what you need. MailKaro is a strong fit when you want white-label at a published price, rendering on your own server, and your own storage and AI keys. If you need a large marketplace of ready-made templates on day one, another editor may suit you better today, because our library has 33 starters. How does MailKaro's price compare with other email editors?MailKaro Pro is $60/mo ($54/mo billed yearly) and includes white-label and 5 embed tokens, and there is a free plan with the full editor. One widely used editor lists white-labeling from $250/mo on its public pricing page (checked October 2026). Prices change, so check each pricing page before you decide. Is MailKaro easy for non-technical users?Yes. It is a drag-and-drop editor with a live desktop and mobile preview, undo and redo, merge tags and optional AI writing help. Your users never create a MailKaro account. Can I switch from another editor to MailKaro?Usually without much trouble. The React component follows the common email editor API (load a design, export HTML, listen for events), designs are stored as JSON, there is an importer for designs saved by other editors, and POST /v3/import turns existing email HTML into an editable design. Moving over is mostly swapping the import and adding your key. Where is my data stored?Images and files go to your own S3 bucket, AI calls use your own provider key from your server, and each workspace has its own isolated database. On Enterprise you can also self-host the backend. Does it work with my email sending service?Yes. MailKaro produces email-safe HTML and MJML, and you send it through whichever provider you already use, such as Postmark, Resend, SendGrid, Mailgun or AWS SES. ### MailKaro vs Unlayer URL: https://mailkaro.com/alternatives/unlayer Embed a drag-and-drop email editor in your SaaS, agency tool or dashboard. Your Node.js backend renders send-ready HTML on your own infrastructure, with your S3, your AI provider and your ESP. - Own your stack: your S3, your AI key and your ESP. Your data stays with you. - White-label from the Pro plan, with no Enterprise gate to remove the badge. - A Node renderer for HTML and MJML, plus React, Vue, Angular and vanilla JS packages. Start free View the docs In short Unlayer is the more established name, with a bigger ecosystem. MailKaro's difference is control: white-label from the $60/mo Pro plan, a Node renderer that runs on your own server, and your own S3 and AI keys. Teams that must run the backend themselves can self-host on Enterprise. Unlayer (react-email-editor) popularized the embeddable email builder, and it's a mature, widely-adopted product. Teams usually start looking for an alternative over a few things: white-labeling that only starts at $250/mo on Unlayer's Launch plan, wanting a native backend renderer instead of a hosted export API, and wanting their assets, AI, and data to stay on their own infrastructure. MailKaro is built for that last point especially. The shape is simple: your SaaS calls MailKaro, and MailKaro talks to your S3, your AI provider, and your ESP. It ships first-class packages for React, Vue, Angular, and vanilla JS, includes white-label from the Pro plan, and pairs the editor with a native server-side renderer (no headless browser) that runs in your own backend, so you plug in your own storage and AI keys on the cloud plans without hosting anything. Teams that want to run the whole backend themselves can self-host on Enterprise. **Credit where it's due:** Unlayer is mature, widely adopted, and has a large template library and a polished hosted product. If you're all-in on React and its pricing fits, it's a perfectly good choice. This page lists the differences as facts so you can decide. ##### MailKaro vs Unlayer Feature | MailKaro | Unlayer --- | --- | --- Editor & embedding Drag-and-drop email editor | ✓ | ✓ React component on npm | ✓ | ✓ Vue and Angular packages on npm | ✓ | ✓ White-label (no vendor badge) from | $60/mo (Pro plan) | $250/mo (Launch plan) Rendering & backend Render designs to email HTML | Node SDK, on your server, on every plan | Cloud API, from the Launch plan ($250/mo) Your own file storage (S3) | Any plan | Custom Storage, from the Launch plan ($250/mo) AI assistant | AI Pro plan, or your own AI key on any plan | From the Launch plan ($250/mo) AMP for email | Free plan | Optimize plan ($2,000/mo) Self-hostable backend | Enterprise | Not listed on the public pricing page Plans & pricing Published prices | Free, $60, AI Pro, Enterprise | Free, $250, $750, $2,000, Enterprise custom Free plan | Full editor | Email, page, popup and document builders Unlayer is a trademark of its respective owner. Product and company names are used for identification and comparison only. Information is taken from publicly available data on unlayer.com as of October 2026. Spotted something out of date? Let us know (https://docs.mailkaro.com). ##### Where MailKaro is different ###### Your stack, end to end The integration shape is your SaaS, then MailKaro, then your infrastructure. Assets upload to your own S3 bucket (public or presigned-private), AI generation runs on your own provider key held in your backend and never the browser, designs render to HTML or MJML on your servers, and you send through your ESP. MailKaro sits in the flow. It never sits between you and your data. ###### White-label without the Enterprise upsell Your customers shouldn't see another vendor's logo inside your product. White-label is included from the Pro plan, so you can customize the palette, load custom fonts, and align the editor with your design system, without jumping to an Enterprise contract to remove a badge. ###### Native server-side compilation Pair the editor with email-craft-sdk on your backend: pass the design payload to Node, compile cross-client HTML or MJML in milliseconds, and dispatch through Postmark, Resend, SendGrid, or AWS SES. ###### Server-authoritative & multi-tenant Publishable keys are origin-locked to your domains to prevent replay; plans and features are enforced server-side (no client tampering); and each workspace's templates stay isolated by default. ##### Drop-in React implementation Unlayer (react-email-editor) ``` ``` MailKaro ``` ``` The frontend shape is intentionally near-identical. MailKaro is a drop-in, so migrating is mostly swapping the import and adding your key. The difference is what happens next: MailKaro gives you a native Node renderer (email-craft-sdk) to turn that design into email-safe HTML or MJML on your server. ##### Unlayer alternative: common questions Is MailKaro cheaper than Unlayer?On published prices, yes. MailKaro Pro is $60/mo ($54/mo billed yearly) and includes white-label and 5 embed tokens. Unlayer's public pricing page lists white-labeling from the Launch plan at $250/mo, Scale at $750/mo and Optimize at $2,000/mo (checked October 2026). Both have a free plan. Prices change, so check both pages before you decide. Is MailKaro as easy to use as Unlayer?Yes. The editor is the same drag-and-drop shape: text, images, buttons, columns, video, tables, forms and countdowns, a live desktop and mobile preview, undo and redo, and merge tags. The React component takes the same props as react-email-editor, so most teams swap the import and add their key. How does MailKaro handle Outlook and Gmail quirks?MailKaro compiles designs down to nested, table-based HTML with Outlook conditional comments ([if mso]), margin resets, and fully inlined styles, and it can export MJML, so rendering stays consistent across Outlook, Gmail, and Apple Mail. Can I migrate existing Unlayer designs to MailKaro?Yes. MailKaro uses a structured JSON design format (rows, columns, blocks) with importers, so existing designs can be mapped and converted, and output stays portable as standard email-safe HTML and MJML. Do my end-users need a MailKaro account?No. You embed the editor with your publishable token; end-users only ever interact with your product. There are no MailKaro logins or external sign-ups for them. Self-host or cloud?Cloud by default, with self-host available on Enterprise or by request. On the cloud plans you can already bring your own S3 bucket and AI provider key, and render designs in your own Node backend with email-craft-sdk, so your design data and assets stay on your side without hosting anything. Teams that need to run the backend and render API entirely on their own infrastructure can self-host on Enterprise, where we provide the Docker image and deployment runbook. ### MailKaro vs Beefree SDK URL: https://mailkaro.com/alternatives/beefree An embeddable email + page builder with white-label from Pro, a native Node renderer, and a backend you can self-host on Enterprise. - White-label from the Pro plan, no vendor badge. - Native Node renderer: email-safe HTML + MJML from your own backend. - First-class packages for React, Vue, Angular, and vanilla JS, with pricing published on one page. Start free View the docs In short Beefree SDK is a polished, hosted embeddable builder. MailKaro's angle is developer control: white-label from Pro, a native Node renderer you run on your own backend, self-hosting on Enterprise, and pricing published on one page. Beefree SDK (formerly BEE Plugin) is a polished embeddable email and page builder. Teams evaluating an alternative usually weigh white-label and volume pricing, and whether they can keep more of the stack on their own infrastructure. MailKaro embeds the same way, a component and a key, includes white-label from Pro, and gives you a native Node SDK to render designs to email-safe HTML or MJML on your own servers. **Credit where it's due:** Beefree is a mature, well-designed product with a big template ecosystem and a strong hosted experience. If its pricing and hosted model suit you, it's a strong option, MailKaro's angle is developer control: self-hosting on Enterprise, a native renderer, and pricing published on one page. ##### MailKaro vs Beefree SDK Feature | MailKaro | Beefree SDK --- | --- | --- Editor & embedding Drag-and-drop email editor | ✓ | ✓ React component on npm | ✓ | ✓ Vue and Angular packages on npm | ✓ | ✓ MailKaro at a glance White-label (no vendor badge) from | $60/mo (Pro plan) | See beefree.io for current plans Published pricing | Free, $60, AI Pro, Enterprise | See beefree.io for current plans Render to HTML on your own server | Node SDK, on every plan | See beefree.io for current docs Beefree SDK is a trademark of its respective owner. Product and company names are used for identification and comparison only. Information is taken from publicly available data on beefree.io as of October 2026. Spotted something out of date? Let us know (https://docs.mailkaro.com). ##### Where MailKaro is different ###### White-label from Pro Remove the vendor badge from the Pro plan up, no Enterprise contract required. Your Brand Kit (logo, colors, fonts) drives the editor chrome and new designs. ###### Own your rendering Render to email-safe HTML or MJML from your own backend with email-craft-sdk, no per-render hosted dependency. ###### Any framework First-class packages for React, Vue, Angular, and vanilla JS, all on one saved-design format and one render API. ###### Self-host when it matters Keep the backend and render pipeline on your infrastructure, with entitlements enforced server-side per embed token. ##### Beefree SDK alternative: common questions How is MailKaro different from Beefree SDK?Both are embeddable builders. MailKaro leans toward developer control: white-label from Pro, a native Node renderer, and a backend you can self-host on Enterprise, with pricing published on one page. Can I migrate my designs?MailKaro uses its own JSON design format with importers, and renders to standard email-safe HTML and MJML, so your output stays portable. Is there a free plan?Yes, a free tier with the full editor, then Pro from $60/mo, AI Pro, and Enterprise, all published on the pricing page. ### MailKaro vs GrapesJS URL: https://mailkaro.com/vs/grapesjs GrapesJS is a great general-purpose web builder. MailKaro is email-first: email-safe HTML, MJML, and a managed backend without wiring it all yourself. - Email-safe (table-based) HTML out of the box, no plugin assembly. - MJML + inbox-safe HTML from one design, one call. - Batteries included: storage, assets, roles, audit, render API. Start free View the docs In short GrapesJS is a powerful, open-source, general-purpose web-page editor, but you build the email side yourself (email-safe HTML, MJML plugin, storage, assets, a render pipeline). MailKaro is email-first: those come with the product, and you embed it as a component in a few lines. GrapesJS is a powerful open-source framework for building web-page editors. It's endlessly flexible, but that flexibility means you assemble the email side yourself: email-safe (table-based) HTML, an MJML plugin, storage, assets, and a render pipeline are all on you. MailKaro is purpose-built for email. The blocks produce inbox-safe HTML, the backend stores designs and renders them (HTML or MJML) via a Node SDK, and you embed it as a component in a few lines instead of standing up an editor framework. **Credit where it's due:** GrapesJS is open-source, self-hostable, and a strong choice when you need a fully custom, general-purpose visual builder (landing pages, dashboards, anything). If you want maximum control and don't mind building the email plumbing, it's excellent, MailKaro trades some of that flexibility for an email-ready product out of the box. ##### MailKaro vs GrapesJS Feature | MailKaro | GrapesJS --- | --- | --- What it's for Email-first (inbox-safe HTML) | ✓ | DIY General web-page builder | Page mode | ✓ Open source | SDK + wrappers | ✓ Out of the box Embed as a component | A few lines | Framework setup Email-safe HTML export | ✓ | Plugin + config MJML output | ✓ | Community plugin Managed storage + assets | ✓ | Not part of the library Server-side render API | Native Node SDK | Not part of the library Team features Roles & per-design sharing | ✓ | Not part of the library Audit log | ✓ | Not part of the library Brand Kit / white-label | From Pro | DIY GrapesJS is a trademark of its respective owner. Product and company names are used for identification and comparison only. Information is taken from publicly available data on grapesjs.com as of October 2026. Spotted something out of date? Let us know (https://docs.mailkaro.com). ##### Where MailKaro is different ###### Email-safe by default Every block renders to the table-based, inline-styled HTML that email clients actually support, you don't build and test that yourself. ###### Batteries included Storage, assets, versions, roles, audit, and a render API come with the product. GrapesJS gives you the canvas; you wire the rest. ###### MJML without the plugin dance Export MJML or email-safe HTML from the same design with one call, no community-plugin assembly. ###### Embed, don't assemble Add a component and a key. There's no editor framework to configure before your first email goes out. ##### GrapesJS alternative: common questions Is GrapesJS or MailKaro better?Different jobs. GrapesJS is the better choice for a fully custom, general-purpose web-page editor you host and control end to end. MailKaro is the better choice when you specifically need an embeddable email builder that produces inbox-safe HTML/MJML without building the pipeline. Can MailKaro build web pages too?Yes, it has a page/document/popup builder mode alongside email, including a freeform web-page canvas. But email is where it's strongest and most opinionated. Is MailKaro open source?The SDK and framework wrappers are public on GitHub; the hosted editor and backend are a managed product you can also self-host on Enterprise. ### Developer resources URL: https://mailkaro.com/developers Everything you need to integrate the MailKaro embeddable email & document editor and its Cloud API. MailKaro gives your product a white-label drag-and-drop editor plus a server-side render and send API. Authenticate every API request with a publishable embed token (`pk_live_…`) or a server key (`sk_live_…`) via `Authorization: Bearer `. ##### MailKaro API & machine-readable specs - OpenAPI 3.1 specification (https://mailkaro.com/openapi.json), `https://mailkaro.com/openapi.json` - Cloud API reference (https://docs.mailkaro.com/cloud-api), endpoints, auth, examples - Backend integration (https://docs.mailkaro.com/backend), mint tokens & render server-side - Authentication (https://docs.mailkaro.com/authentication), tokens & keys - llms.txt (https://mailkaro.com/llms.txt), agent guidance & when to use MailKaro ##### MailKaro SDKs & packages All packages are published on npm under the @mailkaro (https://www.npmjs.com/~mailkaro) scope, click any package to open it on npm: - `react-email-craft`, React embeddable editor, npm (https://www.npmjs.com/package/react-email-craft) · docs (https://docs.mailkaro.com/react) - `vue-email-craft`, Vue wrapper, npm (https://www.npmjs.com/package/vue-email-craft) · docs (https://docs.mailkaro.com/) - `angular-email-craft`, Angular wrapper, npm (https://www.npmjs.com/package/angular-email-craft) · docs (https://docs.mailkaro.com/) - `vanilla-email-craft`, vanilla JS wrapper, npm (https://www.npmjs.com/package/vanilla-email-craft) · docs (https://docs.mailkaro.com/) - `email-craft-sdk`, Node backend SDK: render designs & resolve entitlements, npm (https://www.npmjs.com/package/email-craft-sdk) · docs (https://docs.mailkaro.com/backend) ##### Authentication Send `Authorization: Bearer pk_live_…` (publishable) or `sk_live_…` (server key) with every request. Requests are scoped to the token's organization. See the authentication docs (https://docs.mailkaro.com/authentication). ##### Rate limits Every MailKaro API response carries RFC RateLimit headers so agents can self-throttle: `RateLimit-Limit`, `RateLimit-Remaining`, `RateLimit-Reset` (seconds until the window resets), and `RateLimit-Policy` (`quota;w=window-seconds`). A `429 Too Many Requests` also returns `Retry-After`. Back off until the reset window elapses. ##### Versioning & deprecation policy The MailKaro API is versioned in the URL path (`/v3/…`); the current major version is **v3**. Breaking changes ship under a new path version. When an endpoint or version is deprecated, responses carry a `Deprecation` header and, once an end-of-life date is set, a `Sunset` header (RFC 8594) linking to migration docs. We aim to give at least **6 months** between a `Sunset` announcement and removal, so you can integrate against a stable, path-versioned surface. ##### Error model Every 4xx/5xx response uses a consistent typed body: a machine-readable `error` code and a human-readable `message` (see the `Error` schema in the OpenAPI spec), so agents can handle failures without guessing. ### About URL: https://mailkaro.com/about MailKaro is a white-label, embeddable drag-and-drop editor for building emails, documents, and PDFs. We make it possible for software products to give their own users a polished email-design experience without building an editor from scratch, a developer-friendly alternative to Unlayer and Beefree SDK. You embed the editor with a few lines of code, style it to your brand, and render send-ready, inbox-safe HTML and MJML from our API. Your customers see your product, never ours. ##### What we build The editor ships as thin iframe-wrapped packages for React, Vue, Angular, and vanilla JavaScript, so no editor code bloats your bundle. A Node backend SDK renders designs to email-safe HTML and MJML on the server and resolves plan entitlements with a secret key, much like a backend admin SDK. Plans and paid features are enforced server-side per embed token, which keeps your integration secure and simple. ##### Who it's for MailKaro is built for developers and product teams at SaaS companies, CRMs, marketing platforms, and internal tools who need a reliable, ownable email- and document-building experience inside their own application. If you are migrating off Unlayer, Beefree, or a homegrown editor, MailKaro is designed as a drop-in replacement with published pricing and a self-hostable backend. ##### Learn more ### Contact URL: https://mailkaro.com/contact We're happy to help with support, sales, billing, and security questions about MailKaro, the embeddable, white-label drag-and-drop editor for emails, documents, and PDFs. The fastest way to reach a human is email; we read every message and reply as quickly as we can. ##### Email - General & support: support@mailkaro.com (mailto:support@mailkaro.com) - Sales & Enterprise: support@mailkaro.com (mailto:support@mailkaro.com?subject=Sales) - Security reports: security@mailkaro.com (mailto:security@mailkaro.com) ##### Documentation & status Most integration questions are answered in the documentation. Start there for embedding guides, the Cloud API reference, and authentication details before reaching out. - Documentation (https://docs.mailkaro.com/) - OpenAPI specification (https://mailkaro.com/openapi.json) - Pricing (https://mailkaro.com/pricing) - About MailKaro (https://mailkaro.com/about) MailKaro is operated as a business tool for developers and product teams. For contractual, data-processing, or data-residency requests, email support@mailkaro.com (mailto:support@mailkaro.com) and we'll route you to the right person. ### React email builder: embed a drag-and-drop editor in your React app URL: https://mailkaro.com/guides/react-email-builder Install react-email-craft, add a white-label drag-and-drop editor to your React app, and render email-safe HTML on your Node backend, without building an editor from scratch. Start free Full docs Building a drag-and-drop email builder from scratch is a multi-month project: a canvas, a block system, undo/redo, and, the hard part, output that renders correctly across Gmail, Outlook, and Apple Mail. Instead, you can embed a ready-made editor and keep control of storage, sending, and branding. This guide uses MailKaro: an embeddable, white-label editor for React (a drop-in Unlayer alternative) plus a Node SDK that renders saved designs to email-safe HTML and MJML on your server. By the end you'll have an editor in your app, a design saved to your database, and a rendered email ready to send. 1. 1Install the editorAdd the editor package to your React app. It's a thin wrapper, the editor itself loads from a hosted iframe, so its code never ships in your bundle.`npm install react-email-craft` 2. 2Mount the editor with a publishable keyCreate a free workspace, generate a publishable key (pk_live_…), and drop the component into a page. White-labeling, your logo and brand colors, comes from your workspace Brand Kit, on every plan.`"use client"; import EmailEditor, { type MailkaroIframeEditorRef } from "react-email-craft"; import { useRef } from "react"; export function EmailDesigner() { const ref = useRef(null); // The ref API mirrors react-email-editor / Unlayer, callback style. const save = () => ref.current?.editor.exportHtml(async ({ design, html }) => { await fetch("/api/designs", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ design, html }), // store the JSON + email-safe HTML }); }); return (
); }` 3. 3Persist the design JSONStore the design JSON (not just the HTML) so users can reopen and edit later. Reloading is a one-liner, pass the saved JSON back to the editor.The design is a portable document you own; the HTML is a rendered artifact you can regenerate any time.`// Reopen a saved design, pass the stored JSON back in. ` 4. 4Render on your Node backendFor sending, render the design on the server with the backend SDK. It holds a secret server key (sk_live_…) and turns a design into email-safe HTML or MJML, no headless browser required.`// server-side (Node.js), rendering is a pure function, no key needed import { renderDesign, renderMjml } from "email-craft-sdk"; export function renderEmail(design) { const html = renderDesign(design, { fullDocument: true }); // inbox-safe HTML const mjml = renderMjml(design); // or MJML, if you prefer return { html, mjml }; }` 5. 5Send itHand the rendered HTML to your email service provider (Resend, SendGrid, SES, Postmark, whatever you use). Because the HTML is already email-safe and inlined, it renders consistently across clients.`import { Resend } from "resend"; const resend = new Resend(process.env.RESEND_API_KEY); const { html } = await renderEmail(design); await resend.emails.send({ from: "you@yourapp.com", to: user.email, subject: "Welcome!", html, });` That's the whole loop: embed the editor, save the JSON, render on the server, send. You never had to build a canvas or fight Outlook's HTML quirks, and your users get a branded, drag-and-drop experience inside your product. From here you can add merge tags for personalization, a template gallery, roles and per-design sharing, and a page/document builder mode, all on the same component and API. ##### Common questions Do I need React?No, there are first-class packages for Vue, Angular, and vanilla JavaScript too. This guide uses React because it's the most common, but the flow is identical. Where does the email HTML get generated?On your server, via email-craft-sdk. It renders the design to table-based, inline-styled HTML that email clients support, so you don't need a headless browser or a screenshot service. Can I self-host?The backend and render API are self-hostable on Enterprise, and you can bring your own S3 and AI keys so design data and assets stay on your infrastructure. ### React email templates: code components or a visual editor? URL: https://mailkaro.com/guides/react-email-templates Two different things share this search: templates you write in JSX, and templates your users edit in a drag-and-drop editor. Here is the difference, when to pick which, and the code to start from a ready-made template for free. Start free Full docs Searching for React email templates usually means one of two things. Developers who want to write every email themselves look for code-first components: you build the email in JSX, a renderer turns it into HTML, and every change goes through a code review and a deploy. Product teams that want their users (marketers, support staff, customers) to design emails look for a visual editor with ready-made templates. Neither is better in general. Code-first fits transactional emails that engineers own, such as password resets and receipts, where the layout rarely changes. A visual editor fits emails that non-developers change often, such as newsletters, promotions and lifecycle campaigns. Many products use both. MailKaro is the second kind. It is an embeddable, white-label, drag-and-drop editor for React (and Vue, Angular and plain JavaScript) with 48 starter templates built in. This guide shows how to load a template, let a user edit it, and render the result to email-safe HTML on your server. The Free plan covers the whole loop. 1. 1Choose code components or a visual editorPick code-first when developers own the email, it changes rarely, and it should live in your repository next to the rest of your code.Pick a visual editor when people who do not write code need to change the email, when you want ready-made templates, previews, comments or approvals, or when each of your customers needs their own emails under their own brand. 2. 2Embed the editor in your React appInstall the package, mount the editor in a container with a height, and pass a publishable key. The Free plan includes the full drag-and-drop editor, 1 embed token and 2 team seats.`npm install react-email-craft import EmailEditor, { type MailkaroIframeEditorRef } from "react-email-craft"; import { useRef } from "react"; export function EmailDesigner({ templateDesign }) { const ref = useRef(null); return (
); }` 3. 3Start from a ready-made templateThe editor ships with a Template Library of 48 starter templates: editorial, promo, transactional, events, community, ecommerce, SaaS, hospitality, seasonal, lifestyle, finance, business and more. Your users open it from Body, Templates, Open Library. You can browse every template at mailkaro.com/templates and open any one in the live demo.A template is a design JSON document, not a React component. To start a user from one, load its JSON when the editor is ready.`// templateDesign is a design JSON document, for example one you saved from the editor const onReady = () => ref.current?.editor.loadDesign(templateDesign); ` 4. 4Let users edit it, then store the design JSONUsers change any block, color and line of text. When they save, call exportHtml. You get the design JSON and a preview of the HTML. Store the JSON in your own database, because it is the source of truth that reopens in the editor later.`const save = () => ref.current?.editor.exportHtml(async ({ design, html }) => { await fetch("/api/designs", { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ design, html }), }); });` 5. 5Render on your server and sendFor sending, render the stored design to email-safe HTML on your server with the Node SDK, or call the hosted render endpoint. MJML and plain text are available too. Then hand the HTML to the provider you already use.`// server-side (Node.js) import { renderDesign, renderMjml } from "email-craft-sdk"; const html = renderDesign(design, { fullDocument: true }); // inbox-safe HTML const mjml = renderMjml(design); // or MJML` 6. 6What is free and what is notFree costs $0 and includes the full drag-and-drop editor, the HTML and MJML render API, 1 embed token and 2 team seats. Your own Amazon S3 and Google Drive uploads work on Free, and exportHtml() in your own code returns the design and the HTML.Pro is $60 a month ($54 a month billed yearly). It adds white-label branding, the Download HTML button in the editor toolbar, saved versions, collaboration, inbox previews, pre-send QA checks and custom themes. Prices change, so check the pricing page. In short: use code components for emails that developers own, and a visual editor for emails that people edit. If you want the second, start from one of the 48 templates, embed the editor, store the design JSON, and render on the server. Browse the templates at mailkaro.com/templates, or try the editor with no account at mailkaro.com/demo. ##### Common questions What are React email templates?The phrase covers two things: code components that developers write in JSX and render to HTML, and designs that people edit visually in an embedded editor. MailKaro is the visual kind. Is there a free React email template builder?Yes. MailKaro's Free plan costs $0 and includes the full drag-and-drop editor, the HTML and MJML render API, 1 embed token and 2 team seats. White-label branding and the Download HTML button in the toolbar are Pro features, while exportHtml() in your own code works on Free. Are MailKaro templates React components?No. They are design JSON documents for the MailKaro editor. They load into the editor with loadDesign and render to email-safe HTML or MJML with the render API. Can my users start from these templates?Yes. The starter templates are in the Template Library of every embedded editor, so your users can open one and edit it. Which email provider can I send with?Any. The rendered HTML works with Resend, SendGrid, Amazon SES, Postmark, Mailgun or your own SMTP server. Can I combine this with code-first emails?Yes. Many products keep transactional emails as code and give their users the visual editor for campaigns and newsletters. ### Email renderer for Node.js: compile JSON designs to MJML & HTML URL: https://mailkaro.com/guides/render-mjml-node Turn a structured design into MJML or inbox-safe HTML on your backend, with a single function call, no headless Chrome, no screenshotting. Start free Full docs MJML is a great markup language for responsive email, but hand-writing it, and keeping non-developers out of the raw markup, is a chore. A better shape for most products is: let people design visually, store a structured JSON design, and render it to MJML or email-safe HTML on the server when it's time to send. This guide uses the MailKaro Node SDK (email-craft-sdk) to do exactly that. Pair it with the embeddable editor and you have an MJML email template editor component plus a server renderer, without wiring MJML tooling and a headless browser yourself. 1. 1Install the SDKAdd the backend SDK to your Node service. It runs server-side and holds your secret server key.`npm install email-craft-sdk` 2. 2Render a design to MJML or HTMLGiven a design (the JSON your users built in the editor, or one you store as a template), render it two ways: MJML for tooling that expects it, or ready-to-send email-safe HTML.Rendering is a pure function, no client to construct, no secret key, no headless browser, and no network round-trip per element.`import { renderDesign, renderMjml } from "email-craft-sdk"; const design = await loadDesignFromYourDb(id); const html = renderDesign(design, { fullDocument: true }); // inbox-safe HTML (inlined) const mjml = renderMjml(design); // MJML markup` 3. 3Personalize with merge tagsPass merge tags at render time and they're substituted into the output, so each recipient gets a personalized email from a single design.(Separately, the SDK's Mailkaro client, constructed with a secret sk_live_ key, resolves entitlements and handles asset uploads server-to-server, like firebase-admin. Pure rendering above needs none of that.)`const html = renderDesign(design, { fullDocument: true, mergeTags: { first_name: "Ada", order_id: "#1024" }, });` 4. 4Send with your providerThe rendered HTML is already inlined and table-based, so any ESP can send it as-is. Use MJML output instead if your pipeline compiles MJML downstream.`import { Resend } from "resend"; const resend = new Resend(process.env.RESEND_API_KEY); await resend.emails.send({ from: "you@yourapp.com", to: "customer@example.com", subject: "Your receipt", html, // from mk.renderHtml(design) });` Rendering server-side keeps your sending pipeline fast and predictable: no browser to spin up, no flaky screenshot step, and merge-tag personalization applied at render time. Combine this with the embeddable editor so your team designs visually, and you have the full loop, a visual MJML/HTML email builder with a server renderer, in a few lines each. ##### Common questions Does this need a headless browser?No. The SDK renders the structured design directly to MJML or inline HTML in-process, so there's no Puppeteer/Playwright dependency and no screenshotting. Can I use just the renderer without the editor?Yes. If you already have designs (or build them programmatically), you can use email-craft-sdk purely as a Node renderer for MJML and email-safe HTML. How do I personalize emails?Pass merge tags at render time (e.g. first_name, order_id). They're substituted into the HTML/MJML output so each recipient gets a personalized email from one design. ## Part 2: Email templates (48) The editor ships with these starter templates. Each has a preview page, and every one opens in the live editor. They are designs for the MailKaro editor (stored as design JSON), not React components. ### Categories The overview of every template is at https://mailkaro.com/templates. Each category has a page of its own. - Editorial email templates (3): Newsletters, letters from the team and community digests. These designs lead with a headline, a short story and one button, so readers can see what to do next. https://mailkaro.com/templates/category/editorial - Promotional email templates (3): Sales, launches and membership offers. These designs put the offer and the deadline first, with one clear button and, where it helps, a countdown. https://mailkaro.com/templates/category/promo - Transactional email templates (5): Receipts, shipping updates, password resets, invoices and renewal reminders. These designs are plain and fast to read, with the one thing the reader needs and a link to act on it. https://mailkaro.com/templates/category/transactional - Event email templates (3): Invitations, reminders and follow-ups for webinars, conferences and meetups. These designs lead with the date and a clear way to register or join. https://mailkaro.com/templates/category/events - Community email templates (3): Waitlists, fundraising appeals and calls for volunteers. These designs tell one story and ask for one action: sign up, give or join. https://mailkaro.com/templates/category/community - Ecommerce email templates (4): Product announcements, abandoned carts, restock alerts and cross-sells. These designs are built around a strong image and a button back to the store. https://mailkaro.com/templates/category/ecommerce - SaaS email templates (5): Welcome emails, release notes, trial reminders, feedback requests and app announcements. These designs are clean and product focused, with one next step in the app. https://mailkaro.com/templates/category/saas - Hospitality email templates (3): Restaurant openings, hotel offers and travel guides. These designs use warm imagery and a booking link. https://mailkaro.com/templates/category/hospitality - Lifecycle email templates (1): Emails that follow a customer over time, such as referral programs. The design explains the reward and makes sharing easy. https://mailkaro.com/templates/category/lifecycle - Creator email templates (1): Drops and announcements to an audience that follows you. The design adds urgency to a limited release. https://mailkaro.com/templates/category/creator - Education email templates (1): Course and cohort launches. The design covers what is taught, who it is for and how to enroll. https://mailkaro.com/templates/category/education - Real estate email templates (1): Listings and open houses. The design puts the photo, the price and the viewing link up front. https://mailkaro.com/templates/category/real-estate - Seasonal email templates (6): Christmas, Black Friday, New Year, Valentine's Day, Halloween and Mother's Day. Start from a design that fits the season, then change the offer, the dates and the images. https://mailkaro.com/templates/category/seasonal - Lifestyle email templates (3): Birthdays, fitness challenges and wellness newsletters. These designs are personal and friendly, and ask for one small action. https://mailkaro.com/templates/category/lifestyle - Finance email templates (3): Insurance renewals, statement notices and consultation bookings. These designs are calm and clear, and never need account numbers in the email. https://mailkaro.com/templates/category/finance - Business email templates (3): Introductions, customer stories and team news. These designs are short and professional, and end with one request. https://mailkaro.com/templates/category/business ### Templates - Newsletter email template (Editorial, "Newsletter Digest"): Weekly editorial digest with a hero message, feature image, and social footer. When to send it: Send it on a fixed day each week or month, so readers know when to expect it. What to put in it: One lead story, two or three short items, and a single link to read more. https://mailkaro.com/templates/newsletter-digest - Founder letter email template (Editorial, "Founder Letter"): Personal note format for launches, milestones, and company updates. When to send it: After a launch, a milestone or a hard month, when readers want to hear from a person. What to put in it: What happened, what you learned, and one thing you ask the reader to do. https://mailkaro.com/templates/founder-letter - Community roundup email template (Editorial, "Community Roundup"): Monthly digest for community wins, highlights, and top conversations. When to send it: At the end of each month, once you know which stories and threads did best. What to put in it: Three highlights, one member story and a link to join the conversation. https://mailkaro.com/templates/community-roundup - Flash sale email template (Promo, "Flash Sale"): Urgency-led promo with countdown, motion, and a direct CTA. When to send it: For a sale that really ends soon, usually within 24 to 48 hours. What to put in it: The discount in the headline, an end time the countdown shows, and one button. https://mailkaro.com/templates/flash-sale - New collection email template (Promo, "Seasonal Launch"): Seasonal collection launch with a simple promo-focused structure. When to send it: On launch day, when the collection is in stock and can ship. What to put in it: A hero image, two or three standout items and a link to the full collection. https://mailkaro.com/templates/seasonal-launch - Membership upgrade email template (Promo, "Membership Upgrade"): Conversion-focused upgrade email with strong urgency and clear next step. When to send it: After a member has used the free tier enough to see the value of more. What to put in it: What they unlock, what it costs, and a note on how to cancel or switch back. https://mailkaro.com/templates/membership-upgrade - Order confirmation email template (Transactional, "Order Confirmation"): Receipt-style email with order details and a follow-up CTA. When to send it: Right after payment succeeds, so the customer knows the order went through. What to put in it: Order number, items, total, delivery estimate and a link to the order. https://mailkaro.com/templates/order-confirmation - Shipping confirmation email template (Transactional, "Shipping Update"): Shipment update template with status summary and track action. When to send it: When the parcel leaves your warehouse, and again when it is out for delivery. What to put in it: Carrier, tracking link, expected date and what to do if it is late. https://mailkaro.com/templates/shipping-update - Password reset email template (Transactional, "Password Reset"): Simple security email with direct next action. When to send it: The moment someone asks to reset, and never without a request. What to put in it: A single reset button, how long the link works and what to do if it was not them. https://mailkaro.com/templates/password-reset - Invoice email template (Transactional, "Invoice Notice"): Billing email with invoice summary and payment action. When to send it: When an invoice is issued, and again a few days before it is due. What to put in it: Invoice number, amount, due date, how to pay and a contact for questions. https://mailkaro.com/templates/invoice-notice - Subscription renewal email template (Transactional, "Renewal Reminder"): Subscription renewal reminder with a clear account CTA. When to send it: About a week before a plan renews, so the charge is never a surprise. What to put in it: Plan name, renewal date, price and a link to change or cancel. https://mailkaro.com/templates/renewal-reminder - Webinar invitation email template (Events, "Webinar Invite"): Webinar announcement with video teaser and full-width registration CTA. When to send it: Two to three weeks ahead, with a reminder the day before. What to put in it: Date and time with the time zone, one line on what attendees will learn, and a register button. https://mailkaro.com/templates/webinar-invite - Event reminder email template (Events, "Event Reminder"): Reminder template for online or in-person events. When to send it: The day before an event, and again an hour before if it is online. What to put in it: Date, time, place or join link, and how to add it to a calendar. https://mailkaro.com/templates/event-reminder - Event recap email template (Events, "Conference Recap"): Post-event recap with highlights and follow-up CTA. When to send it: Within a day or two of the event, while it is still fresh. What to put in it: Thanks to attendees, three key moments, and where to find slides or recordings. https://mailkaro.com/templates/conference-recap - Waitlist email template (Community, "Waitlist Invite"): Simple list-building template for new launches and private betas. When to send it: Before a launch, to collect interest from people who want early access. What to put in it: What you are building, what joining gets them, and one field to sign up. https://mailkaro.com/templates/waitlist-invite - Nonprofit fundraising email template (Community, "Nonprofit Appeal"): Donation appeal with clear story, image, and signup/support action. When to send it: Around a campaign, a season of giving or a moment that shows the need. What to put in it: One story, what a gift pays for, and a donate button. https://mailkaro.com/templates/nonprofit-appeal - Volunteer recruitment email template (Community, "Volunteer Recruitment"): Recruitment email for community programs and events. When to send it: A few weeks before the event or program starts. What to put in it: The role, the time it takes, the date and one button to sign up. https://mailkaro.com/templates/volunteer-recruitment - New product email template (Ecommerce, "Product Spotlight"): Image-led campaign to feature a hero product or collection. When to send it: When one product deserves its own email, such as a launch or a best seller. What to put in it: A strong image, two lines on why it matters and a link to the product page. https://mailkaro.com/templates/product-spotlight - Abandoned cart email template (Ecommerce, "Cart Abandonment"): Recovery email with a focused reminder and return-to-cart action. When to send it: A few hours after the cart is left, with a second email a day later. What to put in it: The items left behind with images, the total and a button back to the cart. https://mailkaro.com/templates/cart-abandonment - Back in stock email template (Ecommerce, "Back in Stock"): Inventory alert template with a quick action to buy before it sells out again. When to send it: As soon as an item returns, to the people who asked to be told. What to put in it: The item, its price, how many are left if you know, and a buy button. https://mailkaro.com/templates/back-in-stock - Upsell email template (Ecommerce, "Upsell Cross-Sell"): Post-purchase or bundle campaign with merchandising support. When to send it: After a purchase, when related items make sense. What to put in it: Items that go with what they bought, with a short reason for each. https://mailkaro.com/templates/upsell-cross-sell - Welcome email template (SaaS, "Welcome Series"): Clean onboarding template for the first welcome message. When to send it: Immediately after sign-up, as the first of a short series. What to put in it: What to do first, where to get help and one clear next step. https://mailkaro.com/templates/welcome-series - Product update email template (SaaS, "Feature Release"): Release email for new features, updates, and launch notes. When to send it: When a feature ships and customers can use it. What to put in it: What changed, who it helps and a link into the product. https://mailkaro.com/templates/feature-release - Trial ending email template (SaaS, "Trial Conversion"): Conversion-focused lifecycle email for expiring trials. When to send it: A few days before a free trial ends. What to put in it: What they have set up so far, the plan to choose and the date the trial ends. https://mailkaro.com/templates/trial-conversion - Customer feedback email template (SaaS, "Customer Feedback"): Feedback collection template for product teams and success teams. When to send it: After a customer has used the product long enough to have an opinion. What to put in it: One question, one button and a note on how you use the answers. https://mailkaro.com/templates/customer-feedback - App announcement email template (SaaS, "App Announcement"): Product announcement layout with supporting screenshot and CTA. When to send it: When a new version reaches the app stores. What to put in it: The main change, a screenshot and links to download or update. https://mailkaro.com/templates/app-announcement - Restaurant opening email template (Hospitality, "Restaurant Opening"): Venue opening campaign with warm visual storytelling and booking CTA. When to send it: A couple of weeks before opening, and again on opening day. What to put in it: Date, address, opening hours and a way to book a table. https://mailkaro.com/templates/restaurant-opening - Hotel offer email template (Hospitality, "Hotel Offer"): Seasonal hotel or staycation offer with a direct booking CTA. When to send it: Ahead of a quiet period or a weekend you want to fill. What to put in it: The offer, the dates it covers, what is included and a book button. https://mailkaro.com/templates/hotel-offer - Travel guide email template (Hospitality, "Travel Guide"): Destination guide email with editorial storytelling and curated recommendations. When to send it: Before a season starts, when people are planning trips. What to put in it: A few places to go, one practical tip each and a link to the full guide. https://mailkaro.com/templates/travel-guide - Referral program email template (Lifecycle, "Referral Program"): Referral launch email that explains the reward and makes sharing easy. When to send it: After a good experience, such as a delivered order or a solved ticket. What to put in it: What the friend gets, what the sender gets and a link they can share. https://mailkaro.com/templates/referral-program - Product drop email template (Creator, "Creator Drop"): Creator-style drop announcement with strong urgency and motion. When to send it: On the day of a limited release, with a teaser a few days earlier. What to put in it: What is dropping, how many there are, when it goes live and a link. https://mailkaro.com/templates/creator-drop - Course enrollment email template (Education, "Course Enrollment"): Course or cohort launch email with a clear join action. When to send it: When enrollment opens, with a reminder before it closes. What to put in it: What the course covers, who it is for, the start date and an enroll button. https://mailkaro.com/templates/course-enrollment - Real estate listing email template (Real Estate, "Real Estate Listing"): Property spotlight layout for listings, open houses, and neighborhood features. When to send it: When a property goes on the market or an open house is set. What to put in it: Price, size, a standout photo, the address and a way to book a viewing. https://mailkaro.com/templates/real-estate-listing - Christmas email template (Seasonal, "Christmas Greeting"): Warm holiday greeting with a short note, one link, and a social footer. When to send it: In the last week before the holidays, or on the day. What to put in it: A sincere thank you, your holiday opening hours and one link. https://mailkaro.com/templates/christmas-greeting - Black Friday email template (Seasonal, "Black Friday Sale"): Sale email that leads with the discount, a countdown and one button. When to send it: From the start of the sale, with a reminder on the last day. What to put in it: The discount, what is covered, the end time and one button. https://mailkaro.com/templates/black-friday-sale - New Year email template (Seasonal, "New Year Launch"): Fresh-start announcement with a countdown to the offer deadline. When to send it: In the first days of January, when people are setting plans. What to put in it: What is new, a short offer window and a link to start. https://mailkaro.com/templates/new-year-launch - Valentine's Day email template (Seasonal, "Valentine's Gift Guide"): Image-led gift guide that sends people to the gifts that ship in time. When to send it: Two weeks before the day, early enough to ship in time. What to put in it: Gifts grouped by budget, the last order date for delivery and a link for each group. https://mailkaro.com/templates/valentines-gift-guide - Halloween email template (Seasonal, "Halloween Special"): Short, playful offer with a countdown and a single button. When to send it: In the week before Halloween. What to put in it: A short offer, an end date and one button. https://mailkaro.com/templates/halloween-special - Mother's Day email template (Seasonal, "Mother's Day Offer"): Gift feature with a clear shipping cut-off so orders arrive in time. When to send it: Two weeks before the day, with a shipping cut-off. What to put in it: A few gift ideas, the last order date for delivery and a shop button. https://mailkaro.com/templates/mothers-day-offer - Birthday email template (Lifestyle, "Birthday Wishes"): Short birthday greeting with a small gift or discount code. When to send it: On the day, or a few days before, from your customer list. What to put in it: A short greeting, a small gift or code and when it expires. https://mailkaro.com/templates/birthday-wishes - Fitness challenge email template (Lifestyle, "Fitness Challenge"): Group challenge invite with a start date, a short video and a join button. When to send it: A week before the challenge starts. What to put in it: Start date, what to do each day, how to track it and a join button. https://mailkaro.com/templates/fitness-challenge - Wellness newsletter template (Lifestyle, "Wellness Newsletter"): Weekly wellness note with one tip, one routine and one link. When to send it: On a regular day each week. What to put in it: One tip, one routine or recipe and one link to read more. https://mailkaro.com/templates/wellness-newsletter - Insurance renewal email template (Finance, "Insurance Renewal"): Renewal reminder with the date, what is covered and a link to review. When to send it: About a month before a policy renews, with a reminder closer to the date. What to put in it: Renewal date, what is covered, any change in price and a link to review. https://mailkaro.com/templates/insurance-renewal - Consultation booking email template (Finance, "Consultation Booking"): Invite to book a free call, with a short video on what to expect. When to send it: After someone asks for advice, or as part of onboarding. What to put in it: What the call covers, how long it takes and a link to pick a time. https://mailkaro.com/templates/consultation-booking - Statement ready email template (Finance, "Statement Ready"): Notice that a new statement is ready, with a sign-in link and no account details. When to send it: Each time a new statement is issued. What to put in it: The statement period and a sign-in link. Do not put account numbers in the email. https://mailkaro.com/templates/statement-ready - B2B introduction email template (Business, "B2B Introduction"): Short outreach email: who you help, one result, one request for a call. When to send it: When you have a reason to write to this person, not as a mass mailing. What to put in it: Who you help, one relevant result and a single request for a short call. https://mailkaro.com/templates/b2b-introduction - Case study email template (Business, "Customer Case Study"): One customer story with the problem, what changed and the result. When to send it: When a customer reaches a result worth sharing and agrees to it. What to put in it: The problem, what changed, the result, a quote and a link to the full story. https://mailkaro.com/templates/customer-case-study - New hire announcement email template (Business, "Team Announcement"): Introduce a new hire, a promotion or a new office with a photo. When to send it: In a new person's first week, or when a change takes effect. What to put in it: A photo, the role, a few lines about them and a way to say hello. https://mailkaro.com/templates/team-announcement ## Part 3: Documentation (119 pages) ### Introduction Docs section: Getting started URL: https://docs.mailkaro.com/ MailKaro is a white-label, drag-and-drop email editor you embed in your product with a few lines of React. Your customers design on-brand emails; you get clean, render-ready HTML back. The editor ships as one npm package, `react-email-craft`, with a **react-email-editor-compatible API**, the same component, props, and ref, so existing code and designs work unchanged. Under the hood it renders the full MailKaro editor, and the server-side renderer turns a saved design into email-safe HTML or MJML. ##### How it fits together - **Embed the editor** in your app with `` from `react-email-craft`. Pass a publishable **embed token** (`pk_live_…`) that scopes the plan and enabled features. - **Save the design**, a JSON document you store in your own database. - **Render to HTML** on your server with `email-craft-sdk` and send it through whatever ESP you already use. Nothing paid is ever unlocked in the browser: entitlements are decided server-side from the token, so a missing, invalid, or expired token always falls back to the free editor. ##### Start here - Installation (https://docs.mailkaro.com/installation), add the package. - Quick start (https://docs.mailkaro.com/quickstart), the editor on screen in a few lines. - Backend integration (https://docs.mailkaro.com/backend), wire the server so AI, uploads, and plans light up (secrets stay server-side). - Unlayer compatibility (https://docs.mailkaro.com/migrate), existing designs load as-is. - Elements (https://docs.mailkaro.com/elements), every block and its options. ##### Frequently asked questions What is MailKaro?A white-label, drag-and-drop email editor you embed in your product, plus a server-side renderer that turns a saved design into email-safe HTML or MJML. Which package do I install?react-email-craft for React. Vue, Angular and plain JavaScript have vue-email-craft, angular-email-craft and vanilla-email-craft. For rendering on your server, add email-craft-sdk. Is it compatible with react-email-editor?Yes. react-email-craft has the same component, props and ref as react-email-editor, and existing Unlayer design JSON is converted when you call loadDesign(). Can the browser unlock paid features on its own?No. Entitlements are decided on the server from the embed token. A missing, invalid or expired token always falls back to the free editor. ### Why MailKaro URL: https://docs.mailkaro.com/why-mailkaro MailKaro is a drag-and-drop email editor you drop into your own product. Your users design emails visually, and your app gets back clean, ready-to-send HTML. This page explains, in plain language, what it is and why teams pick it. It is written to be easy to follow whether or not you write code. ##### What it is, in one line A white-label email editor you embed, plus a server-side renderer that turns a saved design into email-safe HTML or MJML. White-label means your customers see your brand, not ours. ##### Why it is easy - **Embed in a few lines.** Add one package and a key, and the editor is live in your app. - **Works in any framework.** React, Vue, Angular, and plain JavaScript, all the same way. - **No editor code in your bundle.** The editor loads in a secure iframe, so your app stays small and stays up to date on its own. - **Send-ready output.** One call turns a design into HTML that holds up in Gmail, Outlook, and Apple Mail, and it can export MJML too. - **Nothing to configure to start.** A free tier with the full editor and published pricing, with no sales call. ##### No backend? No problem. You do not need a backend to get started. Drop in the editor, design an email, and get the HTML in your own code with `exportHtml()` on the free editor (the Download HTML button in the editor toolbar is a Pro feature). There is nothing to set up and nothing to deploy, so you can explore MailKaro and see the output for yourself first. When you are ready to save designs, render server-side, or unlock paid features, add the backend SDK. Start small and grow into it. ##### You keep control of your stack This is the part that sets MailKaro apart. It sits in the flow, it does not sit between you and your data. - **Your storage.** Uploads go to your own S3 bucket. - **Your AI.** AI features run on your own provider key, held in your backend and never in the browser. - **Your email provider.** Send through whatever ESP you already use. - **Your data and users.** Designs are yours, and your customers never sign up with us. The shape is simple: your product calls MailKaro, and MailKaro talks to your S3, your AI, and your ESP. ##### For non-developers Think of MailKaro as the design surface inside your product. Your team drags blocks (text, images, buttons) onto a canvas, and MailKaro produces the finished email. You do not need to know HTML, and you are not sent off to a separate tool, because the editor lives inside the app you already use. ##### For developers - One npm package for the editor, one backend SDK for rendering and entitlements. - A published Cloud API (https://docs.mailkaro.com/cloud-api) with an OpenAPI spec, typed errors, and rate-limit headers. - Import existing HTML into an editable design, and export HTML, MJML, AMP, or plain text. - A self-hostable backend for teams that need everything on their own infrastructure. ##### How it compares Tools like Unlayer, Beefree, and Stripo are mature and ship large template libraries. If you want the most established hosted option, they are a good choice, and we will say so plainly. MailKaro is the better fit when you want developer control: your infrastructure, your AI, published pricing, and a clean SDK, without being tied into a closed ecosystem. We do not try to win on template count. We win on ownership and integration. ##### When to reach for MailKaro - You want an email editor inside your SaaS, CRM, or dashboard, branded as yours. - You need to turn a saved design into inbox-safe HTML or MJML from your own backend. - You want assets, AI, and data to stay on your infrastructure. - You are moving off Unlayer, Beefree, or a homegrown editor and want a clean, documented path. ##### Next steps - Quick start (https://docs.mailkaro.com/quickstart), embed the editor. - Backend integration (https://docs.mailkaro.com/backend), render and mint tokens on your server. - Migration guide (https://docs.mailkaro.com/migration-guide), bring your existing designs over. ##### Frequently asked questions Do I need a backend to try MailKaro?No. Drop in the editor, design an email and get the HTML in your own code with exportHtml() on the free editor (the Download HTML button in the editor toolbar is Pro). Add the backend SDK later to save designs, render on the server or unlock paid features. Where do uploads, AI and email sending run?On your side. Uploads go to your own S3 bucket, AI runs on your own provider key held in your backend, and you send email through whatever provider you already use. Does the editor add code to my app bundle?No. The editor loads in a secure iframe, so your bundle stays small and the editor stays up to date on its own. Which formats can I export?HTML and MJML from the server-side renderer. The Export docs also cover plain text, AMP and ZIP. ### Installation URL: https://docs.mailkaro.com/installation Install one package. React and React-DOM are peer dependencies (React 18+). ```bash npm install react-email-craft # or pnpm add react-email-craft # or yarn add react-email-craft ``` Styles auto-inject. ##### Install in three steps 1. **Install the package.** Run npm install react-email-craft, or pnpm add react-email-craft, or yarn add react-email-craft. 2. **Check your React version.** React and React-DOM 18 or newer must already be in your app. They are peer dependencies. 3. **Add the server SDK if you need it.** To render saved designs to email HTML on your backend, also run npm install email-craft-sdk. ##### Peer dependencies ```json package.json "peerDependencies": { "react": ">=18", "react-dom": ">=18" } ``` The package externalizes React, it uses *your* app's copy, so there's never a duplicate React in the bundle. ##### Server-side rendering (optional) To turn a saved design into email HTML on your backend, add the renderer. See Rendering & export (https://docs.mailkaro.com/rendering). ```bash npm install email-craft-sdk ``` ##### All packages on npm MailKaro's embeddable editors and backend SDK are published as unscoped npm packages. The old `@mailkaro/*` names are deprecated forwarding shims that re-export the new names. Open any package page to see its version, readme, and install command: - `react-email-craft` (https://www.npmjs.com/package/react-email-craft), React embeddable editor - `vue-email-craft` (https://www.npmjs.com/package/vue-email-craft), Vue wrapper - `angular-email-craft` (https://www.npmjs.com/package/angular-email-craft), Angular wrapper - `vanilla-email-craft` (https://www.npmjs.com/package/vanilla-email-craft), vanilla JS wrapper - `email-craft-sdk` (https://www.npmjs.com/package/email-craft-sdk), Node backend SDK (render & entitlements) Next: Quick start (https://docs.mailkaro.com/quickstart). ##### Frequently asked questions Which versions of React are supported?React and React-DOM 18 or newer. They are peer dependencies, so the package uses your app's copy and never bundles a second React. Do I need to import a CSS file?No. Importing the package injects the editor's stylesheet once, and it is guarded for server-side rendering and against duplicates. Do I need email-craft-sdk?Only if you want to render saved designs to HTML on your server. The editor itself needs just react-email-craft. ### Quick start URL: https://docs.mailkaro.com/quickstart Mount the editor, wire a ref, and read the design back. That's the whole loop. ```tsx Composer.tsx import { useRef } from "react"; import EmailEditor, { type MailkaroIframeEditorRef } from "react-email-craft"; export function Composer() { const editorRef = useRef(null); const onReady = () => { // Load a saved design (or leave empty for a blank canvas) // editorRef.current?.editor.loadDesign(savedDesign); }; const save = () => { editorRef.current?.editor.exportHtml(({ design, html }) => { // 'design' is JSON you store; 'html' is a preview export console.log(design, html); }); }; return (
); } ``` Unlayer-compatible editor saveDesign exportHtml loadDesign setMergeTags addEventListener Methods ##### The loop in five steps 1. **Import the editor.** Import EmailEditor from react-email-craft and create a ref with useRef. 2. **Mount it in a sized container.** Render EmailEditor inside an element with a height and pass your pk_live_ token, options and an onReady handler. 3. **Load a design or start blank.** In onReady, call editor.loadDesign with a saved design, or leave it out for a blank canvas. 4. **Read the design back.** Call editor.exportHtml in a save handler. You get the design JSON and a preview of the HTML. 5. **Store the design JSON.** Keep the design JSON in your own database, and render production HTML on your server so merge tags resolve against real data. ##### What you get back - **Design JSON**, the source of truth; store it and reload it later. - **HTML**, a preview export. For production sends, render on the server (see Rendering (https://docs.mailkaro.com/rendering)) so merge tags resolve against real data. Have existing Unlayer designs? They load automatically (https://docs.mailkaro.com/migrate). ### Backend integration URL: https://docs.mailkaro.com/backend Everything paid runs server-side. Add `email-craft-sdk` to your backend, expose a few small endpoints, and the embedded editor lights up, plan, AI, uploads, white-label, with **no secret ever in the browser** and no per-feature frontend code. ##### Set up your backend in five steps 1. **Install the SDK.** Run npm install email-craft-sdk on your backend. 2. **Create one client.** Set MAILKARO_SERVER_KEY, then build a single shared client with Mailkaro.fromEnv(process.env). 3. **Add the routes.** Expose GET /embed-runtime, which returns resolveRuntime(). Add POST /ai and POST /upload if you want AI and uploads, and GET /s3/list for the optional bucket browser. 4. **Allow the editor origin.** Set CORS to reflect https://embed.mailkaro.com with credentials, and allow the organization-id header if you use it. 5. **Point the editor at your runtime URL.** Pass your pk_live_ token and runtimeUrl to EmailEditor on the frontend. ##### Why a backend The editor renders in MailKaro's hosted iframe (`embed.mailkaro.com`) and holds **no secret of its own**. Your backend resolves the runtime server-to-server with the SECRET server key `sk_live_…` (`MAILKARO_SERVER_KEY`), the private half of your token pair (https://docs.mailkaro.com/embed-tokens); the publishable `pk_live_…` goes on the frontend. You never send an org id, the org resolves from the server key itself. ##### Install ```bash npm install email-craft-sdk # or pnpm add email-craft-sdk / yarn add email-craft-sdk ``` ##### Create the client One memoized instance, built from your environment (see the variables below): ```ts mailkaro.ts import { Mailkaro } from "email-craft-sdk"; // Reads MAILKARO_SERVER_KEY + optional AI / S3 / branding vars. Reuse this one instance. export const mailkaro = Mailkaro.fromEnv(process.env); ``` fromEnv MAILKARO_SERVER_KEY try/catch null requireClient() 503 ##### The endpoints the editor calls You give the editor one `runtimeUrl` (e.g. `/mailkaro/embed-runtime`); it derives the sibling `…/ai` and `…/upload` URLs itself (same origin, last path segment swapped). All four are **public**, the iframe carries none of your session cookies, optionally scoped by a per-tenant header you choose (see the note below) and gated by the token, never by a login. ```ts mailkaro.routes.ts, Express import { Router } from "express"; import multer from "multer"; import { mailkaro } from "./mailkaro"; export const router = Router(); const upload = multer(); // memory storage → file.buffer // 1) Runtime: plan + entitlements + capabilities (what the editor is allowed to do). Required. router.get("/embed-runtime", async (req, res) => { res.json(await mailkaro.resolveRuntime({ project: String(req.query.project ?? "") })); }); // 2) BYO AI, the provider key stays here. Body { method, input }. router.post("/ai", async (req, res) => { try { res.json(await mailkaro.ai(req.body?.method, req.body?.input ?? {})); } catch (e) { res.status(400).json({ error: e instanceof Error ? e.message : "AI request failed" }); } }); // 3) Drag-and-drop upload → YOUR S3. Multipart field "file". router.post("/upload", upload.single("file"), async (req, res) => { if (!req.file) return res.status(400).json({ error: "file is required" }); const orgId = String(req.header("organization-id") ?? "").trim(); if (!orgId) return res.status(400).json({ error: "organization-id header is required" }); try { // scopeId is REQUIRED (per-tenant isolation). The SDK also enforces an image-type allowlist, // a size cap, and sanitizes SVGs; a rejected upload throws and is surfaced as a 400 below. res.json(await mailkaro.uploadAsset({ buffer: req.file.buffer, filename: req.file.originalname, contentType: req.file.mimetype, scopeId: orgId, })); } catch (e) { res.status(400).json({ error: e instanceof Error ? e.message : "Upload failed" }); } }); // 4) OPTIONAL, the "browse my S3" tab. Presign with YOUR credentials. router.get("/s3/list", async (req, res) => { const org = String(req.header("organization-id") ?? "").trim(); if (!org) return res.json({ items: [] }); const prefix = mailkaro.s3AssetPrefix(org); const objects = await listObjects(prefix); // your S3 SDK res.json(await mailkaro.scopeS3Assets(org, objects, (key) => getSignedUrl(key))); }); ``` Or, in NestJS, the same four routes as a controller: ```ts mailkaro.controller.ts, NestJS @Controller("mailkaro") export class MailkaroController { constructor(private readonly mailkaro: MailkaroService) {} // .client = Mailkaro.fromEnv(process.env) @Get("embed-runtime") runtime(@Query("project") project?: string) { return this.mailkaro.client.resolveRuntime({ project }); } @Post("ai") ai(@Body() body: { method: string; input?: Record }) { return this.mailkaro.client.ai(body.method, body.input ?? {}); } @Post("upload") @UseInterceptors(FileInterceptor("file")) upload(@UploadedFile() file: any, @Headers("organization-id") org?: string) { const scopeId = org?.trim(); if (!scopeId) throw new BadRequestException("organization-id header is required"); return this.mailkaro.client.uploadAsset({ buffer: file.buffer, filename: file.originalname, contentType: file.mimetype, scopeId, }); } } ``` Prop | Type | Default | Description --- | --- | --- | --- GET /mailkaro/embed-runtime | resolveRuntime() | - | Plan, entitlements, merge tags + capabilities. Required. POST /mailkaro/ai | ai(method, input) | - | BYO AI, server-to-server. Powers the AI helper. POST /mailkaro/upload | uploadAsset(file) | - | Drag-drop images to your S3. See image uploads. GET /mailkaro/s3/list | scopeS3Assets(…) | - | Optional “browse my bucket” tab. See Amazon S3. The tenant header is yours. organization-id scopeId connectorHeaders ##### CORS The iframe fetches with `credentials: "include"`, so reflect the exact origin (never `*`) and allow the `organization-id` header: ```ts cors.ts app.use(cors({ origin: "https://embed.mailkaro.com", // the hosted editor's origin credentials: true, allowedHeaders: ["Content-Type", "organization-id"], })); ``` ##### Wire the editor to your backend On the frontend, point the editor at your runtime URL, that's all it needs: ```tsx Composer.tsx ``` automatically capabilities embedUrl ##### Environment variables `Mailkaro.fromEnv(process.env)` reads: Prop | Type | Default | Description --- | --- | --- | --- MAILKARO_SERVER_KEY | required | - | Your secret server key sk_live_…. The whole integration hangs off this. OPEN_AI_KEY / MAILKARO_AI_KEY / CLAUDE_AI_KEY | → AI | - | Your provider key (BYO AI). Any one enables the AI capability. MAILKARO_S3_BUCKET + MAILKARO_S3_REGION | → upload | - | Your S3 bucket + region for drag-drop uploads (standard AWS credential chain). MAILKARO_S3_PUBLIC_BASE_URL | optional | - | Serve uploaded assets from a CDN / custom domain instead of the raw S3 URL. MAILKARO_S3_PREFIX | optional | - | Key prefix for editor assets (defaults to mailkaro/). MAILKARO_LOGO_URL / MAILKARO_LOGO_ALT | → white-label | - | Show your own logo in the editor instead of the MailKaro badge. MAILKARO_API_URL | rarely set | - | Defaults to MailKaro's hosted API. MAILKARO_ORG_ID | leave unset | - | Not needed, the org resolves from the server key (token-only). What you DON'T need: runtimeUrl Next: Embed tokens (https://docs.mailkaro.com/embed-tokens) · AI (https://docs.mailkaro.com/ai-providers) · Amazon S3 (https://docs.mailkaro.com/amazon-s3) · Security (https://docs.mailkaro.com/security). ##### Frequently asked questions Which key goes where?The secret server key (sk_live_) stays on your backend, in MAILKARO_SERVER_KEY. The publishable key (pk_live_) goes on the frontend. A secret key never reaches the browser. Which environment variable is required?Only MAILKARO_SERVER_KEY. Mailkaro.fromEnv throws if it is missing. The AI, S3 and white-label variables are optional and switch those capabilities on. Do I need to send an organization id?No. The organization resolves from the server key itself. ### Load & save designs URL: https://docs.mailkaro.com/load-save A design is a JSON document. Save it from the editor, store it in your own database, and load it back later, exactly the react-email-editor loop. ```tsx Studio.tsx const ref = useRef(); // Save, the design JSON to store in your DB ref.current.editor.saveDesign((design) => { db.designs.save(id, design); }); // Load, restore a saved design (existing Unlayer designs auto-convert) ref.current.editor.loadDesign(design); ``` onReady onReady={(u) => u.loadDesign(design)} `loadDesign` accepts either a MailKaro design or an existing Unlayer design (https://docs.mailkaro.com/migrate), Unlayer JSON is converted on load, so your stored templates keep working. ### Export designs URL: https://docs.mailkaro.com/export Turn a design into whatever your pipeline needs, HTML, plain text, AMP, or a ZIP bundle. ```tsx ref.current.editor.exportHtml((data) => data.html); // email-safe HTML + design ref.current.editor.exportPlainText((data) => data.text); // text/plain part ref.current.editor.exportAmp((data) => data.amp); // AMP for Email ref.current.editor.exportZip((data) => data.zip); // HTML + MJML + AMP + text + JSON ``` For a document (https://docs.mailkaro.com/document-builder) or popup (https://docs.mailkaro.com/popup-builder) the same `exportHtml` returns the right output, it's builder-aware. Server-side, render with `email-craft-sdk` (`renderDesign`, `renderMjml`, `renderDocument`, `renderPopupHtml`), see Rendering & export (https://docs.mailkaro.com/rendering). Image and PDF export run server-side (headless). Surfacing them as in-editor callbacks is on the roadmap. ### Unlayer compatibility URL: https://docs.mailkaro.com/migrate `react-email-craft` exposes the same component, props, and ref API as `react-email-editor`, and reads its design JSON, so your existing designs load and render with no rework. ```diff EmailStudio.tsx - import EmailEditor from "react-email-editor"; + import EmailEditor from "react-email-craft"; ``` ##### What converts automatically - **Designs.** When you call `loadDesign()`, existing Unlayer design JSON is detected and converted to MailKaro's format, rows, columns, and column widths, plus these tools mapped to their MailKaro blocks: `text`, `heading`, `image`, `button`, `divider`, `menu`, `social`, `html`, `spacer`, `table`, `timer`, and `video`. Any other tool falls back to a raw-HTML or placeholder block so nothing is lost. - **Merge tags.** Unlayer's grouped merge-tag arrays/objects passed via `options.mergeTags` are flattened to MailKaro's format automatically. Nested groups become `Group · Tag` labels. Tags inside text render as editable pills. How storage works. saveDesign() MailKaro's ##### Ref API parity These Unlayer calls work unchanged: editor.loadDesign editor.loadBlank editor.saveDesign editor.exportHtml editor.exportPlainText editor.exportAmp editor.exportDocument editor.exportZip editor.setMergeTags editor.setBodyValues editor.showPreview editor.hidePreview editor.registerCallback editor.addEventListener editor.removeEventListener projectId appearance tools editorId config embed token New to the API? See the Editor component (https://docs.mailkaro.com/editor) reference. ### Migration guide URL: https://docs.mailkaro.com/migration-guide Change one import, your designs and code keep working. Swap `react-email-editor` → `react-email-craft` (or the vue / angular / vanilla equivalent). Existing Unlayer designs auto-convert on load; the ref API, events and options are compatible. See Unlayer compatibility (https://docs.mailkaro.com/migrate). ### Export HTML Docs section: Export URL: https://docs.mailkaro.com/export-html Email-safe, CSS-inlined HTML, the default export. ```ts ref.current.editor.exportHtml((data) => data.html); // server: renderDesign(design, { fullDocument: true }) // from email-craft-sdk ``` CSS is inlined (via juice) with media queries preserved, tested across major clients. See the export overview (https://docs.mailkaro.com/export). ### Export plain text URL: https://docs.mailkaro.com/export-text A text/plain alternative part for a multipart email. ```ts ref.current.editor.exportPlainText((data) => data.text); // server: renderPlainText(design) // from email-craft-sdk ``` ### Export AMP URL: https://docs.mailkaro.com/export-amp AMP for Email (AMP4EMAIL) output for interactive messages. ```ts ref.current.editor.exportAmp((data) => data.amp); // server: renderAmp(design) // from email-craft-sdk ``` ### Export ZIP URL: https://docs.mailkaro.com/export-zip A bundle: index.html + MJML + AMP + plain text + design JSON. ```ts ref.current.editor.exportZip((data) => data.zip); // Uint8Array // server: renderEmailZip(design) // from email-craft-sdk ``` ### Email Builder Docs section: Builders URL: https://docs.mailkaro.com/email-builder The default builder. A drag-and-drop canvas that outputs email-safe HTML tested across Gmail, Apple Mail, Outlook and more. ```tsx ``` `displayMode: "email"` is the default, so you can omit it. Every content block, merge tags, inbox previews (https://docs.mailkaro.com/inbox-previews) and pre-send QA (https://docs.mailkaro.com/qa-checks) apply here. Export with `exportHtml` (or `exportPlainText` / `exportAmp` / `exportZip`); MJML is available server-side via `renderMjml`. ### Page Builder URL: https://docs.mailkaro.com/page-builder Build landing pages on a wider canvas, same editor, more room, web-oriented output. ```tsx ``` `displayMode: "web"` widens the canvas (~960px) and is tuned for pages rather than inboxes. The Form (https://docs.mailkaro.com/elements) and Video blocks shine here. Output is standard HTML you host yourself. ### Document Builder URL: https://docs.mailkaro.com/document-builder Reports, proposals and contracts on a paged, print-optimized canvas, export to PDF. ```tsx ``` `displayMode: "document"` switches to a page-sized canvas (~US Letter). `exportHtml` returns a print-ready document (with `@page` rules) your browser or backend can turn into a PDF. Server-side, use `renderDocument` from `email-craft-sdk`. If you build a PDF or letter but keep `displayMode: "email"`, pass `inboxPreview={false}` (or `options.inboxPreview: false`) so the preview does not offer Gmail and Apple Mail, which only make sense for an email. The preview then also grows to show the whole page at its real width. A dedicated Page-Break tool for multi-page documents is on the roadmap. ### Popup Builder URL: https://docs.mailkaro.com/popup-builder Design signup / exit-intent popups, a centered modal with a dimming overlay. ```tsx ``` `displayMode: "popup"` gives a narrower modal canvas. `exportHtml` wraps the design in a centered modal + overlay + close button, ready to drop into any page. Server-side, use `renderPopupHtml` from `email-craft-sdk`. ### Image Editor URL: https://docs.mailkaro.com/image-editor Crop, rotate, flip, resize and filter images, baked into a new image, ready to send. The image editor's server-side engine ships in `mailkaro-headless`. Apply an edit set to any image and get the transformed bytes back: ```ts edit.ts import { applyImageEdits } from "mailkaro-headless"; const out = await applyImageEdits(inputBytes, { crop: { x: 0, y: 0, width: 800, height: 400 }, rotate: 90, grayscale: true, }); // store `out` on your CDN and swap the image URL ``` Operations apply in a fixed order: crop → rotate → flip → resize → brightness → contrast → grayscale → blur. Install `jimp` alongside (loaded on demand, like Puppeteer for export), and store the result with your upload handler (https://docs.mailkaro.com/image-uploads). ##### The editor UI The interactive panel ships as `ImageEditorPanel` (from `react-email-craft`), rotate, flip, brightness / contrast and grayscale controls over a live preview. On save it emits the same edit set you hand to `applyImageEdits`: ```tsx import { ImageEditorModal } from "react-email-craft"; bakeAndUpload(edits)} // → applyImageEdits on your server onClose={() => setEditing(false)} /> ``` Use `ImageEditorPanel` for an always-on panel, or `ImageEditorModal` to open it as a dialog. Both emit the same edit set for `applyImageEdits` to bake server-side. Binding the modal to an image block's double-click on the canvas is the final, visual integration step. ### Vanilla JS Docs section: Frameworks URL: https://docs.mailkaro.com/vanilla No framework? Use the `unlayer` global from `vanilla-email-craft`, a drop-in for Unlayer's embed script. Change the import; your `unlayer.init(...)` code keeps working. ```bash npm install vanilla-email-craft ``` ```html index.html
``` unlayer window ``` editor.value.editor.exportHtml(...) load loaded ready updated Next: Events (https://docs.mailkaro.com/events). ### Angular URL: https://docs.mailkaro.com/angular A drop-in for `angular-email-editor`, the `` component and `EmailEditorComponent`. ```bash npm install angular-email-craft ``` ```ts app.component.ts import { Component, ViewChild } from "@angular/core"; import { EmailEditorComponent } from "angular-email-craft"; @Component({ standalone: true, imports: [EmailEditorComponent], template: ` `, }) export class AppComponent { @ViewChild(EmailEditorComponent) private emailEditor!: EmailEditorComponent; options = { displayMode: "email" }; editorLoaded() { console.log("Editor is ready"); } exportHtml() { this.emailEditor.editor?.exportHtml((data) => console.log("exportHtml", data)); } } ``` EmailEditorModule NgModule imports: [EmailEditorModule] Next: Methods & ref (https://docs.mailkaro.com/methods). ### Editor component Docs section: The editor URL: https://docs.mailkaro.com/editor `` (the default export of `react-email-craft`) is the Unlayer-shaped component. Here's every prop it reads. Prop | Type | Default | Description --- | --- | --- | --- ref | Ref | - | Imperative handle, see Methods. token | string | - | Publishable embed token (pk_live_…). The editor sends it to the API, which decides which features to enable. No/invalid/expired → free editor. options | { mergeTags?, … } | - | Only options.mergeTags is read (see Merge tags). Other Unlayer options are ignored. onReady | (unlayer?) => void | - | Fires once when the editor is usable. onLoad | (unlayer?) => void | - | Fires once on mount, just before onReady. style | CSSProperties | - | Applied to the wrapper element. project | string | "embed" | Project identifier passed to the runtime. apiBaseUrl | string | "https://api.mailkaro.com" | Override the MailKaro API URL. Only for self-hosted/enterprise or local testing (e.g. http://localhost:4000). googleDrive | boolean / object | - | Show the “Connect Google Drive” tab. See Google Drive. s3 | S3PublicConfig / S3PrivateConfig | - | Show an “Amazon S3” tab. See Amazon S3. logoUrl / logoAlt | string | - | White-label logo in the palette footer. Takes effect only when the token grants branding.white_label. minHeight className editorId projectId appearance tools config ##### Need lower-level control? For a fully props-driven, non-Unlayer API (design objects, full config, snapshots), use `EmailEditor` from `react-email-craft` (https://docs.mailkaro.com/react). ### Editing on the canvas URL: https://docs.mailkaro.com/editing MailKaro edits content **directly on the canvas**, like a document editor. Most changes need no side panel, click and type, drag to resize, right-click for actions. The inspector opens only when you ask for it. ##### Right-click menu Right-click any **block, row, or column** for a quick-actions menu (Google-Docs style). It opens on the opposite side of the cursor so it never covers what you clicked. Prop | Type | Default | Description --- | --- | --- | --- Edit settings | block · row · column | - | Opens that element's full inspector on demand. Cut / Copy / Paste | block | - | Move a block via an in-editor clipboard. Paste drops it after the clicked block, or into a column with Paste here. Duplicate | block · row | - | Clone in place. Move up / down | block · row | - | Reorder within the column / body. Add column | row · column | - | Add a column to the row (up to 4). Lock | block | - | Toggle the block's lock (also see per-block Protection). Merge cells / Split cell | table | - | Block-specific: a table adds its own actions, merge a selected cell range, or split a merged cell. Delete | block · row · column | - | Remove, with a confirmation prompt. The menu lists the actions common to every element **plus that element's own**, e.g. a Table (https://docs.mailkaro.com/elements) also offers **Merge cells** / **Split cell** for the cells you've selected on the canvas. keeps the components palette visible right-click → Edit settings Block inspector ##### Header & footer rows Give a row a **section role** (row inspector → Section) of `header` or `footer`. Header rows pin to the **top** and footer rows to the **bottom** of the email, in the canvas, the preview, and every export, no matter where they sit in the list. Stored as `row.settings.role`; ordering is applied by `orderRowsByRole` in the renderer, so server-side renders match the editor. ##### Mobile design mode Toggle the **Mobile** device view to preview at phone width, and set per-block **mobile overrides** in the block's Responsive section (mobile font size and alignment). They're stored as `block.mobile_styles` and emitted in an `@media (max-width: 620px)` query, so a block can look different on mobile without a second design. Any CSS property works via the data model; the inspector surfaces the common ones. ##### Inline text & table editing - **Text & heading** blocks edit inline with a formatting toolbar; type merge tags as `{{first_name}}` pills right in the flow. - **Table** cells are editable on the canvas, click a cell and type. Shift-click a range and use **Merge cells** / **Split cell** (see Elements → Table (https://docs.mailkaro.com/elements)). ##### On-canvas media resize Select an image, GIF, or video and drag any of its **8 handles** (corners + edges) to resize; a live percentage badge shows the width. Text-wrapped media resizes edge-anchored. Double-click a media block to open its asset library (https://docs.mailkaro.com/image-libraries). ##### Keyboard shortcuts ⌘/Ctrl+Z Undo ⌘/Ctrl+Shift+Z Redo ⌘/Ctrl+D Duplicate ⌘/Ctrl+S Save version Delete Remove ⌘/Ctrl+C/X/V Copy/Cut/Paste Shortcuts are ignored while you're typing in a field or a text block, so they never interrupt editing. ### Preview designs URL: https://docs.mailkaro.com/preview-designs See the rendered email at desktop and mobile widths. Toggle preview from the toolbar to view the design as recipients will, switching device widths. For real client simulations, see inbox previews (https://docs.mailkaro.com/inbox-previews). ### Blank design URL: https://docs.mailkaro.com/blank-design Start from an empty canvas. The editor opens blank by default. Seed a specific starting point with `createEmptyDesign()` or a template (https://docs.mailkaro.com/templates), and load it in `onReady`. ### Change events URL: https://docs.mailkaro.com/change-events React to every edit. Listen for `design:updated` via `addEventListener` (or the `onDesignChange` prop on the native API) to autosave or sync as the user edits. See events (https://docs.mailkaro.com/events). Coming from react-email-editor? Any `on...` prop is attached as an event listener, so`onDesignUpdated` and `onDesignLoad` work as they do there, and `onReady` and`onLoad` receive the editor. Pass your options in an `options` object if you like; a top-level prop wins over the same key inside it. ### Editor behavior URL: https://docs.mailkaro.com/editor-behavior Sensible defaults for how the canvas behaves, undo, preview, responsive, blank start. ##### Undo / redo Full history with keyboard shortcuts (⌘/Ctrl+Z, ⇧⌘/Ctrl+Z). Typing coalesces into single steps, so undo doesn't rewind one letter at a time. ##### Preview Toggle a desktop / mobile preview from the toolbar to see the rendered email before exporting. ##### Responsive controls Per-block `mobile_styles` overrides plus `hide_mobile` / `hide_desktop`, see display conditions (https://docs.mailkaro.com/display-conditions). ##### Blank vs. starter The editor opens blank by default (`createEmptyDesign`); load a saved design (https://docs.mailkaro.com/load-save) or a starter template to begin from content. ### Responsive controls URL: https://docs.mailkaro.com/responsive-controls Tune how each block behaves on mobile. - `mobile_styles`, per-block overrides applied under a mobile media query - `hide_mobile` / `hide_desktop`, show a block only where it belongs - Stack-on-mobile for columns Preview both breakpoints from the toolbar, see editor behavior (https://docs.mailkaro.com/editor-behavior). ### Text editing URL: https://docs.mailkaro.com/text-editing Rich text with inline formatting, merge-tag chips, tables, and direction control. Text and heading blocks are fully rich, bold, italic, links, lists, colors, with merge tags (https://docs.mailkaro.com/merge-tags) inserted as editable chips rather than raw braces. ##### Tables The Table block supports adding / removing rows and columns and merging / splitting cells. ##### Text direction Right-to-left languages are supported via `appearance.direction: "rtl"`, applied across the canvas and the exported HTML. ##### Paste from Word and Google Docs Text pasted from Word, Outlook or Google Docs arrives clean. Their typed bullets and numbers become real lists (with nested levels), and their classes, fonts, point sizes and spacing are dropped, while bold, italic, underline, links and colors stay. Text pasted from anywhere else is left as it is. There is nothing to turn on. ### Clean paste URL: https://docs.mailkaro.com/clean-paste Paste from Word, Google Docs or the web and get clean, on-brand content, not a mess of inline styles. When a user pastes, the editor sanitizes the HTML: scripts, styles, classes and Office cruft are stripped, only a safe allowlist of formatting tags survives, and links keep just their`href`. ```ts import { cleanPastedHtml } from "react-email-craft"; cleanPastedHtml('

Hi there

'); // → "

Hi there

" ``` See also text editing (https://docs.mailkaro.com/text-editing). ### Emojis URL: https://docs.mailkaro.com/emojis A searchable emoji picker for text blocks and subject lines. The picker is backed by a keyword-tagged set you can also query directly: ```ts import { searchEmoji } from "react-email-craft"; searchEmoji("launch"); // → [{ char: "🚀", name: "rocket", … }] ``` Grouped by smileys, gestures, hearts, nature, objects and symbols. See text editing (https://docs.mailkaro.com/text-editing). ### Inline font controls URL: https://docs.mailkaro.com/inline-font Bold, italic, underline, plus font family, size and color on the selected text. The rich-text toolbar applies formatting to the current selection. The pure transform behind it is exposed for programmatic use: ```ts import { applyInlineFormat } from "react-email-craft"; applyInlineFormat("Hello world", 0, 5, { bold: true }); // → "Hello world" ``` See also text editing (https://docs.mailkaro.com/text-editing) and clean paste (https://docs.mailkaro.com/clean-paste). ### Spell checker URL: https://docs.mailkaro.com/spell-checker Native spell-checking in every text field. Text and heading blocks are `contenteditable`, so the browser's built-in spell checker underlines misspellings and offers corrections automatically, in the user's own language, with no setup and nothing to send to a third party. See text editing (https://docs.mailkaro.com/text-editing). ### Methods & ref URL: https://docs.mailkaro.com/methods The Unlayer-shaped ref exposes an `editor` object. Grab it from a `useRef` and call these after `onReady`. ```ts interface MailkaroIframeEditorRef { editor: { saveDesign: (cb: (design: Design) => void) => void; exportHtml: (cb: (data: { design: Design; html: string }) => void) => void; exportAmp: (cb: (data: { design: Design; amp: string }) => void) => void; exportDocument: (cb: (data: { design: Design; html: string }) => void) => void; exportZip: (cb: (data: { design: Design; zip: Uint8Array }) => void) => void; exportPlainText: (cb: (data: { design: Design; text: string }) => void) => void; loadDesign: (design: Design) => void; loadBlank: (options?: { backgroundColor?: string; contentWidth?: number }) => void; setBodyValues: (values: Record) => void; setMergeTags: (tags: unknown) => void; showPreview: (device?: "desktop" | "mobile") => void; hidePreview: () => void; addEventListener: (event: string, handler: () => void) => void; removeEventListener: (event: string, handler: () => void) => void; registerCallback: (type: "image", cb: (file: File, done: (r: { url: string }) => void) => void) => void; }; } ``` ###### saveDesign(cb) Hands your callback the current design JSON, store this. ```ts editorRef.current?.editor.saveDesign((design) => { db.emails.update(id, { design }); }); ``` ###### exportHtml(cb) Hands your callback both the design and a rendered HTML string. ```ts editorRef.current?.editor.exportHtml(({ design, html }) => { console.log(html); }); ``` email-craft-sdk ###### loadDesign(design) Loads a saved design. Unlayer JSON is auto-converted; MailKaro designs load as-is; fresh/ converted designs are widened to the canvas. ###### loadBlank(options?) Clears the canvas to an empty design, optionally seeding the body `backgroundColor` and `contentWidth`. ```ts editorRef.current?.editor.loadBlank({ backgroundColor: "#ffffff", contentWidth: 600 }); ``` ###### setBodyValues(values) Merges body-level values into the current design. Keys are the Unlayer camelCase names (`backgroundColor`, `contentWidth`, `fontFamily`…), mapped to the design schema for you. ###### setMergeTags(tags) Replaces the field-picker tags at runtime (same shape as `options.mergeTags`). See Merge tags (https://docs.mailkaro.com/merge-tags). ###### showPreview(device?) / hidePreview() Opens a device-framed preview overlay of the current design (`"desktop"` or `"mobile"`), and closes it. The preview renders through the same engine as `exportHtml`, so it reflects the active builder mode. ```ts editorRef.current?.editor.showPreview("mobile"); // …later editorRef.current?.editor.hidePreview(); ``` ### Events URL: https://docs.mailkaro.com/events Two ways to react to changes: the Unlayer-style event bus, or a React callback. ##### design:updated Register through the ref inside `onReady`. It fires on every design mutation (handlers receive no arguments, call `saveDesign`/`exportHtml` to read current state). ```ts const onReady = () => { const handler = () => { editorRef.current?.editor.saveDesign((d) => autosave(d)); }; editorRef.current?.editor.addEventListener("design:updated", handler); }; ``` ##### onReady / onLoad Both fire exactly once on mount, `onLoad` first. Use them to load an initial design or wire listeners. ##### React callback (lower-level) If you use `EmailEditor` (https://docs.mailkaro.com/react) directly, pass `onDesignChange`, it receives the full design on every change. ```tsx autosave(design)} /> ``` ### Configuration URL: https://docs.mailkaro.com/configuration When you use `EmailEditor` (https://docs.mailkaro.com/react) directly, a `config` object tailors appearance, branding, panels, localization, AI, and more. ```ts interface MailkaroConfig { appearance?: { mode?: "light" | "dark"; direction?: "ltr" | "rtl"; theme?: MailkaroTheme; customCss?: string | string[] }; branding?: { badge?; assetLibraryTitle?; templateLibraryTitle?; paletteLogoUrl?; paletteLogoAlt?; toolbarName?; toolbarLogoUrl? }; ui?: { panels?: { content?; blocks?; body? }; minimap?: boolean; rowInset?: boolean; builderLook?: boolean; devices?: { id; label; width; icon? }[]; toolbar?: { … } }; localization?: { locale?: string; messages?: Partial }; assets?: { googleDrive?; s3Connector?; unsplashConnector?; pexelsConnector? }; blocks?: { disabled?: BlockType[]; limits?: Partial> }; colors?: { presets?: string[]; brand?: string[]; recent?: boolean | number }; sendTestEmail?: (email: { html; subject; to }) => Promise; linkTypes?: { id; label; url_template?; prefix?; placeholder? }[]; comments?: { key?; user; members?; canWrite?; canModerate?; load; create; reply; resolve; remove }; // see Comments textEditor?: { customButtons?: { name; label?; icon?; text?; onAction? }[] }; ai?: { adapter?: MailkaroAiAdapter; defaultPrompt?; defaultSubjectCount? }; collaboration?:{ sessionId; user; adapter?; showPresence? }; role?: "owner" | "admin" | "editor" | "viewer"; // "viewer" ⇒ read-only editor entitlements?: MailkaroEntitlements; // usually server-supplied policy?: MailkaroProjectPolicy; plugins?: MailkaroPlugin[]; } ``` role viewer policy.read_only editor admin owner ##### appearance `mode` switches light/dark; `direction` supports RTL; `theme` overrides CSS variables, `bg`, `panel`, `text`, `accent`, `accentStrong`, `canvas`, `font`, `radiusLg`, `shadow`, and more. ```tsx ``` ##### branding & ui - `branding.paletteLogoUrl`, your logo in the palette footer (needs the `branding.white_label` entitlement). - `branding.toolbarName` and `branding.toolbarLogoUrl`, your own name and logo at the left of the toolbar instead of MailKaro (needs the `branding.white_label` entitlement). - `ui.toolbar.brand`, set it `false` to hide that brand block, for example when your page already shows your logo. This works on every plan. - `ui.panels`, hide any of `content`, `blocks`, `body` by setting it `false`. - `ui.devices`, the screen sizes in the toolbar, as `{ id, label, width, icon? }`. The default is Desktop and Mobile. The first size is the one the editor opens in, `desktop` keeps the design's own content width, and no size is ever wider than that width. - `ui.minimap`, `true` adds a small map of the whole email at the top right of the canvas, a box for each row and a frame for what is on screen. Click or drag it to scroll, or use the arrow keys. It is off by default, it hides when the whole email already fits, and it is not shown while previewing. - `ui.rowInset`, `true` draws each row's left and right padding on the canvas, as the sent email does, so the colour behind the cards shows around them. Off by default, which keeps the canvas as it always was. - `ui.builderLook`, `true` gives each builder its own look on the canvas: a sheet of paper for `document`, a browser frame for `page` and a floating card for `popup`. Off by default, and it never changes the exported HTML, PDF or document, only how the editor draws the canvas. - `ui.toolbar`, toggle `undoRedo`, `deviceToggle`, `preview`, `saveVersion`, `exportJson`, `exportHtml`, or add `customActions`. Paid toolbar items also require the matching entitlement. ##### blocks `blocks.disabled` removes block types from the palette and stops them being added. `blocks.limits` caps how many blocks of a type one design can hold; the palette tile says "Limit reached" until a block is deleted. The config only narrows what the plan already allows. Blocks already in a design stay, and drag, click, duplicate and paste all follow the same rules. ```tsx ``` ##### colors Every color field has a small arrow beside the swatch that opens your saved colors: `colors.brand` first, then `colors.presets`, then the colors the person used last. `recent` is `true` (8 colors) by default, a number sets how many, and `false` turns it off. Recent colors live in the browser's local storage; when storage is blocked the picker still works. Values must be hex colors such as `#0d9488`, and anything else is ignored. With no palette and recent colors off, the field is just the native picker. ```tsx ``` ##### linkTypes `linkTypes` adds your own kinds of button link to the Action Type list, such as WhatsApp or a booking page. The person types a value and the editor builds the link: give a `url_template` with `{value}` in it, or a `prefix` the value is added to. The value is URL-encoded (merge tags in it are kept), the finished link is stored on the button, and the typed value is kept so it can be edited later. A type is ignored unless it starts with `https://`, `http://`, `mailto:`, `tel:` or a merge tag, because email clients drop other kinds of link. The ids `open-website`, `send-email`, `call-phone`, `unsubscribe` and `view-in-browser` are taken. ```tsx ``` ##### comments and sendTestEmail - `comments` keeps comment threads on your own server instead of in the browser. See Comments (https://docs.mailkaro.com/comments) for the adapter. - `sendTestEmail` adds a "Send a test email" button that calls your function. See Test email (https://docs.mailkaro.com/test-email). `ui.toolbar.sendTestEmail: false` hides it. ##### textEditor `textEditor.customButtons` adds up to eight buttons to the text and heading toolbar. A button either inserts `text` or runs `onAction(selectedText, apply)`; `apply(text)` replaces the selection, or inserts at the cursor when nothing is selected. It writes plain text, never HTML, and it can be called later (after a fetch) because the selection is remembered when the button is clicked. A button needs a `name` made of letters, numbers, dashes or underscores, and one of `text` or `onAction`; others are ignored. A function that throws does not break editing. ```tsx apply(selected.toUpperCase()) } ] } }} /> ``` ##### ai & collaboration Plug your own AI backend via `ai.adapter` (four async methods: generate design, rewrite text, subject lines, alt text). Enable live presence via `collaboration`. Both are gated by plan + policy (https://docs.mailkaro.com/plans). ##### policy A per-project policy can only *remove* capability the plan granted: `read_only`, `allow_ai`, `allow_exports`, `allow_uploads`, `allow_collaboration`, `allow_raw_html`, `allow_external_images`, `allow_custom_fonts`. See Plans & entitlements (https://docs.mailkaro.com/plans). ### Native props API URL: https://docs.mailkaro.com/react `EmailEditor` is the lower-level, fully props-driven component. Use it when you want design objects and config instead of the Unlayer shape. ```tsx App.tsx import { useRef } from "react"; import { EmailEditor, type EmailEditorRef } from "react-email-craft"; import { createEmptyDesign } from "email-craft-sdk"; function App() { const ref = useRef(null); return ( save(design)} style={{ height: "100vh" }} /> ); } ``` ##### Props Prop | Type | Default | Description --- | --- | --- | --- initialDesign | Design | - | Design to load on mount. Use createEmptyDesign() or createStarterDesign(). mergeTags | Record | - | Field-picker tags. config | MailkaroConfig | - | See Configuration. onDesignChange | (design: Design) => void | - | Fires on every design change. assetSources / assetConnectors | AssetSource[] / AssetConnector[] | - | Extra asset libraries and connectors. className / style | string / CSSProperties | - | Wrapper styling. ##### Ref methods Method | Type | Default | Description --- | --- | --- | --- getDesign() | () => Design | - | Current design JSON. exportHtml(mergeTags?) | (tags?) => string | - | Rendered HTML; pass tag values to substitute. loadDesign(design) | (design) => void | - | Replace the current design. saveSnapshot(label?) | (label?) => void | - | Capture a version. getSnapshots() | () => EditorSnapshot[] | - | List versions. restoreSnapshot(id) | (id) => void | - | Restore a version. ### Elements Docs section: Elements URL: https://docs.mailkaro.com/elements MailKaro ships **14 content blocks**. Drag them from the palette into a column; each has its own inspector. Below are the blocks and their configurable properties. Heading Text Image GIF Video Button Divider Spacer Social Menu Form Timer Table Carousel HTML Right-click any block, row, or column Cut Copy Paste Duplicate Move up/down Lock Delete Edit settings ##### Common properties Every block shares these, at the bottom of its inspector: - **Protection**, `locked`, `content_locked`, `style_locked`, `delete_locked`, `move_locked`. - **Visibility**, `visible_if`, a merge-tag condition like `{{first_name}} != ""`. - **Responsive**, `hide_desktop`, `hide_mobile`. - Any block can be saved as a **global block** (edits propagate to every instance) or annotated with **comments**. ##### Heading Single-line headline with heading styles (h1-h4). Property | Controls | Default --- | --- | --- text | Headline text | "Heading" tag | Level (h1-h4) | "h1" font_family / font_weight / font_size | Typography (size 12-72) | "body" / "400" / 22 color | Text color | #1a2b4a align | left / center / right / justify | "left" line_height / letter_spacing | Line height 80-200%, tracking 0-12px | 140 / 0 container_padding | Outer padding 0-40px | 10 ##### Text Rich text with formatting and inline merge tags (edited on-canvas). Property | Controls | Default --- | --- | --- html | Rich text HTML |

…

font_family / font_weight / font_size | Typography (size 10-72) | "body" / "400" / 16 color | Text color | #14213d align | left / center / right / justify | "left" line_height / letter_spacing | 80-200%, 0-12px | 140 / 0 container_padding | 0-40px | 10 ##### Image & GIF Hero images, product shots, banners, and animated GIFs. Both share the same rich property set, including borders, corner radius, filters, crop, and text-wrap. Property | Controls | Default --- | --- | --- src / alt / href / target | Source, alt text, click link, target | , width | Display width 10-100% | 100 auto_width | Use the image's natural width | false align | left / center / right / justify | "center" text_wrap | none / left / right, float so text flows beside it | "none" border_style | none / solid / dashed / dotted | "none" border_width / border_color / border_radius | 0-20px, color, 0-80px | 0 / #14213d / 18 crop_aspect | free / square / portrait / landscape / wide | "free" focal_x / focal_y | Focal point 0-100% | 50 / 50 brightness / contrast / saturation | Filters 0-200% | 100 grayscale / blur | 0-100%, 0-20px | 0 / 0 padding | Container padding 0-60px | 10 Text wrap ##### Video Linked video teaser (thumbnail + play affordance) that opens the video URL. Same crop/filter set as image, no border/text-wrap. Property | Controls | Default --- | --- | --- title / url / thumbnail / alt | Title, link, preview image, alt | , width / auto_width | 10-100%, natural width | 100 / false crop_aspect | free / square / portrait / landscape / wide | "wide" focal_x/y, brightness, contrast, saturation, grayscale, blur | Media filters | , padding | 0-60px | 10 ##### Button Email-safe CTA button. Property | Controls | Default --- | --- | --- label / href | Text and destination | "Shop now" action_type | open-website / send-email / call-phone / unsubscribe / view-in-browser | "open-website" background_color / color | Background + text color (token-aware) | #ef476f / #ffffff auto_width / width | Fit to content, or 20-100% | true / 40 border_radius | Rounded corners 0-40px | 999 border_style / border_width / border_color | none/solid/dashed/dotted, 0-8px | none / 0 padding_top/right/bottom/left | Inner padding | 14 / 22 / 14 / 22 container_padding | Outer padding 0-40px | 10 Special links. unsubscribe view-in-browser {{unsubscribe_url}} {{web_version_url}} Pre-send QA ##### Divider Property | Controls | Default --- | --- | --- color / thickness / style | Line color, 1-8px, solid/dashed/dotted | #d9dce5 / 1 / solid width | Line width 10-100% | 100 align / container_padding | Alignment, 0-40px | center / 10 ##### Spacer Property | Controls | Default --- | --- | --- height | Vertical height 8-120px | 24 background_color / container_padding | Fill color, 0-40px | transparent / 0 ##### Social Linked social icons from a 15-platform catalog (Facebook, X, LinkedIn, Instagram, YouTube, TikTok, WhatsApp, and more). Property | Controls | Default --- | --- | --- items | List of { network, label, href } | Facebook, Instagram, LinkedIn icon_type | circle / round / square (+ black/white variants) | "circle" icon_color / icon_size | Glyph color, 20-48px | #ffffff / 32 spacing / align / container_padding | Gap 0-24px, alignment, 0-40px | 5 / center / 10 ##### Menu Inline navigation links for headers. Property | Controls | Default --- | --- | --- items | List of { label, href } | Home, Products, Contact color / font_size / font_weight | Link color, 10-24px, weight | #14213d / 14 / 600 spacing / align / container_padding | Gap 0-40px, alignment, 0-40px | 20 / center / 10 ##### Form A landing-page capture block (headline + field + submit). Property | Controls | Default --- | --- | --- headline / button_label / field_placeholder | Copy | "Join the waitlist" / … button_color / button_text_color | Submit button colors | #14213d / #ffffff background_color / border_color | Form surface | #ffffff / #d9dce5 padding / border_radius | 0-40px each | 18 / 18 ##### Timer Countdown to a date, for launches and sales. Property | Controls | Default --- | --- | --- label / end_date | Caption and target datetime | "Offer ends in" / ISO date background_color / color | Block + text color (token-aware) | #14213d / #ffffff align / padding / border_radius | Alignment, 0-40px each | center / 18 / 18 ##### Table An email-safe data table with a header row, striped body rows, per-cell borders, and **cell merging**, build pricing tables, comparison grids, and spec sheets that render as a real `` (with `colspan`/`rowspan`) in every client. Property | Controls | Default --- | --- | --- rows | Grid of cells, add/remove with + Row / − Row / + Column / − Column | 4×3 sample header_row | Treat the first row as a styled header (th) | true header_background / header_color | Header row fill and text color | #14213d / #ffffff footer_row | Style the last row as a footer | false footer_background / footer_color | Footer fill and text color (when footer_row is on) | #14213d / #ffffff border_style / border_width / border_color | none/solid/dashed/dotted, 0-6px, color | solid / 1 / #e6ecea cell_padding | Inner padding of every cell, 0-30px | 10 striped / stripe_color | Zebra-stripe alternating body rows | true / #f4f8f7 font_family / font_weight | Cell typography, theme font or Arial/Helvetica/Georgia/Trebuchet, 400-700 | "body" / "400" font_size / text_color | Body cell size 10-24px and color | 14 / #14213d line_height / letter_spacing | 80-200%, 0-12px | 140 / 0 align | Cell text align, left / center / right / justify | "left" width / container_padding | Table width 10-100%, outer padding 0-40px | 100 / 10 min_rows / max_rows | Limits enforced by the +/− Row controls | 1 / 20 min_columns / max_columns | Limits enforced by the +/− Column controls | 1 / 8 Edit cells on the canvas. Merge & split cells. Shift-click Merge cells or right-click menu Split cell colspan rowspan ##### Carousel An image slider. Email has no reliable JavaScript, so the carousel degrades to a **vertical stack of images** (each optionally linked), the standard email-safe fallback that renders everywhere. Property | Controls | Default --- | --- | --- slides | Array of { src, alt, href?, caption? }, add / reorder / remove in the inspector | 3 sample slides align | Carousel alignment, left / center / right | "center" width | Max width 20-100% | 100 gap | Vertical space between stacked slides, 0-64px | 12 border_radius | Rounded image corners 0-40px | 12 show_caption | Render each slide's caption beneath it | false Add, reorder, and remove slides in the block inspector; each slide takes an image URL, alt text, an optional link, and an optional caption. ##### HTML Raw HTML for power users. Gated by the `allow_raw_html` policy. Property | Controls | Default --- | --- | --- html | Raw HTML markup |
… background_color / padding / border_radius | Block surface, 0-40px each | #ffffff / 0 / 0 ### Text Docs section: Content blocks URL: https://docs.mailkaro.com/block-text A rich-text paragraph block, the workhorse of any email. ##### Options - Inline formatting: bold, italic, underline, strikethrough, links, lists - Font family, size, color, line height, letter spacing - Alignment and padding - Editable merge-tag chips inserted inline Text and Heading share the same rich editor, see Text editing. ### Heading URL: https://docs.mailkaro.com/block-heading An H1-H6 heading with its own type scale. ##### Options - Heading level (H1-H6) - Font family, size, weight, color - Alignment, line height, padding - Merge tags ### Image URL: https://docs.mailkaro.com/block-image A responsive image with an optional link. ##### Options - Source URL (upload, stock, S3, Drive) + alt text - Width (auto or fixed %), alignment, padding - Optional destination link - Double-click to open the image editor (crop/rotate/filters) ### Button URL: https://docs.mailkaro.com/block-button A call-to-action button rendered with bulletproof table markup. ##### Options - Label text and destination URL - Background and text color, border radius, border - Padding (inner) and alignment - Full-width toggle - Optional hover colors (shown in Gmail on the web and Apple Mail; other apps keep the normal colors) ### Divider URL: https://docs.mailkaro.com/block-divider A horizontal rule that separates sections. ##### Options Value | Type | Default | Description --- | --- | --- | --- color | color | #d9dce5 | The line color. A design token such as token.primary also works. thickness | number (px) | 1 | How thick the line is. style | solid / dashed / dotted | solid | The line style. width | number (%) | 100 | How much of the row the line covers, from 10 to 100. align | left / center / right | center | Where a line narrower than the row sits. padding_top, padding_bottom | number (px) | 8 | Space above and below the line. ```json { "type": "divider", "values": { "color": "#d9dce5", "thickness": 1, "style": "dashed", "width": 60, "align": "center" } } ``` ### Spacer URL: https://docs.mailkaro.com/block-spacer Vertical whitespace with an exact height. ##### Options Value | Type | Default | Description --- | --- | --- | --- height | number (px) | 24 | How tall the space is. The slider goes from 8 to 200 and you can type an exact number. background_color | color | transparent | Fill the space with a color, for example to make a colored band. container_padding | number (px) | 0 | Extra space around the block. ```json { "type": "spacer", "values": { "height": 40, "background_color": "transparent" } } ``` In the editor a transparent spacer shows as a striped band so you can see and select it. It is empty space in the sent email. ### Menu URL: https://docs.mailkaro.com/block-menu A navigation menu of links (with a mobile-friendly layout). ##### Options - Menu items (label + URL) - Layout: horizontal / vertical - Font, color, spacing between items - Separator character ### Social URL: https://docs.mailkaro.com/block-social A row of icons that link to your profiles. ##### Options Value | Type | Default | Description --- | --- | --- | --- items | { network, label, href }[] | Facebook, Instagram, LinkedIn | One entry per icon. href can hold a merge tag. icon_type | circle / circle-black / circle-white / round / round-black / square / square-black | circle | The shape behind each icon. Circle, round and square use each network's brand color; the black and white ones use that color on a plain shape. icon_size | number (px) | 32 | Width and height of each icon. icon_color | color | #ffffff | The color of the icon on a brand-colored shape. spacing | number (px) | 5 | Space between icons. align | left / center / right | center | Where the row sits. target | _blank / _self | _blank | Open links in a new tab or the same one. ```json { "type": "social", "values": { "items": [ { "network": "linkedin", "label": "LinkedIn", "href": "https://linkedin.com/company/acme" } ], "icon_type": "circle", "icon_size": 32 } } ``` The network `twitter` is shown as X. Links must start with https, http, mailto, tel or a merge tag. ### Video URL: https://docs.mailkaro.com/block-video A video that plays in the editor; in the email it is a clickable thumbnail (email-safe) that links to the video. ##### Options - Video file upload - Poster/thumbnail image (made from the first frame) - Play-button overlay - Alignment and width ### HTML URL: https://docs.mailkaro.com/block-html Drop in your own raw HTML for anything the palette doesn't cover. A whole page works too, including its own CSS. ##### Options - Paste markup into the HTML Markup box, or upload an .html, .htm or .txt file (up to 1 MB) - The canvas shows the page as it will look, in a sandboxed frame: its CSS applies and nothing in it runs - Replacing existing markup, with a file, asks "Are you sure?" first (No keeps it) - A short plain snippet can also be edited in place on the canvas; a page is edited in the panel - Rendered inline in the export Raw HTML is passed through as-is in the export, keep it email-safe. The canvas preview is a sandbox: scripts and event handlers are removed there, and links and forms do nothing. ### Timer URL: https://docs.mailkaro.com/block-timer A countdown timer to a target date (rendered as an image for inbox support). ##### Options - Target date/time - Labels (days/hours/minutes/seconds) - Colors and font - Alignment ### Form URL: https://docs.mailkaro.com/block-form A capture form for landing pages (Page builder). ##### Options - Fields (text, email, select…) - Submit action / endpoint - Button label and styling ### Table URL: https://docs.mailkaro.com/block-table A data table with editable cells. ##### Options - Add / remove rows and columns - Merge and split cells - Header row styling - Cell padding, borders, alignment ### Carousel URL: https://docs.mailkaro.com/block-carousel An image slider (rendered as a stacked, email-safe fallback). ##### Options - Slides (image + link) - Autoplay / indicators where supported - Alignment and spacing ### File URL: https://docs.mailkaro.com/block-file Share any file from an email or a page: a PDF, a text file, a CSV, an XML feed, an HTML page, a Word, Excel or PowerPoint file, a ZIP. Users upload it in the block, and a Preview switch can show the file right in the editor. ##### What the reader gets The exported email holds a **download card**: the file's type badge, its name and size, and a button with your link. Email apps cannot show a PDF or run a page, so the file itself is never put in the email. Preview only changes what *you* see while building. ##### Preview Turn on **Show preview in the editor** in the block's Preview section. The file then appears on the canvas and in Preview mode; the height is yours to set (200 to 900 px). Kind | Extensions | What you see --- | --- | --- PDF | pdf | The browser's PDF viewer, scrollable page by page CSV / TSV | csv, tsv | A table with a sticky header and row numbers. Scroll to read every row: more rows load as you scroll, so a file of any size stays smooth XML | xml | Indented, each element on its own line, scrollable to the end HTML | html, htm | Rendered as a page, in a sandbox that runs no scripts Text and JSON | txt, md, log, json | As text (JSON is indented), scrollable to the end Media | png, jpg, gif, webp, mp4, webm, mp3, wav | An image, a video or an audio player Others | doc, docx, xls, xlsx, ppt, pptx, zip | No preview. They still download from the email uploadFile ##### Uploading The block takes any file through your upload handler (https://docs.mailkaro.com/image-uploads), the same`assets.onImageUpload` that images use, called with `kind: "file"`. Without a handler the editor refuses a file upload (a base64 file would bloat the email). The editor also checks the file against the email size limit (https://docs.mailkaro.com/image-uploads) when you set one. ```ts server.ts // your backend route: POST /upload (multipart field "file") const stored = await admin.uploadFile({ buffer: file.buffer, filename: file.originalname, contentType: file.mimetype, scopeId: req.user.orgId }); // -> { url, contentType, name, size } (the editor puts these in the block) ``` `admin.uploadFile` in `email-craft-sdk` is built for this. Per-tenant key prefix (`scopeId` is required), 20 MB cap, and the type is judged from the file's bytes, never from what the browser claims. It accepts PDF, text, CSV, JSON, XML, HTML, RTF, Word, Excel, PowerPoint, ODT, ODS, ZIP and PNG, JPEG, GIF, WebP, AVIF images, and refuses scripts, programs and SVG (use `uploadAsset` for SVG, which cleans it). Pages and feeds (HTML, XML) are stored as plain text and as a download, so opened from your bucket they never run as a page on that origin. Previews of them are rendered by the editor, inside the sandbox above. ##### Block values Property | Controls | Default --- | --- | --- url | The file's public link (set by the upload) | , name | File name shown on the card | (from the link) mime / size | Type and size in bytes, set by the upload | , button_label | The download button text | Download preview | Show the file in the editor (never in the email) | false preview_height | Preview height, 200-900 px | 420 background_color / border_color / border_radius / padding | The card | #ffffff / #d9dce5 / 12 / 16 button_color / button_text_color | The download button | #14213d / #ffffff container_padding | Space above and below | token.spacing The File block is part of the free editor. The MCP server and Cloud API know it as `file` (see `get_block_schema`); the quality check warns when a file block has no file. ### Custom grid URL: https://docs.mailkaro.com/block-grid A block you build yourself: any number of rows, up to three columns, and text, an image or a button in every cell. ##### Options - Columns: 1, 2 or 3 (never more); rows: as many as you need - Each cell is text, an image (with alt text and an optional link) or a button - Cell background, text color, font size, gap, padding, radius - Stacks to one column on a phone - Text takes merge tags; URLs are checked before export ### Page break URL: https://docs.mailkaro.com/block-page-break Starts a new page when the design is printed or saved as a PDF. ##### Options - Rule color and an anchor you can link to - In an email it is a thin dashed rule, so it never breaks a layout ### Templates URL: https://docs.mailkaro.com/block-saved-template Let your users drop one of their own saved emails, PDFs or documents into a design. They add the block, pick a template from a list that comes from your organization, and its content appears in the email. ##### How a user uses it 1. Add **Templates** from the content panel (it is only there when your app provides templates). 2. Click the block and choose a template in the **Template** list. Templates are grouped as Emails, PDFs and Documents. 3. The template's content fills the block. **Update from template** copies it again after the template changes; **Remove** empties the block. The content is a *copy* taken when it is chosen, so a sent email never changes behind the user's back. Like a Custom HTML block, it is cleaned (scripts and event handlers dropped, its own `