Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges


How to create Experience Fragment in AEM 6.5- React SPA


Level 2

We have AEM project which was created with AEM architype 22 for AEM - React SPA.

In static templates we can use iParsys for inheriting any components to its child pages and also can cancel inheritance in page level.

As in newer AEM verison we are using Editable templates, and how do we achieve similar functionality?

I came to know that iParsys cant be used in Editable Templates and also not recommended.

I found reference for creating XF's but not for SPA.


Can someone please help on Creating XF's for AEM - React SPA?




1 Accepted Solution


Correct answer by
Community Advisor
5 Replies


Correct answer by
Community Advisor


Level 2

@Anudeep_Garnepudi  I have followed the same reference. Created a model, and component in React.
But I am not sure how to add experience fragment to a page and author it.


I have created a XF using web variation template and added a component.

Here I assume that we can just add the component and author. But, we cant preview it as the rendering will happen from react.

Later, in the page container I have added Experience Fragment container from General group and selected XF which I have created.

But, the added component is not getting displayed.


- Added a component and authored in Experience Fragment which was created using web variation template



- Experience Fragment container in page container





Level 10


Does your other react components (other than XF) render on this page? It's possible the react library is not available or the app is not initialized where you added the XF.


Level 2

Yes, Other components which are created in React are loading without any issue.

In fact the XF for which I have created in React is loading but the components which are added not getting populated.

Check the React component for XF.


Maps to cq/experience-fragments/editor/components/experiencefragment

import React from 'react';
import { MapTo, Container } from '@adobe/cq-react-editable-components';

* Default Edit configuration for the Text component that interact with the Core ExperienceFragment component.
* @TyPe EditConfig
const ExperienceFragmentConfig = {
emptyLabel: 'Experience Fragment',
isEmpty: function(props) {
var itemsOrder = props["cqItemsOrder"];
return !(itemsOrder && itemsOrder.length);



* Text React component
export default class ExperienceFragment extends Container {

render() {
return (<div className="ExperienceFragment">




Updating Media