Native Next.js Integration
The Visual Builder
on your own route.
Integrate ChaiBuilder directly into your Next.js app (`/app/admin/builder`). Register your React components, bind your data, and let your team build pages that ship
JSTS
Compatible with NextJS App Router
Complete Control Architecture
Unlike iframe-based builders, ChaiBuilder runs inside your application context. You control the data, the routing, and the components.
Bring Your Own Components
Register your existing React/Next.js components. Use them in the drag-and-drop interface while maintaining full code control. Props are automatically mapped to sidebar controls.
registerChaiBlock(HeroComponent, { type: "Hero", props: {...} })
Dynamic Data Binding
Connect UI blocks directly to your database or CMS. Fetch data in `getStaticProps` or Server Components and pipe it into the builder.
Live Data Connected
Your API or Ours
Save pages to your own PostgreSQL/Supabase via webhooks, or use our cloud storage.
Asset Manager
Built-in DAM for images/videos. Drag directly from the library onto the canvas.
Everything needed for production
We didn't just build a toy. We built a system that respects SEO, performance, and team workflows.
Real-time Collaboration
Multi-player editing sessions. See who is editing which block in real-time with presence indicators.
Multilingual & i18n
Manage content for multiple locales. Switch languages in the builder and publish localized versions.
Form Engine
Drag and drop form builders. View submissions in the dashboard or webhook them to your CRM.
SEO Management
Edit meta tags, Open Graph images, and JSON-LD structured data directly from the page settings.
Revision & Restore
Mistakes happen. Access full history logs and restore previous versions of any page with one click.
Custom Theming
Import your Tailwind config. The builder inherits your fonts, colors, and spacing tokens automatically.
Single Click Publish
Triggers an Incremental Static Regeneration (ISR) or a database update instantly. No full rebuilds required.
Preview Mode
Safe preview URLs. View changes in a staging environment before pushing to production.
Integration FAQ
Do I need a separate hosting server?
No. The builder lives inside your Next.js application. It is just a route (e.g., /admin/builder). You host it wherever you host your Next.js app (Vercel, Netlify, Docker, etc.).
Can I use my own Shadcn/Tailwind components?
Absolutely. You can register any React component. We provide a helper function `registerChaiBlock` that lets you define the editable props. The builder will render your component exactly as it appears in your app.
How is data stored?
You have two choices: 1) Use our managed cloud for zero-config storage, or 2) Implement `savePage` and `getPage` handlers to store the JSON data in your own database (Postgres, MongoDB, etc.).
Does this affect my site's performance?
The builder is lazy-loaded only on admin routes. The published pages are rendered as standard React components or static HTML, ensuring 100% native Next.js performance and Lighthouse scores.
Stop building the same 5 sections.
Give your marketing team the power to build, and your dev team the freedom to code.
