Rendering Content

The StudioCMS rendering system is dynamic based on the current pageType.

Example Catch-all route where the current page is grabbed from the SDK and the page data is passed to the renderer, in this case we are using the default studiocms/markdown pageType configured in the page settings, and wrapping that in a Layout like we do with the @studiocms/blog plugin. a pageBuilder plugin for example, may come without a standard layout, but instead intend on you designing the whole thing within the builder like you would on other CMS systems.

Note

Please note that using our rendering system requires you to have a studiocms plugin that provides a renderer, such as @studiocms/md, @studiocms/html or a custom plugin that provides a renderer for your content type. The renderer will handle the rendering of the content based on the pageType defined in your StudioCMS configuration.

src/pages/[...slug].astro

---
import { StudioCMSRenderer } from 'studiocms:renderer';
import { SDKCoreJs, runSDK } from 'studiocms:sdk';
import Layout from '../layouts/Layout.astro';

let { slug } = Astro.params;

if (!slug) {
  slug = 'index';
}

const { data: page } = await runSDK(SDKCoreJs.GET.page.bySlug(slug))

if (!page) {
  return new Response(null, { status: 404 });
}

const { title, description, heroImage } = page;
---

<Layout title={title} description={description} heroImage={heroImage}>
  <main>
    <StudioCMSRenderer data={page} />
  </main>
</Layout>