Docs
Swagger

Developers

Developers handbook

Integrate the macrocontent SDK, mark editable content, and ship custom or store-hosted components on your site.

Start here
New to macrocontent? Follow Quickstart to install the packages, add macro.config.js, and mark your first key in under ten minutes.

What you will build

Macrocontent turns a normal website into an editable surface. You keep your HTML, CSS, and build tool; Macro injects the SDK, hydrates live content, and opens an in-page editor for your team.

  1. Connect the site

    Install @macrocontent/sdk and @macrocontent/overlay, drop in macro.config.js, and enable the Vite plugin (or a single layout loader tag).

  2. Mark content

    Add data-macro-key on text, images, richtext, groups, and components. Editors change values in the overlay — no CMS templates required.

  3. Extend with components

    Register local MacroNodeDefinition blocks, use slots for repeatable or projected regions, or load licensed components from the Store at runtime.

Integrate

Quickstart

Install packages, configure the site, wire Vite, mark a key, open the editor.

Where credentials come from

Dashboard SDK keys, API tokens, and what belongs in macro.config.js.

macro.config.js

Full option reference for the site config file.

Keys model

pk_, dk_, sk_ vs mt_ tokens, allowedOrigins, and rotation.

Mark & deliver

Marking basics

data-macro-key types and naming conventions.

SEO marking

data-macro-page, data-macro-seo, and page-scoped nodes.

Prerender

Build-time live content injection with MACRO_SECRET_KEY.

Bake & export

Offline exit: macrobundle ZIP into static HTML.

Components

Custom components

MacroNodeDefinition, fields, render(), register, and place blocks.

Slots: items

Editor-managed repeaters inside components.

Slots: project

Light-DOM projection for site-developer HTML.

Store components

loadStoreComponents, licenses, content vs styled, Macro Score.

Related handbooks