https://github.com/chaibuilder/sdk

AI Enabled Open source low code visual builder.
https://github.com/chaibuilder/sdk

ai nextjs react tailwindcss website-builder

Last synced: 3 months ago
JSON representation

AI Enabled Open source low code visual builder.

• Host: GitHub
• URL: https://github.com/chaibuilder/sdk
• Owner: chaibuilder
• License: bsd-3-clause
• Created: 2024-02-04T04:42:54.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-08-06T04:52:01.000Z (3 months ago)
• Last Synced: 2024-08-06T07:13:15.291Z (3 months ago)
• Topics: ai, nextjs, react, tailwindcss, website-builder
• Language: TypeScript
• Homepage: https://chaibuilder.com
• Size: 1.67 MB
• Stars: 145
• Watchers: 3
• Forks: 21
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://chaibuilder.com/demo)

---

### Manual installation:

Step 1: Install the packages

```bash

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.

```tsx

import { chaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";

export default chaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);

```

Step 3: Create a new `chaibuilder.tailwind.css`

```css

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

@tailwind base;

@tailwind components;

@tailwind utilities;

```

Step 4: Add the builder to your page.

```tsx

import "./chaibuilder.tailwind.css";

import "@chaibuilder/sdk/styles";

import "@chaibuilder/sdk/web-blocks";

import { ChaiBuilderEditor } from "@chaibuilder/sdk";

const BuilderFullPage = () => {

  return  (

       {

            console.log(blocks, providers, brandingOptions );

            return true

          }}

      />

  );

}

```

    

### Render the blocks on your page.

```tsx

export default () => {

    return 

}

```

---

## 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.