All docs

Background (ROOT)

The CraftJS ROOT node. Holds site-wide design data — palette, styleGuide, fonts, SEO, JSON-LD, head/footer injects, company variables, integrations, redirects, and AI hints. Every page tree begins with ROOT resolved as Background.

The CraftJS ROOT node. Holds site-wide design data — palette, styleGuide, fonts, SEO, JSON-LD, head/footer injects, company variables, integrations, redirects, and AI hints. Every page tree begins with ROOT resolved as Background.

Background is exported from DEFAULT_CRAFT_RESOLVER without the withConditionalVisibility wrapper — ROOT is always visible.

Key files

Key props

PropTypeNotes
palletArray<{ name, color }>Site palette slots. Names map to CSS vars via toCSSVarName() (camelCase → hyphenated).
styleGuideobjectGlobal style tokens — radius, depth, accentFontFamily, input border/bg/text/focus colors, link color, etc. Any *FontFamily key auto-generates a CSS var. Heading/Body fonts live in theme.typography[], not styleGuide — see Theme System docs.
theme.typographyarrayText-style tokens (full CustomFont shape). Heading and Body are reserved names that drive --heading-font-family / --body-font-family global vars.
themeobjectEffective theme (palette + styleGuide merged). Read via resolveTheme().
modifiersarraySite-wide modifier classes applied at the root.
inject.head / inject.footerstringRaw HTML injected on every page (CSS rules, <script>, etc.). Used for show-hide CSS rules, marquee fixes, transparent-nav scripts.
seoobjectDefault page SEO (title, description, ogImage, …). Per-page Container seo overrides.
companyobject{{company.*}} template variables — name, email, phone, address.
integrationsobjectGA, Plausible, Stripe Connect, etc.
redirectsarrayStatic-export redirects.
pageMediaarrayMedia library entries (type: "cdn" | "url" | "svg" | "r2").

Gotchas

  • Text modifiers in template JSON go on ROOT.props.modifiers as a sibling of props.theme, not nested inside theme. The FOUC pipeline reads them in utils/compileTailwindCSS.ts.
  • Per-page SEO falls back to ROOT.props.seo when unset.
  • Don't add Google Fonts <link> tags to inject.head — the FOUC pipeline + extractGoogleFontsUrl already handles all font-* classes that resolve via *FontFamily styleGuide keys.

Related