What is Beefree SDK?

Beefree SDK is an embeddable no-code builder that gives your end users the freedom to design stunning emails, landing pages, and popups—without writing a single line of code. It’s easy to configure, intuitive to personalize, and built to scale with your needs—whether you're a startup or an enterprise. Built with both developers and end users in mind, it’s designed to integrate easily into your application, scale as your product grows, and provide a flexible, white-label design experience.

For developers, Beefree SDK is easy to work with. You can personalize the design experience by adding simple configuration parameters. Want to enable or disable a feature? Just check a box in the Developer Console, hit save, and the changes are immediately reflected on the frontend. No complicated setup required.

For your end users, Beefree SDK is an intuitive drag-and-drop editor with everything end users need to bring their creative ideas to life—whether they’re creating an email campaign, a landing page, or an attention-grabbing popup. Content blocks like titles, images, lists, tables, buttons, and more are all available right out of the box.

Beefree SDK includes the following features and more:

• Email builder: A creation environment that helps end users quickly create beautiful emails. This environment supports your end users in following email creation best practices recommended by industry experts.

• Page builder: A creation environment that empowers end users to build visually stunning landing pages. They can use a landing page as a link for a call-to-action (CTA) inside emails, to embed forms and capture information, or to create standalone pages.

• Popup builder: The that provides end users with the tools they need to build compelling popups that capture attention.

This site discusses the technical capabilities of Beefree SDK, and how to embed it into your web application. To learn more about the end user experience, and how your end users will interact with Beefree SDK on the frontend of your application, reference the . Markdown files for this guide are available in this , which you can clone and use as a starting point for building a knowledge base for your end users.

If you'd like to test the drag-and-drop user experience and explore how easy it is to customize the editor but aren't quite ready to spin up your own test application, our is the best place for you to get started. This simple, public implementation of the Beefree SDK helps you to:

• Experience how easy it is for your end users to create designs using the intuitive, drag-and-drop editor UI

• Easily test UI customizations (like , rearranging or , or applying )

• Explore how you can to make it editable, and

Check out the following public demo apps built with v0, Lovable, and Replit:

• is a demo application built with that simulates how Beefree SDK's no-code drag-and-drop email builder and editor can be integrated into your web application. The demo application includes static dashboards for campaign performance (open rate, click rate, conversion rate, and revenue), campaign breakdown, and subscriber information. Click the following link to access Email Builder by Beefree SDK:

• is a demo application built with to simulate how Beefree SDK integrates within a Martech application's ecosystem. Click the following link to access Marketing Buddy:

• is a demo application built with

Take the following steps to get started with Beefree SDK in a few minutes:

1. Create an account to access the and obtain your credentials.

2. to get started. Beefree SDK offers a generous Free plan that includes each builder type mentioned in the previous section.

3. Create an application and .

Note: Visit the for a comprehensive list of features and the plan type they correspond to.

Reference Quickstart Guides specific to your tech stack:

Learn more about our three embeddable builders.

In addition to our drag-and-drop editors, we also offer a standalone application, which can be used alongside any of the builders. The File Manager is designed to simplify the organization and management of digital assets. It is an image and document management user interface that can be launched as a standalone application. This allows your customers to quickly upload or manage assets, without having to load one of the builders.

Learn more about our and .

We have a whole library of handy sample code to help you get started with basic Beefree SDK implementations and also learn how to put more advanced features to work. You can check out the available sample code or head straight to .

Learn more about Beefree SDK through . Explore , , and .

The Beefree SDK technical documentation is available at docs.beefree.io/beefree-sdk and in the .

You can contribute feedback to the documentation in one of the following ways:

• On docs.beefree.io/beefree-sdk use the Was this helpful? emoji option on the right hand side of each page. After selecting an emoji, you'll have the option to submit written feedback on what you'd like to see in the documentation. This feedback goes directly to the documentation team and is integrated frequently.

• Creating a pull request using the . Use this option in the event you find a typo, broken link, or small fix.

Overview

When you load a Beefree application inside the host application, you pass a configuration object with multiple sections that define the characteristics of the UI, UX, and available elements. However, there are cases when you may want to reload this configuration without the need to reload the Beefree application. In these cases, you can use a specific event to update the configuration while the editor is open.

Use cases

With this event, you can make on-the-fly changes to the user experience. For example:

• Updating available categories for Saved rows

