CMS blocks

Block types from a CMS payload resolve to registered components by ID.

CMS blocks

examples/cms-block-demo/render-blocks.js

const runtime = createAstroRuntime(
  cmsPreset({
    blocks: [
      { id: 'blocks.hero', loader: () => import('./blocks/Hero.astro') },
      { id: 'blocks.feature-grid', loader: () => import('./blocks/FeatureGrid.astro') },
      { id: 'blocks.cta', loader: () => import('./blocks/CTA.astro') },
    ],
  }),
);
const cms = await runtime.getService('cms');
const html = await cms.renderBlocks([
  { type: 'hero', data: { title: 'Willkommen', ctaText: 'Jetzt starten' } },
  { type: 'feature-grid', data: { features: [/* … */] } },
  { type: 'cta', data: { title: 'Bereit?', primaryText: 'Weiter', primaryHref: '#order' } },
]);

<section class="hero text-center" style data-astro-cid-k3ee7l6p>
  <div class="hero-content" data-astro-cid-k3ee7l6p>
    <h1 data-astro-cid-k3ee7l6p>Willkommen
    </h1>
    <p class="subtitle" data-astro-cid-k3ee7l6p>Gebaut mit Astro.
    </p>
    <a href="#start" class="cta-button" data-astro-cid-k3ee7l6p>Jetzt starten
    </a>
  </div>
</section>
<section class="feature-grid" data-astro-cid-ylpx5uo6>
  <div class="grid columns-3" data-astro-cid-ylpx5uo6>
    <div class="feature-card" data-astro-cid-ylpx5uo6>
      <div class="icon" data-astro-cid-ylpx5uo6>1
      </div>
      <h3 data-astro-cid-ylpx5uo6>Zero-Config
      </h3>
      <p data-astro-cid-ylpx5uo6>Sofort startbereit.
      </p>
    </div>
  </div>
</section>
<section class="cta default" data-astro-cid-5mzrcpto>
  <div class="cta-content" data-astro-cid-5mzrcpto>
    <h2 data-astro-cid-5mzrcpto>Bereit?
    </h2>
    <div class="cta-buttons" data-astro-cid-5mzrcpto>
      <a href="#order" class="btn primary" data-astro-cid-5mzrcpto>Weiter
      </a>
    </div>
  </div>
</section>

registry
cmsPreset