React No-code Email Builder

Welcome to the React Quickstart Guide for embedding Beefree SDK's no-code email builder in your React application.

Introduction

This Quickstart Guide shows you step by step how to embed Beefree SDK’s Email Builder into a React application using the /loginV2 authorization process. By the end of the guide, you'll have a functional React app running locally, with Beefree SDK's no-code email builder integrated and properly authenticated—following best practices for React development.

Prerequisites

Prior to getting started, ensure you:

Understand the React framework and what it is.
Have a Beefree SDK account.
Create an application within the Developer Console.
- Obtain your Client ID and Client Secret.

What You'll Learn

Throughout this guide, you'll learn how to:

Create a React app
Install Beefree SDK in the React app
Successfully complete the authorization process using /loginV2
Initialize the builder
Run the React app and the builder

1. Create a React App

First, set up a React app with TypeScript. Navigate to your terminal and run the following commands to create a React app with TypeScript. In the following example, the app is called beefree-demo. After creating the app, navigate to its directory.

npx create-react-app beefree-demo --template typescript
cd beefree-demo
npm start

2. Install Beefree SDK

Run the following command in your terminal to install the official Beefree SDK npm package.

npm install @beefree.io/sdk

Now that the package is installed, the next step is to create a simple user interface (UI) to embed the builder within.

Note (React and Beefree SDK Interaction): The @beefree.io/sdk package provides a React-compatible wrapper for the Beefree builder. React manages the UI lifecycle, while the SDK handles the email builder logic.

3. Create a Simple UI

The simple UI for this step is creating a "Read the Docs" Button with a link to the docs site. This serves as a simple visual to see the contrast between the application and builder UI once the app is running locally.

Copy and paste the code below in your App.tsx file to modify it to include a button linking to Beefree SDK's docs. You can use any url you'd like to experiment with this locally, simply replace href="https://docs.beefree.io/beefree-sdk" in the code below with your preferred url.

Update `App.tsx`

import React from 'react';
import './App.css';

function DocsButton() {
  return (
    <a 
      href="https://docs.beefree.io/beefree-sdk" 
      target="_blank" 
      rel="noopener noreferrer"
    >
      <button style={{ padding: '10px 20px', fontSize: '16px' }}>
        Read the Docs
      </button>
    </a>
  );
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Beefree Demo</h1>
        <DocsButton />
      </header>
    </div>
  );
}

export default App;

This code uses React concepts that are important to understand. The key React concepts used in the code are the following:

DocsButton is a functional component—a reusable UI piece.
React renders components in a tree structure (App → DocsButton).

4. Set Up the Beefree Editor Component

Create src/BeefreeEditor.tsx to initialize the SDK. Navigate to your src directory and add a new file called BeefreeEditor.tsx. Copy and paste the following code in this file. This code sets up the Beefree SDK builder component within the React app.

Full `BeefreeEditor.tsx` Code

import { useEffect, useRef } from 'react';
import BeefreeSDK from '@beefree.io/sdk';

export default function BeefreeEditor() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    async function initializeEditor() {
      // Beefree SDK configuration
      const beeConfig = {
        container: 'beefree-container',
        language: 'en-US',
        onSave: (json: any, html: string) => {
          console.log('Saved!', { json, html });
        },
        onError: (error: any) => {
          console.error('Error:', error);
        }
      };

      // Get a token from your backend
      const token = await fetch('http://localhost:3001/proxy/bee-auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ uid: 'demo-user' })
      }).then(res => res.json());

      // Initialize the editor
      const bee = new BeefreeSDK(token);
      bee.start(beeConfig, {});
    }

    initializeEditor();
  }, []);

  return (
    <div
      id="beefree-container"
      ref={containerRef}
      style={{
        height: '600px', // Larger container
        width: '90%',
        margin: '20px auto',
        border: '1px solid #ddd',
        borderRadius: '8px'
      }}
    />
  );
}

In the code above code, there are a few concepts related to both React and Beefree SDK that are important to be aware of for successfully launching your local environment. These concepts are the following:

The following section discusses these concepts thoroughly.

Beefree SDK Initialization

Beefree SDK requires that you create a configuration object in order to initialize and load the builder within your application. In the following code, beeConfig represents this. While there are several optional Configuration Parameters you can add to your configuration object to customize the builder for your application, there is only one mandatory parameter to successfully launch the Beefree SDK. This is the container parameter, which must always be included.

