---
name: macro-components
description: >-
  Build MacroNodeDefinition custom components — fields schema, render(),
  inline/asset helpers, items/project slots, content vs styled presentation,
  and Store packaging quality. Use when creating multi-field blocks or Store listings.
---

# macrocontent custom components

## When to use a component

- **Primitive:** one heading, image, link, or form value on native HTML.
- **Component:** hero, slider, pricing, FAQ — several related fields + layout.

Docs:
- https://docs.macrocontent.dev/developers/components/
- https://docs.macrocontent.dev/developers/primitives-vs-components/
- Items slots: https://docs.macrocontent.dev/developers/slots/items/
- Project slots: https://docs.macrocontent.dev/developers/slots/project/
- Store authors: https://docs.macrocontent.dev/publishers/building/

## Minimum MacroNodeDefinition

- `typeId` namespaced like npm (`@acme/hero`)
- `fields[]` as single source of truth for overlay + Dashboard
- `defaultPayload` for empty installs
- `render(element, payload, ctx)` builds DOM
- Asset IDs in payload → `ctx.resolveAssetUrl(id)`
- Inline: `macroFieldAttr` / `macroAssetFieldAttr` with matching `inline` / `contextBar` field hints

## Slots

- **items:** editor add/remove/reorder (slides, cards) — use instead of giant JSON arrays.
- **project:** site developer projects HTML into a region; stash before wiping `innerHTML`.

## Presentation

- **content:** inherit host design; few CSS tokens (`--macro-accent`, …).
- **styled:** ship look via `group: 'design'` fields + CSS variables.
- One presentation per Store listing.

## Store quality

- Honest presentation, useful defaults, Macro Score clean.
- See https://docs.macrocontent.dev/publishers/quality/