content-sdk-layout-inspector

A dev-only floating panel that visualizes the Sitecore Content SDK layout — placeholders → components → fields — for Next.js App Router apps, where __NEXT_DATA__ isn't available to inspect.

It reads the layout from the SDK's context via useSitecore(), so there are no window hacks. Auto-hides in production.

Install

npm i -D content-sdk-layout-inspector

Peer deps (already in any Content SDK app): react and @sitecore-content-sdk/nextjs.

Usage

Mount it inside the SitecoreProvider — the easiest spot is Providers.tsx:

'use client';
import { SitecoreProvider } from '@sitecore-content-sdk/nextjs';
import { LayoutInspector } from 'content-sdk-layout-inspector';

export default function Providers({ children, page }) {
  return (
    <SitecoreProvider /* ...your props... */ page={page}>
      {children}
      <LayoutInspector />
    </SitecoreProvider>
  );
}

A 🌲 Layout button appears bottom-right. Click it to see the placeholder / component tree, each component's uid / datasource / fields, and a copy JSON button.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | hideInProduction | boolean | true | Render nothing when NODE_ENV === 'production'. |

Develop

npm install
npm run build   # outputs dist/ (esm + cjs + d.ts)

Publish

npm login
npm publish            # add --access public if you scope it (@you/...)

License

MIT