Chai Builder - Open Source React Website Builder

Chai Builder is a full open-source React website builder that empowers developers to create stunning web pages visually using drag-and-drop functionality. Built with React and Tailwind CSS, it seamlessly integrates into your existing projects.

🚀 Out-of-the-box support for:

• Next.js 16
• Tailwind CSS v3+

📚 CodeWiki | 🎨 Live Demo

✨ Features

• 🎨 Visual Drag & Drop Builder - Create pages visually without writing code
• ⚛️ React-First - Built as a React component for seamless integration
• 🎯 Tailwind CSS Powered - Leverage the full power of Tailwind CSS v3+
• 🚀 Next.js 16 Ready - Full support for the latest Next.js features
• 🔧 Two Flexible Modes - Use as a core builder component or as a complete Next.js website builder
• 📦 Extensible - Add custom blocks and components
• 💾 Data Control - Full control over how and where you save your data
• 🎭 Framework Agnostic Rendering - Render blocks in any React application

📦 Packages

Chai Builder is available in two packages:

@chaibuilder/sdk - Core Builder

For any React application

The core builder package that can be integrated as a standard React component into any React application. Perfect for building custom page builders and visual editors.

Core Features:

• 🎨 Drag & Drop React Builder - Visual builder component for React
• 🔧 Extensible API - Add custom layouts with ease
• 🪝 Inner Hooks - Exposed hooks to create custom layouts
• 📦 Custom Blocks - Register custom blocks and block settings
• 🎛️ Custom Panels - Add your own custom panels
• 🔗 Data Binding - Built-in data-binding support
• 🌍 i18n Support - Internationalization ready
• 🤖 AI Panel - AI Chat Panel
• 🧩 Partial Blocks - Reusable header, footer components
• 🎨 Theme System - Customizable theming
• 🎯 Design Tokens - Design system integration
• 📄 Import HTML - Import existing HTML content

📚 View Documentation

@chaibuilder/next - Next.js Website Builder

For public content-heavy sites

A more powerful Next.js-specific implementation designed for blogs, marketing sites, documentation, and any public-facing content. Built with SSG (Static Site Generation) + ISR (Incremental Static Regeneration) for optimal performance.

All Core Features Plus:

• 📄 Page Types - Define custom page types with specific layouts
• 📚 Collections - Manage content collections (blogs, products, portfolios)
• 🖼️ Media Manager - Built-in media manager with image editor
• 🤖 AI Assistant - Create and edit UI components and content with AI
• 🔍 SEO & JSON-LD - Advanced SEO features with structured data
• 🌐 Multilingual - Multilingual support
• 👁️ Preview Mode - Live preview before publishing
• 📝 Revisions & Compare - Version control with comparison tools
• 📚 Library Blocks - Shared block library across projects
• 🔒 Page Lock - Prevent conflicts with page locking
• 🔒 CMS Integration - Connect to any headless CMS
• 🔐 BYO Stack - Bring Your Own Auth, Database (Postgres), and Storage

🚀 Get Started: Next.js + Supabase Starter (Work in Progress)

🎯 Use Cases

• Landing Pages - Build beautiful landing pages with ease
• Marketing Websites - Create and update marketing content visually
• Content Management - Empower non-technical users to create pages
• Rapid Prototyping - Quickly prototype and iterate on designs
• White-Label Solutions - Build page builders into your SaaS products

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