How to include parsys in my aem react spa component

[bangar20]

I'm currently creating a component using React SPA, and I would like to know how can I insert a parsys, or something that allows me to drag a component into my component. I can't find documentation on how to do it, or how I can use Sightly inside my react component.

Thanks

[abhishekanand_ · Accepted solution]

Hi @bangar20 ,

Unfortunately, React SPAs in AEM don't directly support inserting Parsys or using Sightly within your React component. React handles client-side rendering, while Sightly is server-side.

If you need React and Sightly components on the same page, then probably you can try below approache

• Separate Containers

Create two separate containers on your page, One container for React components (e.g., <div id="spa-root"></div>). AEM provides a "Layout Container" component specifically designed for React SPA development. This component allows you to define a layout structure within your React component and specify areas where child components can be dropped.

Another container for HTL components (e.g., <div id="responsive-root"></div>).
Inject HTL components into the second container once the React page is loaded.

[arunpatidar]

Hi @bangar20 
Could you please check 

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headles...

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-add-parsys-or-compo... 

[Mahedi_Sabuj]

Hi @bangar20, You can check the link below. Hopefully it will be helpful.

https://ms-29.com/aem/spa/replicate-data-sly-resource-aem-spa