A Sitecore Marketplace application that enables developers and content authors to compare layout JSON between authoring and published versions of items in XM Cloud Pages.
- Real-time Comparison: Automatically compares layout JSON when items are selected in the page builder
- Side-by-side Diff View: Uses CodeMirror to display the 2 different versions of Item Layout JSON
- Dual Environment Access: Fetches data from both Preview (via XMC API) and Live (via Experience Edge) environments
- Context Panel Integration: Runs as a context panel in XM Cloud Pages for seamless workflow integration
- Sitecore Blok Design: Uses Sitecore's official design system for consistent UI/UX
- Preview Data: Retrieved via Sitecore Marketplace SDK using
xmc.preview.graphqlmutation - Published Data: Retrieved via Sitecore Marketplace SDK using
xmc.live.graphqlmutation
MarketplaceApp: Main application wrapper with Chakra UI providerItemDiffTool: Core component that orchestrates the comparison workflowDiffViewer: CodeMirror-based component for displaying side-by-side JSON diffsLayoutComparisonService: Service layer handling data fetching and comparison logic
npm installRun the development server:
npm run devThe app will be available at http://localhost:3000
npm run build
npm startThis app is configured to run as a context panel in XM Cloud Pages:
- Open XM Cloud Pages in your Sitecore environment
- Select any item in the page tree or canvas
- Open the context panel where the Item Layout Diff Tool is installed
- View the comparison between authoring and published layout JSON
- Use the refresh button to manually reload the comparison
- @sitecore-marketplace-sdk/client: Core Marketplace SDK
- @sitecore-marketplace-sdk/xmc: XM Cloud specific APIs
- @sitecore/blok-theme: Sitecore design system
- @chakra-ui/react: UI component library
- @codemirror/merge: Diff viewer functionality
- Next.js: React framework for the application
This project is licensed under the MIT License.