Docs
Swagger

Developers

Doc component kit

Building blocks for handbook pages — callouts, code, tabs, steps, API chrome, and more.

Usage
Components are auto-imported (Docs*). Prefer props for code strings so indentation stays clean.

Callouts

Info
Info — neutral product facts.
Tip
Tip — recommended approach.
Warning
Warning — easy to get wrong.
Danger
Danger — can break production data.
Success
Success — expected good outcome.

Badges

betadeprecatednewJWTmt_API keyPublic

Install command

bash
pnpm add @macrocontent/sdk @macrocontent/overlay

Code block

macro.config.js
export const macroConfig = {
  apiBaseUrl: 'https://api.macrocontent.dev',
  websiteId: 'your-website-uuid',
  publicKey: 'pk_...',
}

Code tabs

vite.config.ts
import { defineConfig } from 'vite'
import { macro } from '@macrocontent/sdk/vite'

export default defineConfig({
  plugins: [macro({ config: '/macro.config.js' })],
})

Steps

  1. Install packages

    Add the SDK and overlay to your site project.

    bash
    pnpm add @macrocontent/sdk @macrocontent/overlay

  2. Add config

    Create macro.config.js with your website credentials.

  3. Wire the Vite plugin

    Macro injects on every HTML page automatically.

API endpoint

GET/management/whoamimt_

Returns token identity and platformWebsiteId.

POST/management/content/nodesmt_

Create a content node.

Parameter table

NameTypeRequiredDescription
X-Macro-TokenstringrequiredManagement token mt_…
localestringoptionalContent locale code
cursorstringoptionalPagination cursor

File tree

macro.config.js
vite.config.ts
macro-nodes.ts
main.ts

Generic tabs

Editors work in the live overlay on the site.

Cards

Quickstart

Install SDK and mark your first key.

Swagger

Interactive OpenAPI explorer.

Do / Don’t

Do

  • Use primitives for single native elements.
  • Build components for multi-field blocks.

Don’t

  • Don’t rebuild H1/image as custom components.
  • Don’t put secrets in macro.config.js committed to public repos.

Accordion

What is a primitive?

A native HTML element marked with data-macro-key that Macro edits inline.

What is a component?

A block with a JSON payload, field schema, and custom render().