• Refreshing a for authorization

• Changing for the current user

• Updating settings for the editor’s

You can load the configuration changes via a new instance event. Here’s an example:

Overview

In this article, we will discuss how to sign up for an account in the Beefree SDK Developer Console, create an application, and obtain your Client ID and Client Secret.

This article will cover steps for the following processes:

• Sign up for an account in the Developer Console

• How to create an application

The first step to experimenting with and embedding Beefree SDK's visual builders is to.

Take the following steps to sign up for a Beefree SDK account:

1. Navigate to the .

   1. Complete the required fields to create an account.

   2. Once the form is complete, click Sign up to embed Beefree SDK.

1. Check your inbox and verify your email address.

   1. Once it is successfully verified, you'll be redirected to the . Enter your email and password to login.

2. You'll be redirected to a page with an active free subscription called MyFirstSubscription. Under this subscription, there are four applications you can activate: Email Builder, Page Builder, Popup Builder, and File manager. You can activate one or all of them if you'd like.

Once that’s done, you will be able to . Your dashboard will look like the following image.

You will have the option to activate any or all of the following applications:

Take the following steps to create an application:

1. Click the Activate button that corresponds with the application you'd like to create.

2. Type in a name for your new application.

3. Click Create.

Your application will look like the following in the dashboard once it is activated:

You have successfully created an application. Now, you can enter the application Details and obtain your Client ID and Client Secret.

Click on your application's Details button to view your Client ID and Client Secret. Use these to authenticate when you initialize it.

With your Client ID and Client Secret, you can use our to experiment with a simple integration of Beefree SDK. You can also get started with .

Reference the following related topics to learn more about customizing your applications, creating development instances, and referencing sample code.

Inside the Beefree Developer Console, you have the option to regenerate the Client Secret for your application. To regenerate your application's Client Secret, take the following steps:

1. Log in to the .

2. Navigate to the application you'd like to update the Client Secret for.

3. Click on the application's Details button.

1. Navigate to Application keys within the application's details.

2. Click Regenerate to generate a new Client Secret.

1. You will be prompted to a modal and asked to confirm your application's name.

2. Complete the App Name field and click Regenerate to complete the action.

Your new Client Secret is now available and ready to use. Your old Client Secret will expire 24 hours after creating the new one. Ensure you replace it in all the necessary environments prior to its expiration.

• Create

If you are thinking of moving from a different content creation platform to the Beefree SDK, know that you are in good hands. Thousands of applications have been using our embeddable content builders since 2014, which means that our team has encountered a large variety of scenarios and guided customers like you through all sorts of migrations. We're here to help.

We're known for providing a high level of support, which includes everything from the detailed technical docs that you are reading on this site, , and all the way to dedicated Slack channels for . We will learn about your business with an initial consultation followed by meetings with solution engineers, and set you up with an extended proof-of-concept period that allows you to get everything ready for your migration.

If your users have created a library of designs in your legacy tool, we know one of the key questions is always: "How do I get existing designs into Beefree without having to ask my users to recreate them from scratch?"

We've got you covered here:

Your customers' existing designs will not need to be recreated from scratch in the Beefree builder. You can leverage the to take standard HTML emails and turn them into our proprietary JSON format.

Development Applications

Development applications are available with any Beefree SDK paid plan.

What is a Development Application?

A development application is a child application that is linked to your parent application within the Beefree SDK console. The purpose of these child applications is to create development, QA, or any other type of applications that you can merge your application’s changes to prior to pushing them to production. This empowers you to test new features, even on a higher plan, within a controlled environment prior to releasing them to your application’s end users.

How to Create a Development Application

You can create a development application within your Beefree SDK console. Prior to creating a development application, ensure you have a paid plan with Beefree SDK. Development applications are only available on paid plans.

To create a development application, take the following steps:

1. Log in to your

1. Create a new application

1. Navigate to your dashboard where the new application is located

2. Click the + next to Add a development instance

1. Type in the name of your development application, for example “development environment” or “QA environment”

1. Click Create

2. View the new development application available in your Beefree SDK dashboard

There are multiple benefits to utilizing development applications. A few of these benefits are the following:

• Merge and test changes to your application prior to releasing them to your end users.

• Create an environment for different contributors in your development cycle, for example QA Engineers, frontend developers, backend developers, and so on.

• Access next tier Beefree SDK features in your development applications.

