ChaiBuilder vs. Puck
Installing a drag-and-drop React editor takes ten minutes. Building the database schema, Tailwind styling engine, S3 media library, role permissions and revision history around it takes six months. See what happens when your visual builder ships with the backend already wired up.
app/editor/page.tsx
Day 2 with a canvas
With chaipro, every TODO above ships in the package.
pnpm add @puckeditor/core
Puck is a fantastic open-source library if you just need a visual editor canvas that arranges pre-built React components through props and outputs a JSON blob. For an internal marketing team editing a few landing pages, it does the job well.
The problem starts when you are building a multi-tenant SaaS platform or running dozens of customer sites.
The moment a customer hits Save in Puck, the library's job ends. Your engineering team's second job begins.
With Puck, you are building a bespoke CMS from scratch around a component canvas. With ChaiBuilder (chaipro), you drop a complete, self-hosted website module into your Next.js app and Postgres database on Day 1.
Don't let a free canvas turn your best product engineers into full-time CMS maintainers.
Platform capability
With Puck
@measured/puck
With ChaiBuilder
chaipro
Est. engineering time saved
Visual editor and canvas
Puck: Included. Prop-based form editor for React components.
chaipro: Included in chaicore. Full visual block editor with live responsive preview.
-
Tailwind CSS styling UI
Puck: Build it yourself. You map every padding, color and typography control to component props by hand.
chaipro: Ships Day 1. Native Tailwind CSS styling panel with design tokens, responsive breakpoints and dark mode.
Time saved: 4-6 weeks
Page and block storage (Postgres / SQLite)
Puck: Build it yourself. Puck hands you a JSON payload. You design the tables, migrations and query layer.
chaipro: Ships Day 1. Pages, global blocks, revisions and per-site themes stored in your own Postgres or SQLite database. SQLite page storage is already in the open-source core.
Time saved: 3-4 weeks
Multi-tenancy and routing
Puck: Build it yourself. You wire up tenant isolation, custom domain mapping and per-customer data scoping.
chaipro: Ships Day 1. One install and one database serve hundreds or thousands of isolated customer sites and domains.
Time saved: 4-8 weeks
Revisions, drafts and publishing
Puck: Build it yourself. Puck keeps undo and redo for the editing session. Draft and published state, preview routes and rollback are yours to build.
chaipro: Ships Day 1. Draft-to-publish lifecycle, Next.js draft preview, full version history with one-click restore, and page locking so two editors never overwrite each other.
Time saved: 3-5 weeks
Role-based access control (RBAC)
Puck: Build it yourself. Puck can restrict actions per component, but has no users, roles or login. You build the user model and map roles onto those flags.
chaipro: Ships Day 1. Granular roles that control who can edit copy, change styles, edit the theme, publish live or connect an AI agent.
Time saved: 2-4 weeks
S3 media manager
Puck: Build it yourself. File uploaders, S3 bucket integration, image resizing and a media picker UI.
chaipro: Ships Day 1. Media manager on your own S3 or R2-compatible bucket, with search, cropping, inline image editing and automatically resized image variants.
Time saved: 2-3 weeks
AI and MCP server
Puck: Build it yourself. Custom tool definitions, prompts and safety guardrails for LLM editing.
chaipro: Ships in chaipro. A built-in Model Context Protocol (MCP) server with 33 tools (opt-in, enabled once by your developers) plus an in-builder AI chat on your own provider keys. Agents act with the user's permissions and their content edits land as drafts.
Time saved: 4-6 weeks
Multilingual and localization
Puck: Build it yourself. Custom JSON tree cloning per locale and locale routing.
chaipro: Ships Day 1. Localized versions of any page, created by hand or translated by an AI agent.
Time saved: 2-3 weeks
Time estimates are indicative and vary with your stack and team.
If you searched for "puck react page builder storage", you already know the bottleneck. A single JSON blob in a column works for a toy project and falls apart in production. You need relational integrity between pages, reusable global blocks (headers, footers), SEO metadata and historical revisions.
ChaiBuilder ships database adapters for Postgres and SQLite. Every page, block, revision and tenant record lives in your database, on your infrastructure. We never sit in your request path or hold your customers' data.
Puck relies on sidebar form inputs that pass props into locked React components. If a customer wants to adjust mobile padding, change a flex layout or tweak a border radius, an engineer has to expose a new prop.
ChaiBuilder combines your custom React data blocks with a native Tailwind CSS styling UI. You lock down your brand's design tokens (colors, fonts, spacing) so sites stay on brand, while power users and designers build layouts without filing engineering tickets.
Modern SaaS platforms don't just give users a drag-and-drop interface. They give them AI agents that build and update pages.
chaipro includes a built-in MCP (Model Context Protocol) server that your developers switch on once. Users and internal workflows connect with their own scoped API keys to create pages, update seasonal promos or translate content. Content, SEO and translation edits land as drafts with a preview link, and an agent can't write to a page a person already has open in the visual editor. The model runs on your own AI subscription, with no ChaiBuilder credits or markup.
A website builder inside a SaaS product shouldn't make customers re-type data your platform already holds, like product catalogs, real estate listings, clinic locations or team bios.
ChaiBuilder blocks read directly from records in your existing database or backend API through server-side data providers. When a new customer signs up, their website is populated on Day 1.
You don't have to choose between open-source transparency and production readiness.
BSD-3-Clause open source
Our core visual builder is open source on GitHub, with SQLite page storage and Next.js rendering included. Inspect the code, test the canvas and see the clean Next.js and Tailwind markup it renders.
Pro license
Installs into your Next.js codebase as an npm package and adds multi-tenancy, Postgres storage, RBAC, S3 media, revisions, multilingual pages and the MCP server.
Self-hosted, always
Everything runs on your own cloud: Vercel, Netlify, Cloudflare, or your own Node and Docker servers. If you ever stop renewing, a lapsed license never takes a live customer site down.
Anything else, bring it to a 30-minute demo call.
No. The open-source Puck package is a front-end React editor that outputs a JSON object. You design the database schema, write the API endpoints, handle draft and published state, and manage revision history. ChaiBuilder (chaipro) includes Postgres and SQLite storage out of the box, and the open-source core already stores pages in SQLite.
Yes. ChaiBuilder lets you register your own React components with typed props and bind them to your application's data, while also giving you a full Tailwind CSS styling engine for layout and design.
Hosted builders charge per site and eat into your margin as you grow. ChaiBuilder is one flat yearly license for your whole platform, with unlimited customer sites. Because it runs on your own Next.js infrastructure and database, there are no per-site fees, no per-seat pricing and no AI credit markups.
See how chaipro drops into your Next.js stack, connects to your Postgres database and lets your customers publish their own sites in weeks.
The website builder for agents and humans. Owned by you. The website module for platforms and agencies that run many sites, self-hosted on Next.js.
© ChaiBuilder. All rights reserved.
