Workspace Branding

Overview

cmssy is headless — your Next.js app owns all visual styling (colors, typography, dark mode) as standard Tailwind/CSS in your own repo. What cmssy stores per workspace is branding: a brand name and shared assets you fetch and apply in your site.

Workspace Branding

Branding lives on the workspace site config. Fetch it with fetchSiteConfig from @cmssy/react:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

const { branding } = await fetchSiteConfig(cmssy);
// { brandName, logoUrl, faviconUrl, ogImageUrl } | null

Field	What it is	Where to use
`brandName`	Display name of the site / brand.	Page title, metadata, header
`logoUrl`	Logo asset URL.	Render in your header or footer
`faviconUrl`	Favicon asset URL.	Wire into your metadata icons
`ogImageUrl`	Default Open Graph / social-share image.	Default OG image for pages without a custom image

Every field is nullable — render only what is set. buildCmssyMetadata already applies branding for SEO: brandName as a title fallback and ogImageUrl as the default Open Graph / Twitter image.

Using branding in your app

Favicon:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

export async function generateMetadata() {
  const { branding } = await fetchSiteConfig(cmssy);
  return branding?.faviconUrl ? { icons: { icon: branding.faviconUrl } } : {};
}

Logo in header:

import { fetchSiteConfig } from "@cmssy/react";
import { cmssy } from "@/cmssy.config";

export default async function Header() {
  const { branding } = await fetchSiteConfig(cmssy);
  return (
    <header>
      {branding?.logoUrl && <img src={branding.logoUrl} alt={branding.brandName} />}
      <h1>{branding?.brandName || 'My Site'}</h1>
    </header>
  );
}