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 { 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 {ChaiBuilderEditor} from "@chaibuilder/sdk";
import { loadWebBlocks } from "@chaibuilder/sdk/web-blocks";
 
loadWebBlocks();
 
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, convertToBlocks } from "@chaibuilder/sdk/render";
import type { ChaiBlock } from "@chaibuilder/sdk";
import { loadWebBlocks } from "@chaibuilder/sdk/web-blocks";
 
loadWebBlocks();
 
export default function Page () {
    const blocks: string = yourBlocksFecthFunction()
    return <RenderChaiBlocks blocks={convertToBlocks(blocks)} />
}

Introduction API Reference