All Systems Operational
Powered By
profound-logo
profound-logoProfound CMS
⌘K
Admin

Setup Admin Panel Proxy

setup admin panel proxy

Attaching the admin panel on your website is an easy step

Why is this required

This ensures your editing experience is seamless. With the admin panel attached to your website via a proxy, you can edit your website on the same URL and have a visual preview of the changes in real time. It also enables overlay editing which is a better user experience in editing the webpage.

Required Steps

Proxy setup (there are some caveats)

The proxy setup is just a proxy.ts file in your project which behaves like a URL rewrite, to allow /admin endpoint of your website to resolve to the CMS.

  • For localhost: you must use a tunnel (since CMS cannot access localhost directly)
  • Works seamlessly on deployed websites

Proxy Setup

// proxy.ts
import { createCmsProxy } from 'cms-renderer/lib/proxy';

export const proxy = createCmsProxy({
  upstream:
Continue Reading
Previous‹SseNextStatic Rendering With Edit Mode Support›

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'
"https://cms.dev.tryprofound.com"
,
// cms admin panel
});
export const config = {
matcher: [
'/admin',
'/admin/:path*',
'/api/:path*',
'/auth/:path*',
'/_next/:path*',
'/((?:.*\\.(?:css|js|map|png|jpg|jpeg|gif|svg|ico|webp|avif|woff|woff2|ttf|eot|txt|xml))$)',
],
};

Now you can go to: /admin to access the admin panel from your website. This enables live preview.

Renderer Search Params Resolution

The overlays are handled automatically. You just need to pass searchParams into your renderer.

// page.tsx
interface PageProps {
  params: Promise<{ slug: string[] }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}

export default async function Page({ params, searchParams }: PageProps) {
  const { slug } = await params;

  return (
    <ParametricRoutePage
      registry={registry}
      apiKey="sk_..."
      websiteId="a2717ba3-29db-..."
      cmsUrl={"https://cms.dev.tryprofound.com"}
      params={Promise.resolve({ slug })}
      searchParams={searchParams}
    />
  );
}

How to Verify

  1. Go to /admin on your website
  2. Should ask you to login and immediately open the CMS admin panel

Overlays and live previews should work automatically.