sdk

sdk

Open source Website Builder for React JS frameworks

Stars: 404

Visit
 screenshot

Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder that enables users 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. Chai Builder aims to simplify the process of building web pages and email templates by providing a visual interface for developers and designers to work collaboratively.

README:

Chai Builder - Open Source React Website Builder

npm version License

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

CHAI BUILDER

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

Buy Me A Coffee

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.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for sdk

Similar Open Source Tools

For similar tasks

For similar jobs