Sitecore Marketplace SDK Demo App

If you are interested in the Vite starter app, use this link: sitecore-marketplace-starter-vite

A starter template for building standalone Sitecore Marketplace apps using Next.js, React, Chakra UI, and the Sitecore Marketplace SDK. This demo showcases best practices for context management, multi-tenant selection, and integration with Sitecore APIs.

Disclaimer: This project is community-created and provided as a reference only. It is not officially supported by Sitecore, and is not intended for production use. The code and examples are for educational purposes and to give hints for possible usage patterns. Use at your own risk.

Features

• Sitecore Marketplace SDK integration: Client and XM Cloud APIs for data access.
• Modern UI: Built with Chakra UI and Sitecore Blok design system.
• Multi-tenant selection: Choose and switch tenants using React context.
• Application context display: View current app context and environment details.
• Tenant info display: See dynamic details for the selected tenant.
• Site list by tenant: Select a tenant and view all associated sites, with detailed info for the selected site.
• GraphQL query example: Run custom queries against the Sitecore Marketplace API, with loading, error, and result display.
• Next.js App Router navigation: Multi-page structure with sidebar navigation using Next.js routing.
• Custom context provider patterns: useMemo and strong typing for robust state management.
• Mutation Wizard Demo: Step-by-step modal wizard demonstrating Sitecore authoring mutations: createTemplate, createItem, and deleteItem. Each step shows how to perform these mutations, handle errors, and display results using the Sitecore Marketplace SDK. For further mutation examples, see the official Sitecore documentation.
• Custom Field Color Picker: Simple HEX color picker for custom fields, using react-colorful. Docs | Custom Fields Guide
• Page Context Panel/Example: View and debug page context. Docs

Dependencies

• @sitecore-marketplace-sdk/client (Marketplace SDK client)
• @sitecore-marketplace-sdk/xmc (XM Cloud API integration)
• @sitecore/blok-theme (Sitecore Blok design system)
• @chakra-ui/react, @emotion/react, @emotion/styled, framer-motion (UI framework)
• @chakra-ui/cli (Chakra UI CLI)
• @mdi/js (Material Design Icons)
• react-colorful (Color picker component)
• next, react, react-dom (Next.js framework)

For setup instructions, see the Setup Guide.

Further References

• Sitecore Blok Design System: Sitecore Blok is the official product design system and UI framework for building apps in the Sitecore product design language. Includes foundations, components, recipes, guidelines, and resources for developers and designers.
• Marketplace SDK Documentation: Official documentation for the Sitecore Marketplace SDK. Learn how to build JavaScript/TypeScript apps that extend and customize Sitecore products, with guides, API references, and developer info.
• Marketplace SDK GitHub Repository: Open-source monorepo for the Sitecore Marketplace SDK. Includes packages for client integration, XM Cloud APIs, and core communication. Find code, issues, releases, and contribution guides.
• Marketplace SDK for JavaScript: Reference documentation for using the Sitecore Marketplace SDK in JavaScript applications.
• Marketplace Developer Introduction: Introduction to Sitecore Marketplace for developers, including app registration, configuration, and extension points.
• Marketplace SDK Quick Start: Quick start guide for the Sitecore Marketplace SDK.