@chaibuilder/react

Description

It is a landing page builder where you can update and publish your website content in real-time. The builder supports a variety of built-in and custom components that you can modify and use.

Installation

Install the package via npm:

npm install @chaibuilder/react

Usage

Import the necessary components from @chaibuilder/react into your React application:

import { BlockRenderer } from "@chaibuilder/react";

const MyApp = () => {
  const blocks = [
    {
      type: "Box",
      tag: "div",
      classes: "flex flex-col items-center p-6 bg-gray-100",
      baseClasses: "",
      backgroundImage: "",
      id: "ymzhpD",
      dynamicClasses: "",
    },
    {
      type: "Heading",
      level: 1,
      classes: "text-3xl font-semibold",
      content: "Welcome to Chai Builder",
      id: "cvkjya",
      parent: "ymzhpD",
    },
    {
      type: "Text",
      content: "Build and Update Website",
      id: "htkyCr",
      parent: "ymzhpD",
    },
  ];

  return <BlockRenderer blocks={blocks} />;
};

Try Online

You can try Chai Builder online by visiting chaibuilder.com/try. Use the online editor to create and modify your website content visually. Once you're satisfied with the changes, you can generate the necessary code and integrate it into your project.