Docs
Swagger

Developers

Store components

Install components from the macrocontent Store, assign them to a website, and let the SDK load hosted bundles on boot.

Automatic load
On a normal SDK boot (autoStartMacro / Vite plugin), Macro calls loadStoreComponents() for you. Installed, licensed components register before the first DOM scan — place their tags on the page like any local node.

End-to-end flow

  1. Browse and try

    Open the Store, preview the embedded demo, and use the editor demo (no login) to feel inline edit + sidebar behavior.

  2. Claim / install

    Sign in and install the listing. That creates an entitlement and a website install record.

  3. Assign to the website

    In the Dashboard components library, activate the component for the target site so runtime bundles are available to the SDK.

  4. Place on the page

    Drop the derived custom element (from the listing’s typeId) with a data-macro-key. Example: @macro/content-slider → <macro-content-slider>.

    html
    <macro-content-slider
  data-macro-key="home.slider"
  data-macro-type="@macro/content-slider"
></macro-content-slider>

loadStoreComponents

Fetches runtime node definitions for the website and registers remote bundles. Returns the number of nodes loaded. The public boot path already awaits it; call it yourself only for custom init flows.

typescript
// Already called during normal SDK auto-start.
// Custom init only:
await sdk.loadStoreComponents()
// After editor login, Macro may reload with:
await sdk.loadStoreComponents({ editor: true })
NameTypeRequiredDescription
editorbooleanoptionalWhen true, use the editor-session runtime endpoint instead of the public one.

Licenses and entitlements

Free and paid listings grant entitlements after claim/purchase. The website must have an active install before the Content/Editor runtime endpoints return the bundle. Manage installs from the Dashboard — not from macro.config.js.

Distribution
Listings may be hosted (runtime URL only), download (code access), or both. Presentation (look) and distribution are independent axes — download buyers can restyle in code; hosted-only buyers rely on presentation + design fields.

Presentation: content vs styled

Neutral, token-driven runtime that inherits the buyer’s site styles. Prefer inherit / currentColor and a small set of CSS variables. Design tab is usually hidden after install. Example: @macro/content-slider (content + items slots).

Do

  • Ship one presentation per listing — want both? Publish two listings.
  • For content blocks, avoid hardcoded brand colors that fight the host site.

Don’t

  • Don’t mix content and styled in a single listing.
  • Don’t assume hosted buyers can rewrite CSS — design through fields and tokens.

Macro Score

Every listing gets an automatic 0–100 Macro Score from the same bundle validation pipeline used at upload:

  • Errors → score 0 and upload blocked
  • Warnings → score drops (stricter for content blocks with hardcoded colors)
  • Passed / skipped → full or slight penalty

Buyers see the score and short reasons on the listing; publishers see the full check breakdown. Prefer high-score components for production sites.

Reference components

@macro/content-slider

Content presentation + items slots (add/remove/reorder slides).

@macro/free-section

Content presentation + project slots for developer HTML.

@macro/asteria-slider

Styled widget with payload-based slides.

Building your own blocks? Custom components, Slots: items, and Slots: project. Publishing to the Store? Publishers handbook.

Related APIs

  • Runtime for sites: GET /content/store-nodes/runtime (API key) or GET /editor/store-nodes/runtime (editor session)
  • Management: Store API and token permissions store.components:*
  • Dashboard: Components library