Bring your own components

Content authors and designers use the Components builder to create, align, design, and style components within the XM Cloud user interface. Developers can enrich this offering by adding their own React or web components, making them available for rendering and usage throughout your XM Cloud website, in a simple bring-your-own-code (BYOC) workflow. After you create your React code or web component, you bring it into XM Cloud by registering or scaffolding it.

BYOC has several advantages:

  • BYOC components appear in the interface like native components, although Sitecore can't access the source or definition, keeping the component code private. You can apply theming in the Components builder, and add them to pages with the drag-and-drop Pages interface, just like any other component.

  • Hot reloading code in the browser when you develop locally, so that you can immediately see your changes on the page, including rendering the component in Pages or the final website.

  • Flexibility to create components using your own tools, dependencies, and techniques.

  • It allows you to reuse components across XM Cloud sites.

  • The configuration user interface is generated automatically, based on the JSON schema you pass, allowing content authors to configure the component within the Pages WYSIWYG editor.

Adding BYOC components to XM Cloud

You add your BYOC components to XM Cloud in one of two ways:

  • Registering manually - the components are in a separate byoc folder in your JSS Next.js application.

  • Scaffolding - the components are part of the components folder in your JSS next.js application, alongside SXA components.

Rendering modes

BYOC supports a range of development and configuration options to suit your needs.

Client-side

You can choose to render your registered component on the client side, for example: to add a smart input field, display dynamic content, or any other interactive functionality. You add the client components to the byoc/index.client.ts file in your JSS app. You can follow this example.

Hybrid

This is the recommended approach whenever possible. With this approach, a client-side component is prerendered on the server, to improve the initial rendering time and the search engine optimization of the page. A hybrid approach supports server-side indexing of the component and allows you to load static designs even before the app is fully initialized. If you use a hybrid component, make sure you import it inside index.hybrid.ts as shown in this example.

REST APIs

If you want to use REST APIs to integrate Sitecore Component functionality with your solution, you can follow the Swagger documentation.

Do you have some feedback for us?

If you have suggestions for improving this article,