@alecjessen/ab-cms

Site SDK for the AB Dev Panel CMS: declare your site's structure in a typed manifest, read CMS-managed content in your pages, and sync structural changes with one command.

npm install @alecjessen/ab-cms

How it fits together

• The manifest owns structure. cms.manifest.ts in your repo declares pages, sections, and fields.
• The CMS owns content. Editors change copy and images in the AB Dev Panel; your site fetches that content at render time.
• Seeds run once. The seed blocks in the manifest fill a section the first time it syncs — after that, the CMS content is the source of truth and drifts from the manifest by design.

Declare your site

// cms.manifest.ts
import { defineSite } from "@alecjessen/ab-cms";

export default defineSite({
  alias: "my_site",
  pages: [
    {
      slug: "/",
      title: "Home",
      sections: [
        {
          key: "hero",
          title: "Hero",
          kind: "singleton",
          fields: {
            heading: { label: "Heading", type: "text" },
            subheading: { label: "Subheading", type: "text" },
          },
          seed: [{ name: "Hero", values: { heading: "Welcome" } }],
        },
      ],
    },
  ],
});

Read content in your pages

import { fetchPublicSiteData, readSiteContent, cmsItemProps } from "@alecjessen/ab-cms";
import manifest from "../cms.manifest";

const website = await fetchPublicSiteData("my_site");
const content = readSiteContent(manifest, website);

content.hero.heading;                    // typed field access
content.showcase.map((item) => item.name); // collection sections are arrays
cmsItemProps(item);                      // data-* attributes for live-preview click-to-edit

fetchPublicSiteData targets the AB Dev Panel by default; override with the AB_CMS_URL environment variable or { baseUrl }.

Sync structural changes

npx ab-cms sync --dry-run   # show what would change
npx ab-cms sync             # apply schema changes; seed only brand-new sections

Requires AB_CMS_API_KEY in the environment (ask your AB Dev Team contact). The dry-run reports existing content as skipped: seed and CMS-only content as orphans — both are normal, not errors.

Live preview

initCmsPreview() wires a site to the panel's live preview iframe (section scrolling, click-to-edit). Call it once client-side; it no-ops outside the preview.

License

MIT © Alexander Jessen