Open source Chai Builder SDK

The @chaibuilder/sdk is the core foundation of the ChaiBuilder ecosystem. It is a pure React-based website builder that provides all the essential tools and components needed to create and customize websites visually using React and Tailwind CSS.

Key Features

Pure React Implementation: Built entirely with React, making it compatible with the React ecosystem
Tailwind CSS Integration: First-class support for Tailwind CSS styling
Visual Building Experience: Intuitive interface for rapid website creation
Framework Agnostic: Can be integrated into any React-based framework
Rendering API: Helper APIs to render the built pages as either HTML or React components
Extensibility: Allows extending builder via specific extension points in UI, plus the ability to create custom blocks

Installation

pnpm add @chaibuilder/sdk

Basic Usage

To implement the ChaiBuilder SDK in your React application:

Step 1: 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 2: Create a new chaibuilder.tailwind.css

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

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

Step 3: 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, theme }) => {
        console.log(blocks, theme);
        return true;
      }}
    />
  );
};

Rendering Pages

One of the key features of the SDK is the ability to render built pages as both HTML and React components:

import {RenderChaiBlocks} from "@chaibuilder/sdk/render";
import type { ChaiType } from "@chaibuilder/sdk";

// Example in NextJS page.tsx
export default async function Page () => {
  // implement your function
  const pageblocks: ChaiBlock[] = await getPageBlocks();
  return <RenderChaiBlocks blocks={pageBlocks} />
}

Extending Builder

The SDK allows you to extend its functionality by adding custom blocks. Also the builder allows you to add/overwrite certain functionality via our extension apis.

When to Use SDK vs. Pages

Use @chaibuilder/sdk when you want to build your own solution. You will need to handle everything from storage to authentication and more. Use @chaibuilder/pages when you want a complete solution where everything is handled for you.

Learn more about @chaibuilder/sdk vs @chaibuklder/pages

Open Source

The ChaiBuilder SDK is open source and available on GitHub. Contributions from the community are welcome.