Brizy Builder

Brizy Builder is a powerful tool for building and editing interactive web components. This package provides components and hooks to integrate Brizy Builder into your application with both preview and editor modes.

Installation

Install the package via npm:

npm install @brizy/builder

Available Components

1. Preview Component

The Preview component allows you to render content in preview mode without editor modules such as the toolbar or sidebar.

Example Usage

import type { EditorPage, EditorProject } from "@brizy/builder/preview";
import { Preview } from "@brizy/builder/preview";

// @import css
import "@brizy/builder/preview/styles.css";

const pageData: EditorPage = {}
const projectData: EditorProject = {};

const App: React.FC = () => {
  return (
    <div>
      <h1>Preview Mode</h1>
      <Preview pageData={pageData} projectData={projectData} />
    </div>
  );
};

export default App;

2. Editor Mode with Toolbar and Sidebar

The Editor component provides a fully interactive editor mode, equipped with both a toolbar and sidebar to enhance editing functionality. This component is essential for creating and managing content within a structured, user-friendly interface.

Example Usage

import React from "react";
import { Editor as BrizyEditor } from "@brizy/builder/editor";
import type { EditorConfig, EditorPage, EditorProject } from "@brizy/builder";

// @import css
import "@brizy/builder/editor/styles.css";

// @import icons
import brizyIcons from "@brizy/builder/editor/icons/icons.svg";

const config: EditorConfig = {
  urls: {
    editorIcons: brizyIcons
  }
};

const pageData: EditorPage = {}
const projectData: EditorProject = {};

const Editor: React.FC = () => {
  return <BrizyEditor pageData={pageData} projectData={projectData} config={config} />;
};

export default Editor;

Note: The Config object contains settings for the editor. You can find more details about Config in the Brizy Builder Documentation.

Features

• Preview Mode: Render content for viewing purposes without editing features.
• Editor Mode: Fully interactive editor with a customizable toolbar and sidebar.

Documentation

For comprehensive documentation, visit the Brizy Builder Documentation. You'll find detailed guides, examples, and best practices to help you get started and make the most of Brizy Builder.

Getting Started

1. Install the package: npm install @brizy/builder.
2. Import and use the components in your application.
3. Customize and extend functionality as needed.

License

This package is licensed under the MIT License.

For more information, documentation, and examples, visit the official Brizy Builder website or contact support.