Consider the information outlined in this section when working with development applications.

Beefree SDK lets you explore higher-tier features in your development environment for testing purposes. However, these features cannot be deployed to production unless they are included in your current subscription plan.

To use higher-tier features in production, you must .

Development apps inherit the same plan that your production app is on. If you wish to test features that are available on a higher plan, go the application details and click “CHANGE PLAN” in the upper right.

While setting up a development application is a feature on paid plans, please note that still apply. If, in your development application, you're using any of the Beefree SDK features that generate usage-based fees, that usage will count towards your plan's monthly allotment. You'll be charged usage-based fees if your usage (across production and development applications) exceeds your plan's allotment. . You can view usage statistics for your development applications by logging into the , locating the development application you are working with, and looking at the Statistics widget on the application details page.

Overview

Here is a list of terms used frequently throughout the Beefree SDK technical documentation. Things can get a bit tricky when embedding a software application within another software application, so this page is an attempt to create as much clarity as possible. We hope we find it useful. If anything sounds confusing or if you have any suggestions for improvement, please contact us.

Frequently used terms

• Beefree SDK A toolkit that includes white-label, no-code builders for emails, landing pages, and popups. The toolkit also provides a range of components, APIs, sample code, and support services to help you seamlessly integrate into your software a content creation workflow that your customers will love.

• Beefree SDK subscription A subscription to the Beefree SDK. There are different , starting with a Free plan. Once you have a subscription, you can create one or more Beefree applications.

• Beefree application An instance of any of the no-code tools that can be embedded in your software. They include:

  • Email Builder

  • Page Builder

• Beefree SDK Console A multi-user administration panel where you can sign up for a Beefree SDK subscription, manage the subscription, and create and configure a Beefree application within a subscription.

• Production application An instance of a Beefree application used in your production environment.

• Development application An instance of a Beefree application used for development, QA or staging environments. You can create multiple, development applications under a production application.

• Host application Your software application, which will host one or more Beefree applications.

• Beefree system The backend system that interacts with your Beefree application to provide services such as application authorization.

• Content Services API A set of in the Beefree system that allow you to perform a variety of tasks connected to the implementation of a content creation workflow.

Manage Subscriptions in the Console

We understand that each company has its own unique needs. For that reason, we offer the flexibility of adding multiple Beefree SDK subscriptions within the Developer Console. Through this option, you can take advantage of multiple subscriptions to our product for your teams, business units, and so on.

How to Add a New Subscription

You can create an additional subscription within the Beefree SDK Developer Console.

To achieve this, take the following steps:

1. Log in to the Beefree SDK Developer Console

2. Navigate to your dashboard

3. Click Add new subscription on the upper right-hand side of the screen

4. Type a name for your next subscription and click Next

5. Choose a plan and click Select plan

6. Confirm the plan you selected

7. Finalize your additional subscription

Manage users in the Console

You can invite additional users to your Beefree SDK Console. To do so, select Manage users from the personal menu in the top right corner of the screen.

The user that initially created the account is identified as the Account Owner and can add users from this page.

Additional users will be identified as Admins.

The Account Owner has the following additional privileges, compared to Admins:

• Add, edit or delete users, as described above.

• Turn on , using tokens provided by mobile apps like Google Authenticator or Authy. 2FA can be enabled either for specific users, or account-wide from the Settings & Security section in the personal area ().

• Change the company’s name, also in Settings & Security.

Setting up two-factor authentication will keep your developer account extra secure. Two-factor authentication means that users will need to provide two different identifications to log in to their : their regular login credentials, and a token generated by a two-factor authentication app.

When 2FA is set up, users will need to:

• download a two-factor authentication app to their mobile device (e.g. , , , and others);

is based on the concept of unique users of the editor. A unique user is one that is identified by a unique UID, as described below. The system counts unique UIDs within a billing period, and resets the count to zero at the start of the next billing period.

The UID parameter:

• Is an alphanumeric string passed to Beefree SDK throughout the .

• Can contain letters from a to z (uppercase or lowercase), numbers and the special characters “_” (underscore) and “-” (dash).

Overview

The debug parameter in the beeConfig is an optional object that enables internal debugging features within the Beefree SDK editor. It's designed to help developers inspect configurations, translations, and data structures more easily during development.

How to Use

You can pass the debug parameter directly in your beeConfig object when initializing the editor. Alternatively, you can set or update it live using the loadConfig method—no need to refresh the editor.

