betterbydesign/builder-sdk

Low code page builder.

Chai Builder - Open Source Visual Builder

Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder. It allows you to create web pages & email templates visually by dragging and dropping elements onto the canvas. It is a simple React component that renders a full-fledged visual builder into any React application.

Try Chai Builder

---

Manual installation:

Step 1: Install the packages

npm install @chaibuilder/sdk @chaibuilder/runtime tailwindcss

Step 2: Add a custom tailwind config. Create a new file: tailwind.chaibuilder.config.ts.
Pass the path to your source files.

import { chaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";
export default chaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);

Step 3: Create a new chaibuilder.tailwind.css

@config "./tailwind.chaibuilder.config.ts";

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: Add the builder to your page.

import "./chaibuilder.tailwind.css";
import "@chaibuilder/sdk/styles";
import {ChaiBuilderEditor} from "@chaibuilder/sdk";

const BuilderFullPage = () => {
  return  (
      <ChaiBuilderEditor
          blocks={[]}
          onSavePage={async (blocks) => await saveBlocks(blocks)}
          onSaveBrandingOptions={async (branding) => await saveBranding(branding)}
      />
  );
}

Step 5: Render the blocks on your page.

export default () => {
    return <RenderChaiBlocks blocks={blocks}/>
}

---

Support

If you like the project, you can assist us in expanding. ChaiBuilder is a collaborative endeavor crafted by developers in their free time. We value every contribution, no matter how modest, as each one represents a significant step forward in various ways, particularly in fueling our drive to enhance this tool continually.

Acknowledgments

Chai Builder stands on the shoulders of many open-source libraries and tools. We extend our gratitude to the developers and maintainers of these projects for their contributions.