Welcome back to the XM Cloud Basics series. If you’ve followed along so far, you now have a working XM Cloud environment and a locally set up JSS-based project.

In this post, we’ll explore one of the most exciting features introduced in XM Cloud—Sitecore Pages.

What is Sitecore Pages?

Sitecore Pages is the new WYSIWYG visual editor included with XM Cloud. It replaces Experience Editor and is fully optimized for headless architecture.

With Pages, content authors can:

• Visually build pages using drag-and-drop
• Manage component data directly in context
• Preview experiences across devices
• Interact with headless front-ends (Next.js) in real time

How Does Pages Work Under the Hood?

Pages connects to:

• Your XM Cloud environment (content items, layout definitions)
• Your headless front-end app (usually Next.js, hosted via Vercel or similar)
• Sitecore Edge to retrieve published content

When you load Pages:

• It calls the Layout Service (GraphQL) to fetch page layout and data
• Renders the front-end using your app’s preview endpoint
• Displays your components in a live preview mode

Developers define components (renderings) in code, and authors use Pages to assemble them into complete pages.

Creating and Managing Components

In XM Cloud, components are managed the same way as in XP (if you’re using JSS):

• Defined as React components in your Next.js project
• Mapped using componentFactory in sitecore/manifest.ts
• Registered as renderings in Sitecore (via CLI serialization)

Once defined:

• Sync the rendering item using sitecore push
• Authors will now see this component available in the component toolbox inside Pages

Using Pages as a Content Author

Once components are available in the toolbox:

1. Open your page in the Pages UI
2. Drag the component onto a placeholder
3. Edit the content inline or via the right-hand data panel
4. Preview changes across breakpoints (mobile, tablet, desktop)
5. Save or publish your changes

Authors don’t need to understand data sources, field types, or GraphQL—they work with content in a visual, intuitive interface.

Data Source Management in Pages

Just like in traditional Sitecore:

• Components can have data source items
• These can be selected or created via the Pages UI
• Authors can reuse existing content across multiple pages

XM Cloud simplifies this by giving you a clean UI to pick or create data sources without jumping into the Content Editor.

In the next post, we’ll walk through the deployment process in XM Cloud using Deploy App and CLI, and explore how CI/CD works in this SaaS-native environment.

Hope this helps!

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