Quickstart

Ship your first site in under five minutes

CMS Builder Pro pairs a visual editor with a typed content API. Everything you build in the canvas is available over REST, webhooks and the SDK — no lock-in. Press ⌘K to search the docs.

Introduction

A CMS Builder Pro workspace contains projects. Each project has a content model, a page tree, a media library and a support inbox. The CLI mirrors all of it locally so you can version-control schemas and templates alongside your app code.

Visual page builder with 39 production widgets
Typed content API generated from your models
Edge rendering with automatic cache invalidation

Installation

Install the CLI globally, then authenticate with your account.

bash

npm install -g @cmsbuilderpro/cli

cmsbp login
# → Opens your browser to authorise this device

Your first project

Scaffold a project and start the local dev server with live preview.

bash

cmsbp init my-site --template saas-landing
cd my-site

cmsbp dev --port 4321
# Editor:  http://localhost:4321/_studio
# Preview: http://localhost:4321

Content modelling

Models are plain TypeScript. Push them and the API updates instantly.

typescript

// content/models/article.ts
import { defineModel, field } from "@cmsbuilderpro/sdk";

export default defineModel({
  name: "article",
  label: "Article",
  fields: {
    title: field.text({ required: true, max: 120 }),
    slug: field.slug({ from: "title", unique: true }),
    cover: field.image({ focalPoint: true }),
    body: field.richText({ widgets: ["callout", "code", "gallery"] }),
    publishedAt: field.dateTime(),
  },
});

Rendering pages

Fetch published entries with the typed client and render them however you like.

typescript

import { createClient } from "@cmsbuilderpro/sdk";

const cms = createClient({
  projectId: process.env.CMSBP_PROJECT_ID!,
  token: process.env.CMSBP_READ_TOKEN!,
});

const { items } = await cms.content.list("article", {
  filter: { status: "published" },
  sort: "-publishedAt",
  limit: 12,
});

Custom widgets

tsx

import { defineWidget, field } from "@cmsbuilderpro/sdk";

export default defineWidget({
  name: "pricing-callout",
  category: "Marketing",
  props: {
    heading: field.text({ default: "Start free" }),
    plan: field.reference({ model: "plan" }),
  },
  render: ({ heading, plan }) => (
    <div className="rounded-2xl border p-6">
      <h3>{heading}</h3>
      <p>{plan.priceMonthly} / month</p>
    </div>
  ),
});

REST & Webhooks

Every model is exposed over REST. Subscribe to changes with signed webhooks. The API Reference documents every endpoint with request and response examples.

bash

curl https://api.cmsbuilderpro.com/v1/projects/$PROJECT/content/article \
  -H "Authorization: Bearer $CMSBP_READ_TOKEN" \
  -G -d "status=published" -d "limit=5"

Ticket API

Create support tickets straight from your app and track them in the dashboard.

typescript

await cms.tickets.create({
  subject: "Checkout widget not rendering",
  priority: "high",
  requester: { email: "ada@northwind.io" },
  context: { pageId: "pg_92f1", widget: "checkout" },
});

Deploy

One command builds, uploads and warms the edge cache in every region.

bash

cmsbp deploy --env production

# ✔ Built 184 pages in 6.2s
# ✔ Uploaded to 31 edge locations
# ✔ Live at https://my-site.cmsbp.app

Next: connect a custom domain, invite teammates, and configure SLAs in the ticket dashboard.