Docs
Swagger

Developers

Quickstart

Add macrocontent to a Vite site: install packages, configure credentials, inject the SDK, mark a key, and open the editor.

Before you start
You need a website in the Dashboard and a frontend key from SDK keys (pk_… for production or dk_… for local/staging). See Where credentials come from and Keys model.

  1. Install packages

    Add the SDK and overlay to your site project.

    bash
    pnpm add @macrocontent/sdk @macrocontent/overlay

  2. Create macro.config.js

    Put credentials in the site root. This file is for frontend keys only — never put a secret key or management token here.

    macro.config.js
    export const macroConfig = {
  apiBaseUrl: 'https://api.macrocontent.dev',
  websiteId: 'your-website-uuid',
  publicKey: 'pk_...', // or dk_... for local/staging
  editorLogin: { shortcut: 'Mod+Shift+M' },
  overlay: { enabled: true, theme: 'dark' },
}
    Editor shortcut
    Sign-in opens an in-page modal via ⌘⇧M / Ctrl+Shift+M (Mod+Shift+M). There is no separate /login page.

  3. Add the Vite plugin

    Macro injects on every HTML page automatically. You do not need a main.js bootstrap or per-page script tags.

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

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

  4. Mark your first key

    Add data-macro-key on any element you want editors to change. Type is optional — <img> is detected as image.

    index.html
    <h1 data-macro-key="hero.title">Build faster</h1>
<img
  data-macro-key="hero.image"
  data-macro-type="image"
  src="/hero.jpg"
  alt="Hero"
/>

    More types and patterns: Marking basics.

  5. Run the site and open the editor

    Start your Vite (or framework) dev server, open the page, then press the editor shortcut.

    bash
    pnpm dev
    1. Press ⌘⇧M / Ctrl+Shift+M.
    2. Sign in with a website editor account from the Dashboard.
    3. Click the marked element and edit — changes autosave to draft.

Recommended project layout

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

What happens under the hood

  • The Vite plugin (or layout loader) boots the SDK with your config.
  • Installed Store components load automatically via loadStoreComponents().
  • The SDK scans data-macro-key nodes and hydrates live values.
  • After editor login, the overlay enables inline editing and the sidebar.

Next steps

Where credentials come from

Dashboard paths for websiteId, pk_/dk_, and mt_ tokens.

macro.config.js

Every option the loader and Vite plugin understand.

Marking basics

All primitive types and examples.

Custom components

Build multi-field blocks with MacroNodeDefinition.