Create a Custom Component in Sitecore XM Cloud using the Content SDK

In the previous blog, we saw how to set up and start working with the Sitecore Content SDK.
Now, as promised, we’re back with the next blog on how to create component using the Content SDK and integrate it into your app.

In this guide, we’ll create a custom component, register it in Sitecore XM Cloud, and make it available inside the Page Builder using the Content SDK.

1. Create a Component Item in Content Editor

In Content Editor, navigate to:

/sitecore/layout/Renderings/Project/DemoProject

Clone an existing component or use Derivative Rendering to create a new one

- Go to the rendering path you want to clone

- /sitecore/layout/Renderings/Feature/DemoSite/CustomForm

- Right click → Scripts → Clone Rendering

Provide details in the clone wizard:

- Rendering Name → RichTextBlockA

- Module/Site → select your project/site name

- For other tabs (Data, Parameters, etc.) → you can inherit or copy to change it as needed

- Click Proceed

 

 

Once created, you’ll see your new Rendering item under mentioned path:

 

 2. Add Your Component to Available Renderings

- Navigate to : sitecore/Content/DemoSite/Presentation

- Right-click Available Renderings → Insert → Available Renderings

 

 

Enter a name, e.g. MyCustomForm, and click OK

Under the Data section → click Edit

In the dialog, navigate to: 

Layout/Renderings/Project/DemoProject 

Double-click your component to add it. Click OK

Save your changes.

 

Back in the Available Renderings item:

Check the checkbox - Group renderings in sections according to Available Renderings items in the site

Save the changes

 

3. Verify Component in Page Builder

Now open Pages (Sitecore Page Editor or Local Editing Host)

You’ll see your new component listed here

 

 

but it might be disabled with a tooltip saying: “This component is not implemented in your editing host.”

This happens because Content SDK requires manual component registration (unlike JSS SDK, which auto-registers).

Next, we’ll fix that.

4. Scaffold the Component

- Run the Content SDK CLI command to generate a new component:

sitecore-tools project component scaffold MyCustomForm

- This will generate a component under src/components/MyCustomForm

Note: There’s a known issue — the generated code misses the JSX import.
Fix it by editing the first line of code as below.

import React, { JSX } from 'react';

and the error will be gone

 

This is not done yet, we need to register the component

5. Register Component

This step is unique to the Content SDK as compared to JSS SDK

- Open your component map file under src/lib/component-map.ts to register the component

- Add your component import and mapping:

6. Sync and Test

Now, sync your changes and restart your local editing host.

In the Page Builder, you’ll see your new component enabled and ready to add on any page

We have now successfully built our first XM Cloud Component using the Content SDK!

Next, we will learn to

- Connect component fields dynamically from Sitecore Content items

- Add Rendering Parameters for styling options

- Use GraphQL Layout Service