Next.js Data Explorer

Inspect JSS layout trees, search property routes, copy paths instantly, and visually highlight components on the live page. Take the guesswork out of building and debugging headless Sitecore JSS and Next.js applications. This extension provides developers and QA teams with a premium, light-themed inspection console to explore component props, parameters, and fields instantly in real-time. NEW IN VERSION 2.3.0 Next.js App Router Support (React Fiber Parser): Access layout data on modern Next.js App Router applications. The extension traverses the live React Fiber tree in memory to extract hydrated properties directly from elements like SitecoreProvider or SitecoreContext—working seamlessly on both development builds and minified production staging sites. Visual Component Highlights: Hover over any node or field in the Tree View to draw a dashed outline and label overlay over the matching component on your live browser tab. Out-of-view components are scrolled into the viewport smoothly. Developer Productivity Toolbars: Click "Path" on any search result card to copy its absolute JSON path (e.g. sitecore.route.placeholders.main[0].fields.title) directly to your clipboard for instant binding. Click "Value" to copy pretty-printed JSON models or raw values instantly.