Example (in beeConfig):

Set it live (no refresh needed):

The debug parameter in the Beefree SDK configuration accepts the following parameters:

• all (boolean): Enables all available debug options (inspectJson and showTranslationKeys). Use this during heavy debugging sessions.

• inspectJson (boolean): Adds an eye icon in the toolbar that allows you to inspect the specific JSON used for that element. Useful for understanding how your configuration is being rendered.

The debug parameter is particularly helpful in the following scenarios:

• You're troubleshooting UI rendering issues tied to configuration JSON.

• You need to inspect what exact data is being used for rows/modules.

• You're working on translations and want to ensure correct keys are being used.

Overview

In user interfaces, a workspace is a parameter that changes the appearance, settings, and widgets available in an builder, to help the user to focus on what matters.

In Beefree SDK, workspaces are an optional parameter that can be used to provide an experience focused on context and purpose, and to facilitate the outcome of an editing session.

You can load the builder with a certain workspace, but workspaces can also be changed by the user when editing, on-the-fly.

Switching between workspaces might change:

• content visibility on the stage

• tiles availability in the content tab

• available previews

• outputs when saving a content

• …and more!

If no workspace is loaded at launch, the builder starts in its “Default” workspace.

We currently offer 3 additional workspaces, and we are planning to launch more as we evolve BEE and its capabilities.

These 3 workspaces revolve around the use of AMP content, and are provided so that you can tailor the experience of creating AMP emails in Beefree SDK.

Here is an overview of the different workspaces and their differences. Please for more information on using AMP in Beefree SDK.

Here is an example of loading Beefree SDK with a “mixed” workspace:

You can implement a workspace selector within your application, so that users can switch between workspaces, by using the loadWorkspace(type) method.

First, you need to define template files for the workspaces you want to propose, as JSONs:

Then, you can load those workspaces at runtime:

And here is how to create a simple select to switch workspace:

After you load a workspace, the application will trigger one of these three callbacks:

The additional workspaces for AMP (AMP-only and HTML-only) can become helpful if you want to tailor the user experience of creating AMP emails, by adding:

