Using the CDN version

Learn How to Easily Initialize the Brizy Editor Using CDN.

Discover how to get started with the Brizy Editor by using a simple example provided below. Whether you're testing Brizy in a minimal environment or just looking for a straightforward way to embed the editor into your project, this guide will show you how to load everything you need via a few lines of HTML and JavaScript.

Find out how to initialise the Editor from Brizy's CDN infrastructure from the Video

Usage

Below is an example of how to integrate the editor into your page using the CDN, showing the necessary HTML structure.

<!-- Builder Container -->
<div id="editor" style="height: 85vh; width: 100vw"></div>

<!-- Update button -->
<button id="update">Update</button>

<!-- Always use the latest version. Check the version details in GitHub releases. -->
<script src="https://cdn.brizylocal.com/pages/3.1.15/index.js"></script>

<script>
  // Config Example: https://github.com/EasyBrizy/Brizy-Local/blob/story/packages/demo/public/index.html
  const config = {...};
  
  const editor = document.querySelector("#editor");
  const update = document.querySelector("#update");
  const Builder = window.Builder;
  let builderAPI;
  // This demo token will limit the output to a pre determined HTML and let you test the Editor before deciding on a commercial license.
  // To unlock all functionality and reseller the editor to your clients, you'll need an unique token generated by us.
  // Contact us: https://www.brizy.io/brizylocal#lets-talk
  const token = "demo";
  
  Builder.init(token, config, (api) => {
    builderAPI = api;
  });
  update.addEventListener("click", () => {
    builderAPI.save();
  });
</script>

For more details, view the Releases.

API Interface

The API interface exposes methods for saving and compiling actions. Below are the details of the methods available:

Methods

save(cb?: OnSave) => void

The save method triggers the save functionality within the Builder. During this process, the Builder checks the initial data and compares it with any changes. If modifications are detected, the Builder compiles only the changed data, which could include ProjectData or PageData. Optionally, you can pass a callback function to handle custom behavior after the save operation completes.

Parameters:

• cb? (optional): A callback function of type OnSave to execute after the save operation.

Example Usage:

builderAPI.save(() => {
  console.log("Save operation completed!");
});

compile(cb?: OnCompile) => void

The compile method initiates a forced compile process within the Builder. Unlike the save method, the compile method bypasses checks for changes and compiles all data, including both ProjectData and PageData. Optionally, you can pass a callback function to handle custom behavior after the compile operation finishes.

Parameters:

• cb? (optional): A callback function of type OnCompile to execute after the compile operation.

Example Usage:

builderAPI.compile(() => {
  console.log("Compile operation completed!");
});

Initialization and Usage

To use the API methods, the Builder must first be initialized with a token, configuration, and a callback to set the API instance.

Initialization

Builder.init(token, config, (api) => {
  builderAPI = api;
});

• token: A string representing the authentication token.
• config: Configuration options for the Builder.
• api: The callback parameter, which is an instance of the API interface.

Event Listener Example

Once initialized, you can use the builderAPI instance to invoke methods. For instance, attaching a save operation to a button click event:

update.addEventListener("click", () => {
  builderAPI.save();
});

In this example, clicking the update button triggers the save method.