Builder.io

Builder.io is a visual CMS for building and optimizing digital experiences. ShipKit integrates Builder.io for visual page building with a drag-and-drop interface.

Configuration

Important: Builder.io DevTools Compatibility

Builder.io DevTools do not work with Turbopack. To use the visual editor, you must run the development server in legacy mode:

npm run dev:legacy

Add this environment variable to enable Builder.io:

NEXT_PUBLIC_BUILDER_API_KEY=your_builder_api_key

# Optional - Disable Builder in development
DISABLE_BUILDER=true

Get your API key from the Builder.io Dashboard.

Setting Up Builder.io

Create an account at Builder.io
Create a new space or use an existing one
Get your API key from Space Settings
Add the API key to your environment variables

Creating Content

Log in to your Builder.io account
Navigate to the Content tab
Create a new page with a URL path (e.g., /about)
Use the visual editor to build your page
Publish when ready

Preview Mode

Builder.io provides a preview mode directly in its interface. You can preview your changes before publishing.

Visual Editing

Builder.io offers a visual editing experience with:

Drag-and-drop interface
Rich component library
A/B testing capabilities
Targeting and personalization
Analytics integration