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={[]}
          onSave={async ({blocks, brandingOptions}) => {
              await yourSaveFunction(blocks, brandingOptions)
              return true;
          }}
      />
  );
}

Step 5: Render the blocks on your page.

import { RenderChaiBlocks } from "@chaibuilder/sdk/render";
import { ChaiBlock } from "@chaibuilder/sdk";
 
export default function Page () {
    const blocks: ChaiBlock[] = yourBlocksFecthFunction()
    return <RenderChaiBlocks blocks={blocks} />
}

Introduction Resources