useEffect(() => {
    async function initializeEditor() {
      // Beefree SDK configuration
      const beeConfig = {
        container: 'beefree-container',
        language: 'en-US',
        onSave: (json: any, html: string) => {
          console.log('Saved!', { json, html });
        },
        onError: (error: any) => {
          console.error('Error:', error);
        }
      };

Container Setup with `useRef`

const containerRef = useRef<HTMLDivElement>(null) creates a reference to a DOM element.
The <div id="bee-plugin-container"> is where Beefree SDK mounts the editor.
useEffect ensures initialization only runs once (on component mount).

Token Process

React → Backend (/proxy/bee-auth) → Beefree (loginV2).
Beefree SDK returns a token, passed to new BeefreeSDK(token).

Beefree SDK Callbacks

onSave: Called when a user saves, returning JSON (template structure) and HTML (rendered output).
onError: Handles errors (e.g., token expiration).

5. Set Up the Proxy Server (V2 Auth)

Create proxy-server.js in the root directory. Copy and paste the code in the following section into the proxy-server.js file in the root directory. The following code is responsible for a very important part of running Beefree SDK within your React app, which is authentication and successfully completing the authorization process. Beefree SDK requires that you pass a Client ID, Client Secret, and UID on the server-side to successfully complete the authorization process. The following code shows an example of how you can use the /loginV2 to complete this.

`proxy-server.js`

const express = require('express');
const cors = require('cors');
const axios = require('axios');

const app = express();
const PORT = 3001;

app.use(cors());
app.use(express.json());

// Replace with your Beefree credentials
const BEE_CLIENT_ID = 'YOUR_CLIENT_ID';
const BEE_CLIENT_SECRET = 'YOUR_CLIENT_SECRET';

// V2 Auth Endpoint
app.post('/proxy/bee-auth', async (req, res) => {
  try {
    const { uid } = req.body;
    
    const response = await axios.post(
      'https://auth.getbee.io/loginV2',
      {
        client_id: BEE_CLIENT_ID,
        client_secret: BEE_CLIENT_SECRET,
        uid: uid || 'demo-user'
      },
      { headers: { 'Content-Type': 'application/json' } }
    );
    
    res.json(response.data);
  } catch (error) {
    console.error('Auth error:', error.message);
    res.status(500).json({ error: 'Failed to authenticate' });
  }
});

app.listen(PORT, () => {
  console.log(`Proxy server running on http://localhost:${PORT}`);
});

Run the Proxy Server

Once the authorization process is complete, it is important to run the proxy sever prior to launching the frontend. Run the following commands in your terminal to complete this step.

npm install express cors axios
node proxy-server.js

6. Update `App.tsx` to Include the Editor

Now that the Beefree SDK editor component is set up and so is the proxy server, the App.tsx file can be updated to include the Beefree SDK builder. Copy and paste the following code into the App.tsx file to update it accordingly.

import React from 'react';
import './App.css';
import BeefreeEditor from './BeefreeEditor';

function DocsButton() {
  return (
    <a 
      href="https://docs.beefree.io/beefree-sdk" 
      target="_blank" 
      rel="noopener noreferrer"
    >
      <button style={{ padding: '10px 20px', fontSize: '16px' }}>
        Read the Docs
      </button>
    </a>
  );
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Beefree Demo</h1>
        <DocsButton />
        <BeefreeEditor />
      </header>
    </div>
  );
}

export default App;

7. Run the App

The final step is to run the application. Keep in mind that the proxy server needs to run in its own terminal, while the application runs in a separate terminal.

The terminal commands for running the application and proxy server are the following:

Terminal 1 (React):
```
npm start
```
Terminal 2 (Proxy):
```
node proxy-server.js
```

Now you can visit http://localhost:3000 and start experimenting with your new React application with Beefree SDK embedded. The following image shows what the final result should look like:

Local React App with Beefree SDK Email Builder Embedded

Summary

Now you have a functional React app running locally, with Beefree SDK's no-code email builder integrated and properly authenticated—following best practices for React development.

Remember the following core concepts covered throughout this guide to easily integrate Beefree SDK into your React application:

React Components: Reusable UI (e.g., DocsButton, BeefreeEditor).
Beefree SDK: Loads in a useRef container, with callbacks for save/error.
V2 Auth: Securely handles tokens via a proxy server.
Proxy Server: Must be in the root directory (proxy-server.js).

Next Steps

Beefree SDK is highly customizable. Now that you have a React application running locally on your machine with the Beefree SDK Email Builder embedded, you can start experimenting with customizing the UI of the email of the builder.

A few common customizations you can easily apply to your beeConfig object to continue experimenting are the following:

Custom Languages and overriding default text

const beeConfig = {
  container: 'beefree-container',
  translations: {
    'bee-common-top-bar': {
      'actions': 'Design Management',
      'send-test': 'Test your design',
      'help': 'Need support? Contact us.',
      'preview': 'View your masterpiece',
      'save': 'Save changes',
      'save-as-template': 'Download your design',
      'show-structure': 'Show outline',
    },
  },

Content Tile Sorting

{
  // ...
  defaultModulesOrder: [
    'Button',
    'Html',
    'Icons',
    'Video',
  ],
  // ...
}

Content Tile Grouping

modulesGroups: [
  {
    label: "Text ✏️",
    collapsable: false,
    collapsedOnLoad: false,
    modulesNames: [
      "List",
      "Paragraph",
      "Heading"
    ]
  },
  {
    label: "Media",
    collapsable: true,
    collapsedOnLoad: false,
    modulesNames: [
      "Video",
      "Image"
    ]
  },
  {
    label: "AddOns",
    collapsable: true,
    collapsedOnLoad: true,
    modulesNames: [
      "Stickers",
      "Gifs"
    ]
  }
]

Custom Sidebar Position

var beeConfig = {
        sidebarPosition: 'right',
        ...

Explore the technical documentation to learn more about the other customization options within Beefree SDK.

PreviousRelease Candidate Environment NextEmail Builder

Last updated 1 minute ago

Was this helpful?