Quickstart

Before you start

You need a workspace and its public key. ContentBind is invite only, so the workspace is created for you; the key is in Settings → Environments, one per environment, and it is safe to ship in client code. It grants read access to published content and nothing else.

1. Install

npm install @contentbind/sdk

2. Point the SDK at the API

# .env.local
NEXT_PUBLIC_CONTENTBIND_API_URL=https://api.contentbind.com
NEXT_PUBLIC_CONTENTBIND_KEY=pk_live_...

Both come from your workspace. The API URL rarely changes; left unset, the SDK talks to https://api.contentbind.com.

3. Render a page

Fetch on the server, render on the client. The fetch is a plain HTTP call with no runtime, so it works in any framework; this example is the Next.js App Router.

// app/[[...slug]]/page.tsx
import { fetchOneEntry } from '@contentbind/sdk'
import { Content } from '@contentbind/sdk/react'

const KEY = process.env.NEXT_PUBLIC_CONTENTBIND_KEY!

export default async function Page({ params }: { params: Promise<{ slug?: string[] }> }) {
  const { slug } = await params
  const url = '/' + (slug ?? []).join('/')

  const entry = await fetchOneEntry({ model: 'page', publicKey: KEY, url })
  if (!entry) return null

  return <Content model="page" content={entry} publicKey={KEY} />
}

That is a working integration. Every page an author creates at a URL your app routes to now renders, and the built-in component library is available to them immediately.

4. Open the editor

In ContentBind, create a page whose URL matches a route in your app, then open it. The canvas is your site in an iframe, loaded from your own origin, with ?contentbind.editor=1 appended. Nothing is proxied and nothing is re-hosted: what an author sees is your application running your code.

If the canvas stays blank, run the doctor:

npx contentbind doctor

It checks the key, the API, the delivery call and the editor origin, and tells you which of the four is wrong.

5. Register your own components

The built-ins get a page shipped. Your components make it yours.

import { Content } from '@contentbind/sdk/react'
import { PricingTable } from '@/components/PricingTable'

const COMPONENTS = [
  {
    component: PricingTable,
    name: 'PricingTable',
    friendlyName: 'Pricing table',
    category: 'Marketing',
    inputs: [
      { name: 'heading', type: 'string', defaultValue: 'Plans' },
      { name: 'highlight', type: 'string', options: [
        { label: 'Starter', value: 'starter' },
        { label: 'Growth', value: 'growth' },
      ] },
    ],
  },
]

<Content model="page" content={entry} publicKey={KEY} customComponents={COMPONENTS} />

The component stays in your repository. ContentBind never sees its source, only its name and the inputs you declared: it sends props, your code renders them. See Custom components for the full input vocabulary.