Beacas simplifies the creation of responsive email templates by combining the editing capabilities of SlateJS with the compatibility of MJML. With drag-and-drop functionality, inline editing, and keyboard shortcuts, users can easily design visually appealing and feature-rich email templates.

Build marketing campaigns, newsletters, or transactional emails effortlessly with Beacas. Create professional-grade responsive email templates efficiently.

Live Demo

Check out the live demo here

Getting started

 npm install --save beacas-core beacas-editor beacas-plugins @arco-design/web-react @arco-themes/react-beacas-theme-retro mjml-browser slate slate-react slate-history

Create your editor

import React, { useCallback, useMemo } from "react";
import {
} from "beacas-editor";
import { BeacasCore, BlockManager, ElementType } from "beacas-core";
import { Retro } from "beacas-plugins";
import 'beacas-plugins/lib/style.css';

// Theme style, If you need to change the theme, you can make a duplicate in
import '@arco-themes/react-beacas-theme-retro/css/arco.css';

// fill clientId to authenticate. If you haven't registered yet,
// visit to get the clientId
  clientId: "xxx",

export default function MyEditor() {

  // You can fetch data from the server.
  const initialValues: EmailTemplate | null = useMemo(() => {
    return {
      subject: 'Welcome to Beacas mail',
      content: BlockManager.getBlockByType(ElementType.PAGE).create(),
  }, []);

  // example
  const onUpload = (file: Blob):Promise<string> => {
    return Promise.resolve('')

 const onSubmit: (values: CustomEmailTemplate)=> {

const config = Retro.useCreateConfig({
  initialValues: initialValues,
  onSubmit: onSubmit,

  return (
      <Retro.Layout height={"calc(100vh - 40px)"}></Retro.Layout>


Check out docs here:


View Github