Connect a website without Next.js

CMS Orbit works with any website that can make an HTTP request. Pick the option that fits your stack. Every option uses the same keys and returns the same content.

Create the keys first, as in the Next.js tutorial: a public cms_pk_ key for published content and, on the server only, a secret cms_sk_ key for drafts.

1Any JavaScript framework

The client in @bifrost-orbit-cms/sdk needs only fetch, so it runs in Node 20 or later, Bun, Deno, Cloudflare Workers and other edge runtimes. React and Next.js are optional.

1import { createCmsClient } from '@bifrost-orbit-cms/sdk'23export const cms = createCmsClient({4  baseUrl: process.env.CMS_API_URL!,5  apiKey: process.env.CMS_PUBLIC_KEY!,6  previewKey: process.env.CMS_PREVIEW_KEY,7  defaultRegion: 'germany',8})

Leave out the cache option: it only means something to Next.js. Render a page from the result of resolve, here in an Astro page:

1import { cms } from '../lib/cms'23const result = await cms.resolve({ path: '/' + (Astro.params.slug ?? '') })4if (result.kind === 'redirect') return Astro.redirect(result.to, result.status)5if (result.kind === 'gone') return new Response(null, { status: 410 })6if (result.kind === 'notFound') return new Response(null, { status: 404 })7const page = result.page

Then map each entry in page.components to your own component by its type. React-based frameworks can use CmsPage and defineRegistry from @bifrost-orbit-cms/sdk/react exactly as the Next.js tutorial does. Types from npx cms-orbit generate work in any TypeScript project.

2Any language over HTTP

Every endpoint is a GET under https://api.bifrostorbit.com/cms/v1, with the key as a bearer token:

1curl -G "https://api.bifrostorbit.com/cms/v1/resolve" \2  -d url=/products/hiking-boots \3  -d region=de \4  -H "Authorization: Bearer cms_pk_..."

The answer is JSON with the content under data. For resolve, data.kind is page, redirect, gone or notFound, and the HTTP status matches: 200, 200, 410 and 404.

1{2  "data": {3    "kind": "page",4    "page": {5      "url": "/products/hiking-boots",6      "name": "Hiking boots",7      "components": []8    }9  }10}

The same call from Python:

1import requests23response = requests.get(4    "https://api.bifrostorbit.com/cms/v1/resolve",5    params={"url": "/products/hiking-boots", "region": "de"},6    headers={"Authorization": "Bearer cms_pk_..."},7)8result = response.json()["data"]

See the Delivery API for every endpoint and parameter, and try them in Configuration › API playground. Answers are cached for up to 60 seconds, so you can cache them on your side for as long.

3GraphQL

GraphQL is at https://api.bifrostorbit.com/cms/graphql and takes the same keys. Use it to fetch a page, its menu and its banners in one request. From the SDK, call cms.graphql(query, { variables }); from anywhere else, POST the query as JSON with the bearer key.

1curl 'https://api.bifrostorbit.com/cms/graphql' \2  -H 'Authorization: Bearer cms_pk_…' \3  -H 'Content-Type: application/json' \4  -d '{"query":"query ($url: String!) { page(url: $url, region: \"de\") { name components } navigation(key: \"main\", region: \"de\") { items { label href } } banners(path: $url, region: \"de\") }","variables":{"url":"/products/hiking-boots"}}'

See GraphQL for every query, type and error.

4Preview without Next.js

The live preview opens your preview address with ?token=…&path=…. Your website then:

1. Checks the token by calling GEThttps://api.bifrostorbit.com/cms/preview?token=…. A 200 means it is valid.
2. Remembers that this visitor is previewing, for example in a cookie, and redirects to path.
3. While previewing, reads with the secret key and draft=true (with the SDK, pass preview: true), and adds the bridge script below.
4. Puts data-cms-id with the component's id on each component's outer element, so editors can click it to select it.

<script src="https://api.bifrostorbit.com/cms/bridge.js" defer></script><section data-cms-id="{component.id}">…</section>

The preview then reloads after each save. To show changes as editors type, see Show changes as editors type in Set up the live preview.

5Refresh on publish without Next.js

Add a POST endpoint and register it in Configuration › Webhooks. Each delivery carries x-orbit-timestamp and x-orbit-signature headers. The signature is the hex HMAC-SHA256 of timestamp + "." + body, keyed with the webhook secret.

1import { createHmac, timingSafeEqual } from 'node:crypto'23export async function POST(request: Request) {4  const timestamp = request.headers.get('x-orbit-timestamp') ?? ''5  const signature = request.headers.get('x-orbit-signature') ?? ''6  const body = await request.text()7  const expected = createHmac('sha256', process.env.CMS_WEBHOOK_SECRET!)8    .update(`${timestamp}.${body}`)9    .digest('hex')10  const valid =11    signature.length === expected.length &&12    timingSafeEqual(Buffer.from(signature), Buffer.from(expected))13  const fresh = Math.abs(Date.now() - Number(timestamp)) < 5 * 60 * 100014  if (!valid || !fresh) return new Response(null, { status: 401 })15  const { event, data } = JSON.parse(body)16  await purge(event, data)17  return new Response(null, { status: 204 })18}

purge is yours: clear the cached page at data.url, or your whole cache for events without one. Events and webhooks lists every event and what it carries.