Build visual editors, landing pages, and content-rich websites with a drag-and-drop builder that integrates into your own application. ChaiBuilder is React-first, powered by Tailwind CSS, and open for you to inspect, extend, and self-host.
The builder's source is public, so your team can inspect how the editor, blocks, panels, data binding, theming, and rendering work before adopting it.
Register custom blocks and block settings, create custom panels, and use exposed hooks to shape the builder around your product and workflow.
Integrate the builder into your React application and decide how content is stored, delivered, and rendered.
An open-source website builder is a visual editing tool whose source code is publicly available to inspect, modify, and redistribute under its license. It gives developers an alternative to relying on a closed, vendor-hosted editor.
ChaiBuilder brings that visual editing experience into React applications. You can use the core builder as a component, register your own building blocks, connect it to your data flow, and render the resulting content in a React application.
Add the core drag-and-drop builder to a React application to create your own page builder or visual editor. Extend it with custom blocks, settings, panels, layouts, data binding, internationalization, themes, and AI tools.
Use the basic Next.js website builder with visual editing, page storage, and rendering as a self-contained foundation you can build on.
Create and arrange page sections directly on the editing canvas.
Register the components and content structures your product needs.
Add editing controls and workflows alongside the canvas.
Create custom layouts and reach into the builder where deeper integration is required.
Connect visual elements to structured or dynamic data.
Build an editing experience prepared for localized interfaces and content.
Keep the builder and its output aligned with your application's design language.
Bring existing HTML content into the builder as a starting point.
Render ChaiBuilder blocks in React applications beyond the editing environment.
Integrate the builder into the application where your users already work.
Use your own React components as the vocabulary editors assemble on the canvas.
Build on the same utility-first styling system used by the project, with support for Tailwind CSS v3 and later.
chaicore gives your application control over how and where builder data is saved.
Use ChaiBuilder's React rendering in the framework and delivery flow that fit your product.
Run the builder and the site on infrastructure your team controls instead of depending on a hosted builder runtime.
Give editors a visual canvas for creating pages inside a Next.js application.
Persist page content with the storage included in the open-source core.
Render the saved pages as part of the same self-contained Next.js website builder.
Add a tailored drag-and-drop editing experience to an existing React product.
Let teams compose and update campaign pages visually.
Combine reusable brand components with an editor-friendly publishing workflow.
Create visual experiences for blogs, documentation, and collection-driven sites.
Use the extensible core as the foundation for a builder inside your own SaaS product.
The open-source core covers the visual builder and extension APIs for React, plus a basic Next.js website builder with page storage and rendering.
Pro builds on the open-source foundation with professional capabilities such as multiple languages, revisions, design tokens, a shared library, multi-user workflows, advanced AI context, multi-tenancy, and a newer builder interface.
ChaiBuilder's open-source repository is available under the BSD 3-Clause License. You can use, modify, and redistribute the source under the conditions in the repository's license. Review the authoritative license text before shipping it as part of your product.
ChaiBuilder is a collaborative project, and contributions of every size help it improve. Read the contribution guide, explore open issues, or start a discussion with the maintainers and community.
Open the live demo to experience the visual editing workflow.
Review the repository structure, packages, implementation, license, and active development.
Use the documentation to integrate the builder and register the components your project needs.
Everything developers and product teams need to know about integrating, extending, and self-hosting the open-source builder.
Explore the source, try the live editor, and shape ChaiBuilder around your React application.
The Visual Website Builder
You Actually Own. React + Next.js, low-code, self-hosted. Your data, your infrastructure, every feature included.
© ChaiBuilder. All rights reserved.
