Empower Your Components: Access Rendering Parameters via Sitecore Content SDK

When building components in Sitecore XM Cloud with the Content SDK, it’s common to let authors control certain visual aspects like background colours, layouts, or visibility options directly from the Page Builder. This is where Rendering Parameters come in.

Rendering Parameters let you configure per-rendering options that are not tied to the data source item but instead linked to the component instance on a page.

In this blog, let’s see how to:

1. Create Rendering Parameters for styling options
2. Attach them to a rendering
3. Access and use them inside your component through the Content SDK API

1. Create a Rendering Parameters Template in XM Cloud

In the Sitecore Content Editor, follow these steps:

• Navigate to /sitecore/templates/Project/DemoProject/Rendering Parameters
• Create a new template named CardList Rendering Parameters
• Add fields such as
• Styles (Single-Line Text or Droplist)
• Show Title (Checkbox)
• Save the template.

This template defines the configuration fields that authors will see when they add or edit the component in Page Builder.

2. Attach the Rendering Parameters Template to Your Rendering Item

Next, link this template to your component’s rendering definition.

• Go to /sitecore/layout/Renderings/Project/DemoProject/CardList
• In the Rendering Parameters Template field, select /sitecore/templates/Project/DemoProject/Rendering Parameters/CardList Rendering Parameters
• Save and publish your changes.

Now, when authors add the CardList component in Page Builder, they’ll see fields for Styles and Show Title in the configuration dialog.

3. Access Rendering Parameters in the Content SDK

When the Content SDK (via the Layout Service or layout API) fetches layout data, it includes the rendering parameters in the params object of your component props.

Example JSON:

{

  "componentName": "CardList",

  "dataSource": "/sitecore/content/DemoProject/Data/Cards",

  "params": {

    "Styles": "bg-light p-4",

    "ShowTitle": "1",

    "RenderingIdentifier": "card-list-123"

  }

}

4. Read Rendering Parameters in Your Component (Next.js Example)

Here’s how to access and use rendering parameters in a Next.js component using the Sitecore Content SDK:

import React, { JSX } from 'react';

import { ComponentParams, ComponentRendering } from '@sitecore-content-sdk/nextjs';

interface CardListProps {

  rendering: ComponentRendering & { params: ComponentParams };

  params: ComponentParams;

}

export const Default = (props: CardListProps): JSX.Element => {

  const id = props.params.RenderingIdentifier;

  const styles = props.params.Styles || 'bg-white';

  const showTitle = props.params.ShowTitle === '1';

  return (

    <div className={`component ${styles}`} id={id || undefined}>

      <div className="component-content p-4 shadow-md rounded">

        {showTitle && <h2 className="text-lg font-bold mb-2">Card List Component</h2>}

        <p>This component uses rendering parameters for styling!</p>

      </div>

    </div>

  );

};

This setup:

• Reads rendering parameters (styles, showTitle) from Sitecore layout data
• Dynamically applies them to your component’s HTML
• Works seamlessly with any component fetched using the Content SDK or Layout Service

With this approach, authors gain flexibility, and your components remain reusable and consistent with XM Cloud’s headless architecture.