Sample Code

A prototype in 2 minutes

Using this simple, client-side example, you can literally try out Beefree SDK in 2 minutes…

1. Obtain your application keys (Client ID and Client Secret) by signing up here (there is a free plan).

2. Create a new application: you will find your keys in the project’s details page

3. Download the client-side sample code.

4. Open index.html with your favorite code editor

5. Locate client_id and replace “YOUR_CLIENT_ID” with yours

6. Locate client_secret and replace “YOUR_CLIENT_SECRET” with yours

7. Save the file

8. Open it in your browser and get creative

Embedding the builder

Before using the code samples listed below in a production environment, please consider the following:

1. Make sure you first sign up and get your application keys (Client ID and Client Secret).

2. The client-side sample is not safe for a production environment (it was conceived as a quick way for you to test the application). Someone would be able to easily steal your application credentials (just viewing the source code of the page). To keep those credentials safe, authorization must be managed sever-side, as the .NET sample does.

3. These code samples use a limited set of features and configurations: they can be a good starting point to start developing around Beefree SDK, but they are not an exhaustive showcase of everything you can do.

4. All sample code is provided “as is”: it may contain defects, it may not follow best practices (although we try to!), and it should only be considered as point of reference.

GitHub Repositories

Here's our ever-growing library of sample code that shows key Beefree SDK functionality in action so you can get up and running faster:

Sample code to help you get started

Name and Link	Description	Stack
Beefree SDK: Official NPM Package	The official NPM package for Beefree SDK, complete with installation instructions and configuration tips.	Typescript
Beefree SDK: React Email Builder (React Wrapper)	React wrapper for the Beefree SDK that provides React components and hooks to integrate the Beefree SDK (Email Builder, Page Builder, File Manager, Popup Builder) into React applications	React, Typescript
SDK Sample: Full-stack NextJS App	Demonstrates integrating the Beefree SDK into a full-stack NextJS application with database integration and user authentication.	NextJS, Python, SQLite
Beefree SDK: Angular Email Builder (Angular Wrapper)	Angular wrapper for the Beefree SDK – A framework-specific package that provides Angular components to integrate the Beefree SDK (Email Builder, Page Builder, File Manager, Popup Builder) into Angular applications.	Angular, Typescript
Beefree SDK: Vue Email Builder (Vue Wrapper)	Vue.js wrapper for the Beefree SDK – A framework-specific package that provides the Builder component and composables to integrate the Beefree SDK (Email Builder, Page Builder, Popup Builder, File Manager) into Vue.js applications.	Vue, Typescript
SDK Sample: Simple Client HTML App	A simple HTML app demonstrating the basic implementation of the Beefree SDK for client-side applications.	HTML, JavaScript
Beefree SDK: Email and Landing Page Templates	A collection of free email, landing page, and popup templates designed for easy integration with the Beefree SDK.	JSON
Beefree SDK: Secure Auth Example	This example demonstrates secure, production-ready authentication for the Beefree SDK. It showcases best practices for handling authentication tokens, automatic token refresh, and secure credential management.	React, TypeScript

Sample code for advanced Beefree SDK functionality

This selection of sample code shows sample implementations of some of the more advanced Beefree SDK features so you can use them as inspiration (or as a starting point for your own implementation):

Name and Link	Description	Stack
Saved and Synced Rows	Code from our webinars showcasing how to use Saved and Synced Rows feature within the Beefree SDK.	ReactJS
Autosave Versioning Example	A ready-to-run example demonstrating how to implement automatic template versioning with auto-save. It shows how to automatically save template versions, maintain version history, and restore previous versions.	React, TypeScript, Vite
Commenting Example	An example that shows how to use the Beefree SDK's Commenting feature to enable real-time collaboration, allowing your users to add comments, start threaded discussions, and manage feedback directly within the email builder.	React, TypeScript, Vite
Conditional Rows Example	A ready-to-run example demonstrating how to integrate the Beefree SDK Display Conditions feature into your application to enable personalized email content that adapts based on recipient attributes.	React, TypeScript, Vite
Custom CSS Example	An example showing how you can apply Custom CSS to customize the Beefree SDK editor's look and feel	React, TypeScript
Multi-Builder Switch Example	This example showcases how to dynamically switch between Email, Page, and Popup builders within a single application interface.	React, TypeScript
PDF Export Example	An example illustrating how to use the Content Services API PDF export functionality to power PDF exports with different export options, progress tracking, and export history management.	React, TypeScript
Template Load Example	A complete demo showcasing Beefree SDK integration with a full-stack template management system with persistent storage, user authentication, and more.