Page Builder Video Series

Watch the Page Builder Video Series to learn more about getting up and running with Beefree SDK's Page Builder inside your application.

Page Builder Video Series

This video series includes the following tutorials:

Introduction (Part 1)

PART 1: Learn how to embed the Beefree SDK Page Builder into your app step by step. If you’ve already integrated the Beefree SDK Email Editor in React, Angular, or Vue.js, you’re almost there! In this quick start guide (4 videos), we’ll walk through the key configuration changes and steps needed to launch a fully functional no-code landing page builder your users will love. 🔗 Links to demo projects and SDK documentation are available in the description below:

(1) React: https://github.com/BeefreeSDK/beefree...

(2) Angular: https://github.com/BeefreeSDK/beefree...

(3) Vue.js: https://github.com/BeefreeSDK/beefree...

(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...

(5) Developer Resources on GitHub: https://github.com/BeefreeSDK

(6) NPM package: https://github.com/BeefreeSDK/beefree...

📘 What you’ll learn:

Installation and Authorization
Embedding the SDK in your application
Running locally on your machine

🚀 Don't have Beefree SDK yet? Get started for free at: https://developers.beefree.io/

The following text includes the complete transcript for this video.

1
00:00:02,880 --> 00:00:07,920
Hi developers. In our previous videos, we talked 
about how to embed the Beefree SDK email editor

2
00:00:07,920 --> 00:00:12,800
in React, Angular, and Vue.js applications. In 
this video, we’ll take it a step further and

3
00:00:12,800 --> 00:00:17,600
explore how to embed another powerful tool in 
the Beefree SDK ecosystem — the Page Builder.

4
00:00:17,600 --> 00:00:20,240
The great news is, if you’re already 
familiar with the email editor process,

5
00:00:20,240 --> 00:00:24,640
you’re about 95% of the way there. In this 
video, we’ll cover the key configuration changes

6
00:00:24,640 --> 00:00:28,560
you’ll need to help your users start creating 
beautiful landing pages as quickly as possible.

7
00:00:28,560 --> 00:00:29,840
Now, let’s get started.

Installation & Authorization (Part 2)

PART 2: In this video, we’ll show you how to embed the Beefree SDK Page Builder into your React, Angular, or Vue application. Whether you’re building from scratch or extending an existing app, this quick start guide walks you through everything you need to install, authenticate, and run the SDK securely. ✨ The best part? The installation process is identical across all three frameworks — so once you’ve learned it, you can apply it anywhere. 🔗 Links to demo projects and SDK documentation are available in the description below:

(1) React: https://github.com/BeefreeSDK/beefree...

(2) Angular: https://github.com/BeefreeSDK/beefree...

(3) Vue.js: https://github.com/BeefreeSDK/beefree...

(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...

(5) Developer Resources on GitHub: https://github.com/BeefreeSDK

(6) NPM package: https://github.com/BeefreeSDK/beefree...

📘 What you’ll learn:

How to install the Beefree SDK for the Page Builder using npm install @befree.io/sdk
How to set up authorization without exposing your client ID or secret
How to configure a proxy server for secure API calls
How to initialize and run the Page Builder inside React, Angular, and Vue projects
How to generate and use access tokens for authentication

🚀 Don't have Beefree SDK yet? Get started for free at: https://developers.beefree.io/

The following text includes the complete transcript for this video.

1
00:00:01,360 --> 00:00:06,720
To get started, we’re going to use the same base 
applications we used in the email builder videos.

2
00:00:06,720 --> 00:00:11,200
If you’d prefer to use your own sample application 
instead, that’s perfectly fine. We have demos

3
00:00:11,200 --> 00:00:17,920
available in React, Angular, and Vue, and you’ll 
find the links for these in the description below.

4
00:00:17,920 --> 00:00:22,960
From here, we’ll jump into one of the 
projects — for example, the React demo.

5
00:00:22,960 --> 00:00:27,040
The great news is that the installation step 
for the Beefree SDK is exactly the same,

6
00:00:27,040 --> 00:00:30,480
no matter which JavaScript framework 
you’re using. You’ll simply run...

7
00:00:36,320 --> 00:00:40,720
That step applies to all three frameworks 
for the Page Builder application.

8
00:00:40,720 --> 00:00:44,560
Now, let’s talk about authorization. As 
we mentioned in the email builder videos,

9
00:00:44,560 --> 00:00:48,160
it’s important not to expose your client 
ID or secret in the front-end application

10
00:00:48,160 --> 00:00:52,480
itself. To handle this securely with 
the Page Builder — across React,

11
00:00:52,480 --> 00:00:56,480
Angular, and Vue — we’ll use a proxy server.

12
00:00:57,280 --> 00:01:02,960
First, in your developer console, make sure you 
have the client ID and secret for the Page Builder

13
00:01:02,960 --> 00:01:07,600
application you’ve activated. We’ll look at that 
in just a moment. Then, we’ll use a proxy server

14
00:01:07,600 --> 00:01:13,600
for each framework to fetch an authorization 
token using that client ID and secret.

15
00:01:13,600 --> 00:01:14,960
Let’s see how that works in practice.

Embedding (Part 3)

PART 3: In this tutorial, we’ll guide you step-by-step on embedding the Beefree SDK Page Builder into your React, Angular, or Vue.js application. Learn how to securely integrate the SDK, initialize it, and configure it to run smoothly inside your app, while keeping your client ID and secret protected. We’ll walk through real examples in all three frameworks, showing you how to mount the editor, handle authentication tokens, and configure your application for seamless page building. 🔗 Links to demo projects and SDK documentation are available in the description below:

(1) React: https://github.com/BeefreeSDK/beefree...

(2) Angular: https://github.com/BeefreeSDK/beefree...

(3) Vue.js: https://github.com/BeefreeSDK/beefree...

(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...

(5) Developer Resources on GitHub: https://github.com/BeefreeSDK

(6) NPM package: https://github.com/BeefreeSDK/beefree...

📘 What you’ll learn:

How to activate the Page Builder application in the developer console
How to retrieve your client ID and secret for authentication
How to embed the Page Builder inside a React app using useRef and useEffect
How to initialize the Beefree SDK and run the editor with configuration objects
How to integrate the SDK in Angular and Vue, using their respective lifecycle hooks
How to handle the onSave callback to capture page JSON and HTML cleanly
Best practices for securely managing tokens and keeping your app safe

🚀 Don't have Beefree yet? Get started for free at: https://beefree.io/

The following text includes the complete transcript for this video.

1
00:00:01,200 --> 00:00:05,200
[Music]Okay, now let’s talk about embedding 
the Page Builder application within your app.

2
00:00:05,200 --> 00:00:10,640
First, from the developer console (as shown 
here), navigate to Page Builder Application

3
00:00:10,640 --> 00:00:16,720
and click Activate. If this were for the Email 
Builder, you’d activate the one just above it.

4
00:00:16,720 --> 00:00:21,120
Once activated, go into the details, 
just as we did for the Email Builder.

5
00:00:21,120 --> 00:00:25,680
Here’s where you’ll find two key 
pieces of information — your Client

6
00:00:25,680 --> 00:00:29,920
ID and Client Secret. We’ll need 
both of these in just a moment.

7
00:00:29,920 --> 00:00:34,800
Now, let’s move on to embedding the Beefree SDK 
into your application. We’ll start with the React

8
00:00:34,800 --> 00:00:41,040
example to show how the Page Builder application 
fits neatly within a div inside your React app.

9
00:00:41,040 --> 00:00:48,000
To begin, we use the useRef hook to reference 
the div that will contain the editor. Then,

10
00:00:48,000 --> 00:00:53,720
once the component mounts, our core 
logic runs inside the useEffect hook.

11
00:00:53,720 --> 00:00:59,760
Scrolling down a bit — once we have our 
token and configuration object ready — we

12
00:00:59,760 --> 00:01:05,600
create a new instance of the Beefree SDK, which 
we’re calling bee for convenience. From there,

13
00:01:05,600 --> 00:01:12,560
we call the start() method on the bee 
instance, passing in two important arguments:

14
00:01:13,120 --> 00:01:15,600
Our configuration object (defined earlier)

15
00:01:16,560 --> 00:01:23,200
The specific code referencing the Page 
Builder application — simply set type: "page"

16
00:01:23,200 --> 00:01:27,120
There are additional configurations 
you can include inside this JSON

17
00:01:27,120 --> 00:01:30,560
object, and we’ll link to 
that documentation below.

18
00:01:30,560 --> 00:01:35,360
Embedding the Page Builder in an Angular 
or Vue app follows a very similar process,

19
00:01:35,360 --> 00:01:38,960
using each framework’s respective 
lifecycle hooks and component structures.

20
00:01:38,960 --> 00:01:44,000
For Angular, we use the ViewChild 
decorator to get the container

21
00:01:44,000 --> 00:01:50,800
element. Inside the ngOnInit lifecycle 
hook, we place our core logic — fetching

22
00:01:54,320 --> 00:01:56,560
the token, instantiating a new Beefree 
SDK instance, and then calling the

23
00:01:56,560 --> 00:02:06,640
start() method. As before, we include 
a key-value pair setting type: "page".

24
00:02:08,720 --> 00:02:13,600
For our Vue developers, the pattern will feel 
very familiar. Inside the BeeEditor component,

25
00:02:13,600 --> 00:02:20,560
we place all our main logic in the onMounted 
lifecycle hook. In the configuration object,

26
00:02:20,560 --> 00:02:27,840
you’ll notice a simplified onSave callback — 
the Page Builder provides just the essential

27
00:02:27,840 --> 00:02:33,200
page JSON and HTML, keeping our code 
clean and focused for this example.

28
00:02:34,320 --> 00:02:42,400
Finally, after fetching the token, we initialize 
the Beefree SDK, call start(), and — just as

29
00:02:42,400 --> 00:02:48,160
before — pass in the configuration 
object and set the type to "page".

Running Locally (Part 4)

PART 4: Now it’s time to see your Beefree SDK Page Builder in action! In this video, we’ll walk you through running your application locally using React, Angular, or Vue. Learn how to start both your proxy server and development server to securely fetch tokens, serve your app, and view the Page Builder fully embedded and ready for use. Whether you’re testing in React, Angular, or Vue, this guide ensures your Page Builder application runs seamlessly on localhost, with content blocks and settings tailored for webpages. 🔗 Links to demo projects and SDK documentation are available in the description below:

(1) React: https://github.com/BeefreeSDK/beefree...

(2) Angular: https://github.com/BeefreeSDK/beefree...

(3) Vue.js: https://github.com/BeefreeSDK/beefree...

(4) Page Builder Docs: https://docs.beefree.io/beefree-sdk/v...

(5) Developer Resources on GitHub: https://github.com/BeefreeSDK

(6) NPM package: https://github.com/BeefreeSDK/beefree...

📘 What you’ll learn:

How to run a proxy server to securely manage credentials and tokens
How to start your development server for React, Angular, and Vue apps
How to view the Page Builder running locally on your machine
How to verify the application interface and different content blocks for web pages
How to troubleshoot common setup issues for local development
A recap of installation, authentication, and embedding steps from the series

🚀 Don't have Beefree yet? Get started for free at: https://beefree.io/

The following text includes the complete transcript for this video.

0:00:01.200,0:00:05.840
Now comes the fun part. Let's see our application 
running in action. Instead of trying to run this

0:00:05.840,0:00:10.720
from the editor, I'm going to use two terminal 
windows. The proxy server in the first terminal

0:00:10.720,0:00:14.960
will handle our secure credentials to 
safely fetch the auth token from Beefree.

0:00:14.960,0:00:20.400
The development server in the second terminal will 
build and serve our actual front-end application.

0:00:20.400,0:00:26.880
So in the first terminal, we'll run 
node proxy-server.js. Once we see that

0:00:26.880,0:00:30.400
it’s listening, we'll go to our second 
terminal. And for our React application,

0:00:30.400,0:00:38.400
we'll run npm run dev. We can see our application 
being served at localhost:5173. Let's navigate

0:00:38.400,0:00:46.080
there to see our application running. Going to 
localhost:5173, we'll give it just a second,

0:00:46.080,0:00:50.720
and there we see the Page Builder application 
up and running inside our React application.

0:00:50.720,0:00:54.320
You'll notice that the interface is tailored 
for web pages, with slightly different content

0:00:54.320,0:00:59.600
blocks and settings than the Email Builder. The 
commands to run the application for Angular and

0:00:59.600,0:01:04.880
Vue are the same. We'll use the same configuration 
of two terminal windows — in the first, we'll run

0:01:04.880,0:01:14.480
our proxy server, and in the second, we'll simply 
run ng serve to start the development application.

0:01:15.600,0:01:19.440
Again, that works for both 
Angular and Vue applications.

0:01:20.720,0:01:24.080
We can see our app being served at 
localhost:4200, so let's go there in

0:01:24.080,0:01:33.520
our browser, and once again, we see the 
Page Builder application up and running.

0:01:34.960,0:01:38.080
Let’s recap our steps. We installed the SDK,

0:01:38.080,0:01:43.440
secured authentication with a server-side 
proxy, then embedded the SDK in React, Angular,

0:01:43.440,0:01:47.600
and Vue applications. That allowed 
us to run our application locally.

0:01:47.600,0:01:52.320
That’s it. We hope you found this series helpful. 
If you have any questions, ask us in the comments

0:01:52.320,0:01:58.720
below. We’ll also include documentation links 
to help you get started. Happy building.

PreviousVideos NextReact Video Series

Last updated 4 hours ago

Was this helpful?