• a workflow where users decides if they want to create a standard message or an AMP-powered message (in the first case, AMP components will be hidden in the builder;

• an option to switch between the HTML and the AMP editing of a message.

In addition, omitting the workspace, or loading the “default” workspace for certain users, has the effect of disabling AMP for those users, even when AMP content is enabled in the . This way, you can decide to make the feature available to customers of your application:

• depending on the subscription plan that they are on (i.e. you could push users to a higher plan based on the ability to use AMP);

• depending on the purchase of an optional feature (same);

• only if they are “beta” customers, so they see it while keeping it hidden from the rest of your users.

This page discusses the core concepts related to installing Beefree SDK within your application. These core concepts are the following:

• Installing the within your application.

• Understanding the and how to successfully authenticate server-to-server.

The Authorization Process is an important step throughout your . This step validates your Beefree SDK credentials and provides you with a token. Take the steps outlined in this document to ensure you accurately complete the authorization process.

Prior to getting started with the authorization process, ensure you reference the . Reference both the and the to get the latest information.

You can install Beefree SDK using either or :

Using npm

Using Yarn

Package Details:

Overview

Configuration parameters allow you to customize the Beefree SDK editor to match your application's requirements. This comprehensive guide covers all available parameters, from required settings to advanced customization options.

How Configuration Works

When initializing Beefree SDK, you pass a configuration object (beeConfig) that defines the editor's behavior, appearance, and functionality. The configuration is structured with high-level parameters that may contain nested sub-parameters for granular control.

const bee = new BeefreeSDK(token);
bee.start(beeConfig, template);

Complete Configuration Structure

Here's a comprehensive configuration object showing all available high-level parameters:

var beeConfig = {
    // REQUIRED PARAMETERS
    container: 'beefree-sdk-container',
    
    // CORE EDITOR SETTINGS
    language: 'en-US',
    autosave: 30,
    trackChanges: true,
    preventClose: false,
    
    // CONTENT CUSTOMIZATION
    specialLinks: [],
    mergeTags: [],
    mergeContents: [],
    
    // APPEARANCE & UI
    sidebarPosition: 'left',
    editorFonts: {},
    defaultColors: [],
    disableColorHistory: false,
    disableBaseColors: false,
    
    // TITLE BLOCK CUSTOMIZATION
    titleDefaultStyles: {},
    titleDefaultConfig: {},
    titleMaxLevel: 'h3',
    
    // WORKSPACE & LAYOUT
    workspace: {
        type: 'default',
        editSingleRow: false
    },
    
    // ADVANCED FEATURES
    commenting: false,
    commentingThreadPreview: true,
    commentingNotifications: true,
    contentDialog: {},
    defaultForm: {},
    rowDisplayConditions: {},
    rowsConfiguration: {},
    advancedPermissions: {},
    hooks: {},
    metadata: {},
    
    // PERMISSIONS & SECURITY
    roleHash: '',
    disableLinkSanitize: false,
    
    // LOADING & PERFORMANCE
    loadingSpinnerDisableOnSave: false,
    loadingSpinnerDisableOnDialog: false,
    
    // CALLBACK FUNCTIONS
    onSave: function(jsonFile, htmlFile, ampHtml, templateVersion, language) {},
    onChange: function(jsonFile, response) {},
    onSaveAsTemplate: function(jsonFile) {},
    onAutoSave: function(jsonFile) {},
    onSend: function(htmlFile) {},
    onLoad: function(jsonFile) {},
    onError: function(errorMessage) {},
    onWarning: function(alertMessage) {},
    onLoadWorkspace: function(workspace) {},
    onFilePickerInsert: function(data) {},
    
    // DEBUGGING & DEVELOPMENT
    debug: {
        all: false,
        inspectJson: false,
        showTranslationKeys: false
    },
    
    // LOCALIZATION
    translations: {}
};

Required Parameters

This parameter is mandatory for Beefree SDK initialization:

• Type: string

• Default: 'en-US'

• Description: Sets the editor interface language

Available Languages:

• Type: number | false

• Default: false

• Description: Enables automatic saving at specified intervals (in seconds). Set to false

• Type: boolean

• Default: false

• Description: Enables change tracking to monitor template modifications via the onChange callback.

• Type: boolean

• Default: false

• Description: Shows an alert when users attempt to leave the page before saving changes.

• Type: array

• Default: []

• Description: Array of custom link objects for special actions (e.g., unsubscribe links).

• Type: array

• Default: []

• Description: Array of merge tag objects for dynamic content personalization.

• Type: array

• Default: []

• Description: Array of reusable content blocks that can be inserted into templates.

• Type: string

• Default: 'left'

• Options: 'left', 'right'

• Type: object

• Default: See Font Management documentation

• Description: Customizes available fonts in the text toolbar and body settings.

• Type: array

• Default: []

• Description: Array of hex color codes for the default color palette.

• Type: boolean

• Default: false

• Description: Disables the color history feature in color pickers.

• Type: boolean

• Default: false

• Description: Disables the base color palette in color pickers.

• Type: object

• Default: {}

• Description: Default styling for title blocks at different heading levels.

• Type: object

• Default: {}

• Description: Default configuration settings for title blocks.

• Type: string

• Default: 'h3'

• Options: 'h1', 'h2'

• Type: object

• Default: {type: 'default'}

• Description: Configures the editor workspace type and behavior.

• Type: string

• Default: 'default'

• Options: 'default', 'mixed'

• Type: boolean

• Default: false

• Description: Enables single-row editing mode.

• Type: object

• Description: Mobile design mode configuration.

• Type: boolean

• Default: false

• Description: Enables collaborative commenting on content blocks and rows.

• Type: boolean

• Default: true

• Description: Shows comment preview popover on the stage.

• Type: boolean

• Default: true

• Description: Enables notifications for new comments in collaborative editing.

• Type: object

• Default: {}

• Description: Configuration for custom content dialogs to exchange data with external systems.

• Type: object

• Default: {}

• Description: Default form structure for form blocks.

• Type: object

• Default: {}

• Description: Enables conditional display logic for email rows.

• Type: object

• Default: {}

• Description: Configuration for row behavior and appearance.

• Type: object

• Default: {}

• Description: Granular permission controls for different user roles.

• Type: object

• Default: {}

• Description: Custom hooks for extending editor functionality.

• Type: object

• Default: {}

• Description: Custom metadata configuration for templates.

• Type: string

• Default: ''

• Description: Alphanumeric identifier for user roles (8-30 characters, no special characters).

• Type: boolean

• Default: false

• Description: Disables URL validation to allow merge tags in links.

• Type: object

• Default: SDK default whitelist for both body and head

• Description: Customizes the HTML Sanitizer's allowed tags, attributes, link protocols, comments, data-* attributes, and ARIA attributes. Configurable independently for the HTML content block (body) and for Custom Head HTML (head). See for the full reference and examples.

• Type: boolean

• Default: false

• Description: Controls loading spinner visibility during save operations.

• Type: boolean

• Default: false

• Description: Controls loading spinner visibility during dialog operations.

• Type: function

• Parameters: (jsonFile, htmlFile, ampHtml, templateVersion, language)

• Description: Called when user saves the template.

• Type: function

• Parameters: (jsonFile, response)

• Description: Called when template content changes (requires trackChanges: true

• Type: function

• Parameters: (jsonFile)

• Description: Called when user saves template as a new template.

• Type: function

• Parameters: (jsonFile)

• Description: Called during automatic save operations.

• Type: function

• Parameters: (htmlFile)

• Description: Called when user triggers send action.

• Type: function

• Parameters: (jsonFile)

• Description: Called when template is loaded into the editor.

• Type: function

• Parameters: (errorMessage)

• Description: Called when errors occur in the editor.

• Type: function

• Parameters: (alertMessage)

• Description: Called when warnings are triggered.

• Type: function

• Parameters: (workspace)

• Description: Called when workspace is successfully loaded.

• Type: function

• Parameters: (data)

• Description: Called when files are inserted via file picker integration.

• Type: object

• Default: {all: false, inspectJson: false, showTranslationKeys: false}

• Description: Debug mode configuration for development.

• Type: object

• Default: {}

• Description: Custom translations to override default interface text.

• Always validate uid and roleHash on your server

• Use advancedPermissions to restrict user capabilities based on roles

• Implement proper authentication before initializing the SDK

• Set appropriate language based on user preferences

• Use preventClose: true for important editing sessions

• Provide meaningful error handling in onError callback

• Enable debug.all: true during development

• Use trackChanges: true to monitor template modifications

• Implement all relevant callbacks for complete functionality

This comprehensive configuration guide serves as your single source of truth for all Beefree SDK parameters. Most parameters are documented with their type, default value, description, and practical examples to help you customize the editor to meet your specific requirements.

Overview

Beefree SDK provides a comprehensive set of methods, callback functions, and events that allow you to control the editor programmatically and respond to user interactions. This guide serves as your single source of truth for all available SDK interactions.

TypeScript Definitions: For complete type safety and detailed parameter information, reference the official TypeScript definitions: Beefree SDK Types

How Methods and Events Work

Beefree SDK is built on an event-driven architecture, a software design pattern where components communicate through events rather than direct method calls. In this architecture, methods are functions you call to trigger actions in the SDK (like saving or loading templates), while events are notifications the SDK sends back to your application when something happens (like content changes or errors). This decoupled approach allows your application to respond to SDK activities asynchronously, making integrations more flexible and scalable. Learn more about event-driven architecture on MDN Web Docs.

When you initialize Beefree SDK, you get an instance that exposes various methods for programmatic control. Additionally, you can configure callback functions in your beeConfig to respond to user actions and editor events.

These methods are available on the Beefree SDK instance and allow you to control the editor programmatically.

• Description: Initializes and starts the builder with optional template data

• Parameters:

  • templateToLoad (optional): JSON string with template structure

• Description: Loads a JSON template into the editor

• Parameters:

  • template: JSON string with template structure

• Description: Reloads a template without showing a loading dialog (seamless reload)

• Parameters:

  • template: JSON string with template structure

• Description: Programmatically triggers the save action

• Triggers: onSave callback with JSON and HTML files

• Usage:

• Description: Programmatically triggers save as template action

• Triggers: onSaveAsTemplate callback with JSON file

• Usage:

• Description: Programmatically triggers the save row action in editSingleRow mode. Use this when the default Toolbar is disabled, and you need to trigger the row-saving flow from a custom UI.

• Triggers: onSaveRow callback with the row JSON

• Note: This method is only available when the editor is initialized in

• Description: Programmatically triggers send action (Email Builder only)

• Triggers: onSend callback with HTML file

• Usage:

• Description: Toggles preview mode on/off

• Triggers: onTogglePreview callback

• Usage:

• Description: Toggles visibility of structure outlines in the editor

• Usage:

• Description: Toggles visibility of merge tag sample content

• Usage:

• Description: Executes specific editor commands for highlighting, scrolling, focusing, or selecting elements

• Parameters:

  • command: Object defining the action and target

• Description: Loads a specific workspace type

• Parameters:

  • type: Workspace type ('default', 'mixed', 'amp_only', 'html_only')

• Description: Updates editor configuration dynamically

• Parameters:

  • config: Configuration object with updated settings

Consecutive requests, made in a short time, to the beeInstance.loadConfig get debounced so the editor can process each change without loss or side effects.

Debouncing starts with the second request, allowing instant/reactive behavior when requests arrive separated in time.

• Usage

Example without options

Example with rejectDebounced true

With rejectDebounced set to true, the second request gets rejected, and the rejection must be handled! This is useful when you want to react only when the config actually changed in the editor.

The first doesn't get rejected because we start debouncing from the second consecutive request.

Example with rejectDebounced false

With rejectDebounced set to false, the second request gets resolved, and there's no need to handle it! Instead of rejecting it, an onWarning event will be fired. This is useful when you don't need to react when the config changes in the editor.

Keep in mind that the second request will return the same configuration as the first one, since the config update is still in progress.

File Manager applications have a simplified method set focused on file selection and management workflows.

Callback functions are configured in your beeConfig and are triggered by user actions or editor events.

• Trigger: User clicks save button or beeInstance.save() is called

• Parameters: (jsonFile, htmlFile, ampHtml, templateVersion, language)

  • jsonFile

• Trigger: User clicks "Save as Template" or beeInstance.saveAsTemplate() is called

• Parameters: (jsonFile)

  • jsonFile

• Trigger: Automatic save based on autosave configuration

• Parameters: (jsonFile)

  • jsonFile

• Trigger: User clicks the Save button in the default Toolbar while in editSingleRow mode, or beeInstance.saveRow() is called

• Parameters: (rowJson)

• Trigger: User clicks send button or beeInstance.send() is called (Email Builder only)

• Parameters: (htmlFile)

  • htmlFile

• Trigger: Template content is modified (requires trackChanges: true)

• Parameters: (jsonFile, response)

  • jsonFile

• Trigger: Changes made by other users in collaborative editing sessions

• Parameters: (jsonFile, response)

  • jsonFile: Updated template JSON from remote user

• Trigger: Template is loaded into the editor

• Parameters: (jsonFile)

  • jsonFile: Loaded template JSON

• Trigger: Workspace is successfully loaded

• Parameters: (workspace)

  • workspace: Workspace configuration object

• Trigger: Errors occur in the editor

• Parameters: (errorMessage)

  • errorMessage: Error description string

• Trigger: Warnings are generated by the editor

• Parameters: (alertMessage)

  • alertMessage: Warning description string

• Trigger: Preview button is clicked

• Parameters: (status)

  • status: Boolean indicating preview state

• Trigger: Preview is toggled on/off

• Parameters: (status)

  • status: Boolean indicating preview state

• Trigger: User navigates between different SDK views

• Parameters: (view)

  • view: String indicating current view

• Trigger: Insert button clicked in File Manager applications

• Parameters: (data)

  • data: Object containing file information

• Trigger: Cancel/X button clicked in File Manager applications

• Parameters: None

• Usage:

• Trigger: Comments or comment threads change

• Parameters: (commentData)

  • commentData: Comment information object

Many SDK methods return promises, allowing for proper async handling:

• Always implement onError callback for production applications

• Provide user-friendly error messages

• Log errors for debugging and monitoring

• Use onChange judiciously with trackChanges: true

• Implement debouncing for frequent operations

• Consider using onAutoSave for background saves

• Provide feedback for all user actions

• Use onViewChange to guide users through different modes

• Implement proper loading states

• Use onRemoteChange to show real-time collaboration

• Implement conflict resolution for simultaneous edits

• Provide clear indicators of other users' activities

• Reference TypeScript definitions for complete type safety

• Test all callback implementations thoroughly

• Use method chaining for complex workflows

For complete type definitions and IntelliSense support, reference the official types:

TypeScript Definitions:

This comprehensive guide covers all available methods, callbacks, and events in Beefree SDK. Use it as your reference for implementing complete editor control and event handling in your applications.

TypeScript Definitions: