Skip to content

chaibuilder/sdk

Folders and files

NameName
Last commit message
Last commit date

Latest commit

55ca94b · Jan 27, 2025
Aug 22, 2024
Feb 4, 2024
Feb 4, 2024
Jul 28, 2024
Jan 3, 2025
Jan 25, 2025
Feb 4, 2024
Sep 27, 2024
Feb 4, 2024
Sep 30, 2024
Feb 4, 2024
Feb 4, 2024
Jan 17, 2025
Feb 4, 2024
May 30, 2024
Jan 24, 2025
Jan 27, 2025
Feb 4, 2024
Jan 25, 2025
Feb 4, 2024
Jun 4, 2024
Sep 27, 2024
Jan 24, 2025
Feb 4, 2024
Jan 24, 2025
Jan 24, 2025

Chai Builder - Open Source Tailwind Builder

Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder. It allows you to create web pages 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.


Manual installation:

Step 1: Install the packages

npm install @chaibuilder/sdk

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

import { getChaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";
export default getChaiBuilderTailwindConfig(["./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 {loadWebBlocks} from "@chaibuilder/sdk/web-blocks";
import { ChaiBuilderEditor } from "@chaibuilder/sdk";

loadWebBlocks();

const BuilderFullPage = () => {
  return  (
      <ChaiBuilderEditor
          blocks={[{_type: 'Heading', _id: 'a', content: 'This is a heading', styles: '#styles:,text-3xl font-bold'}]}
          onSave={async ({ blocks, providers, brandingOptions } ) => {
            console.log(blocks, providers, brandingOptions );
            return true
          }}
      />
  );
}

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.

Buy Me A Coffee

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.