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

pnpm add @macrocontent/sdk @macrocontent/overlay

Code block

Pass :code as a string so highlighting and copy always use the source — not the rendered HTML. Optional: show-line-numbers, highlight-lines ("2-3" or [2, 3]).

macro.config.jsjavascript

1export const macroConfig = {
2  apiBaseUrl: 'https://api.macrocontent.dev',
3  websiteId: 'your-website-uuid',
4  publicKey: 'pk_...',
5}

Keyboard

⌘ K search · Esc close nav.

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

0
Install packages
Add the SDK and overlay to your site project.
pnpm add @macrocontent/sdk @macrocontent/overlay
Add config
Create macro.config.js with your website credentials.
Wire the Vite plugin
Macrocontent injects on every HTML page automatically.

API endpoint

GET/management/whoamimt_

Returns token identity and platformWebsiteId.

POST/management/content/nodesmt_

Create a content node.

API example (request / response)

Who am I?

Confirm the management token and which website it belongs to.

Requestcurl

curl https://api.macrocontent.dev/management/whoami \
  -H "Authorization: Bearer mt_…"

Response200 OK

{
  "ok": true,
  "tokenType": "management",
  "platformWebsiteId": "…"
}

Parameter table

Name	Type	Required	Description
`X-Macro-Token`	`string`	required	Management token mt_…
`locale`	`string`	optional	Content locale code
`cursor`	`string`	optional	Pagination 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

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 Macrocontent edits inline.

What is a component?

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