All Systems Operational
Powered By
profound-logo

Renderer Project

Project setup for the renderer


Install Renderer

Pull the renderer into your project:

npm i cms-renderer

Project Structure

Decide where to resolve the renderer in your project:

src/
    app/
        [...slug]/
            page.tsx

Next Steps

  • Setup parametric routing for dynamic route handling
  • Extend registry with custom components
  • Integrate admin panel for live editing

Our next js project is a simple catch all route

For a website that is structured like a documentation page, the page.tsx looks like
import NavbarBlock from '@/components/NavbarBlock';
import
Continue Reading
NextParametric Routing›
UIContent
from
'@/components/UIContent'
;
import UIFooter from '@/components/UIFooter';
import UISidebar from '@/components/UISidebar'; // our design system that's agnostic to a CMS
import ParametricRoutePage from 'cms-renderer/lib/renderer'; // Profound CMS renderer primitives to allow rendering and live previews
import type { BlockComponentRegistry } from 'cms-renderer/lib/types'; // block registry TypeScript types
const registry: Partial<BlockComponentRegistry> = {
header: NavbarBlock,
uisidebar: UISidebar,
uicontent: UIContent,
uifooter: UIFooter,
};
interface PageProps {
params: Promise<{ slug: string[] }>;
}
export default async function Page({ params }: PageProps) {
const { slug } = await params;
return (
<ParametricRoutePage
registry={registry}
apiKey={cmsConfig.apiKey}
websiteId={cmsConfig.websiteId}
cmsUrl={cmsConfig.cmsUrl}
params={Promise.resolve({ slug })}
/>
);
}

Then we start creating pages, both parametric and static pages should work at this point.


Next steps

  1. Setup Zod component pull to validate your component's type against the remote admin panel's most updated state to keep in sync.
  2. Setup parametric pages with components in the admin panel
  3. Integrate the admin panel as a proxy for live editing

Hybrid

Setup Hybrid CMS ProjectParametric Pages with ComponentsTypes of ComponentsSetup server sent events (SSE) content refetchSetup admin panel proxyStatic Rendering with Edit Mode SupportScripting in Template BuilderGetting Started Hybrid

Headless

Quick startSplit Screen JSON Component Builder with LLMComponent Zod Pull

MCP

MCP with Claude Code / Codex

Feature

Documentation Site TemplateFeature Template BuilderTranslation ServiceOrganizations & Website Heirarchy

Motivation

Our Approch

Terminology

'Hybrid' vs 'Headless'
profound-logoProfound CMS
⌘K
Admin