Developers

Sitewide chrome

Mark header, footer, and shared layout content so Macro treats it as sitewide — same keys on every page.

data-macro-sitewide
Put data-macro-sitewide on a shared layout root (or any ancestor). Every data-macro-key descendant is flagged sitewide: true in the SDK scan — useful for chrome that must stay consistent across routes.

Why it exists

Page body content is naturally page-scoped by which HTML file you open. Layout chrome (logo text, nav labels, footer legal line) is the same markup on every page. Sitewide marking documents that intent for the SDK, overlay, and export/bake tooling that strip Macro attributes.

Markup

layout.html
<header data-macro-sitewide>
  <a href="/" data-macro-key="site.brand">Acme</a>
  <nav>
    <a href="/pricing" data-macro-key="site.nav.pricing">Pricing</a>
    <a href="/contact" data-macro-key="site.nav.contact">Contact</a>
  </nav>
</header>

<main>
  <!-- page-specific keys — not sitewide -->
  <h1 data-macro-key="home.hero.title">Welcome</h1>
</main>

<footer data-macro-sitewide>
  <p data-macro-key="site.footer.legal">© Acme</p>
</footer>
NameTypeRequiredDescription
data-macro-sitewideflagrequiredPresent on the element or an ancestor to mark chrome as sitewide.
data-macro-keystringrequiredSame key must appear in the shared layout on every page.

Key naming for chrome

Do

  • Prefix shared keys clearly: site.nav.home, site.footer.legal.
  • Keep the same keys in every page’s layout include — one source of truth.
  • Combine with site variables for phone/address reuse.

Don’t

  • Don’t invent per-page keys for the same footer line — editors will fragment content.
  • Don’t put unique page heroes inside a sitewide wrapper.

SDK behavior

  • isSitewideNode() is true when the element or an ancestor has data-macro-sitewide.
  • MacroNodeRef.sitewide carries that flag after scanDom.
  • Bake can strip data-macro-sitewide along with other Macro attributes on exit.

Powered-by vs chrome

The floating “Powered by” badge is separate from sitewide content keys. Attribution and badge policy live under Powered-by & attribution.