Example of a simple Content Fragment and Experience Fragment creation and usage in AEM Front End (Sighly) code. | Community
Skip to main content
N
nsvsrk
Level 8
March 21, 2026
Question

Example of a simple Content Fragment and Experience Fragment creation and usage in AEM Front End (Sighly) code.

  • March 21, 2026
  • 1 reply
  • 45 views

Hi all,

 

Kindly point me a to a tutorial for each of a simple Content Fragment and an Experience Fragment (with just two fields, say name and address)

  • Creation of Content/Experience Fragment Model
  • Creation of Content/Experience Fragment from it and populating the fields with values.
  • Process of Exposing it via GraphQL API
  • Any Sling Model required ? If so its Code.
  • Usage in AEM Front End (Sighly) with code..

 

I want to follow along this tutorial along and see this working.

 

A similar tutorial for Experience Fragment also will help.

 

Appreciate all your responses.

 

Thanks,

RK.

    1 reply

    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    March 21, 2026

    Hi ​@nsvsrk 

    You won't find a single "CF + XF + GraphQL + HTL" tutorial in one place, but you can get exactly what you want by combining the standard headless tutorial with a tiny custom Sling Model + HTL. Below is a minimal "name + address" example you can follow.

    1. Simple Content Fragment example (name + address)

    1. Create the Content Fragment Model

    2. Create a Content Fragment instance

    • Go to Assets > Files, pick a folder under the configuration you enabled for headless.
    • Click Create > Content Fragment, choose the Person model.
    • Fill in:
      • name = "John Doe"
      • address = "221B Baker Street, London"

    2. Expose the Content Fragment via GraphQL

    1. Make sure GraphQL endpoints are enabled for your config (GraphQL + CF Models checkbox in the configuration).

    2. Open GraphiQL (AEM's built‑in GraphQL tool) and run a simple query like:

    query {
      personList {
        items {
          _path
          name
          address
        }
      }
    }

    You'll get JSON with name and address for your Person fragments.

    For a full end‑to‑end walkthrough (enable config, create models, create fragments, use GraphiQL, persisted queries, and a sample app), follow: https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/graphql/multi-step/overview

    3. Do you need a Sling Model? (for HTL usage inside AEM)

    • For pure headless / GraphQL: no Sling Model is needed; your client (React, SPA, etc.) calls GraphQL directly.
    • For usage inside an AEM Sites page (HTL): you typically:
      • either use the Core Content Fragment Component directly, or
      • write a simple Sling Model + HTL to read the fragment and print fields.

    Minimal Sling Model example

    package com.mysite.core.models;

    import com.adobe.cq.dam.cfm.ContentFragment;
    import org.apache.sling.api.resource.Resource;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    import org.apache.sling.models.annotations.Model;
    import org.apache.sling.models.annotations.injectorspecific.Self;

    import javax.annotation.PostConstruct;

    @Model(
        adaptables = Resource.class,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
    )
    public class PersonCFModel {

        @Self
        private Resource resource;

        private String name;
        private String address;

        @PostConstruct
        protected void init() {
            ContentFragment fragment = resource.adaptTo(ContentFragment.class);
            if (fragment != null) {
                this.name = fragment.getElement("name").getContent();
                this.address = fragment.getElement("address").getContent();
            }
        }

        public String getName() {
            return name;
        }

        public String getAddress() {
            return address;
        }
    }

    In a real project this model is usually bound to the resource type of your custom component or to the CF component instance that points at a fragment.

     

    Simple HTL (Sightly) usage

    /apps/mysite/components/content/personcf/personcf.html:

    <sly data-sly-use.model="com.mysite.core.models.PersonCFModel">
        <div class="person">
            <p>Name: ${model.name}</p>
            <p>Address: ${model.address}</p>
        </div>
    </sly>

    Place this component on a page, make sure its resource points to the Person Content Fragment (for example via a dialog property), and HTL will render name and address.

    For more HTL patterns and a full sample project, see:https://experienceleague.adobe.com/en/docs/experience-manager-htl/content/code-samples

     

    4. Simple Experience Fragment example

    Experience Fragments are layout + components, not pure data like CFs. A minimal "name + address" XF looks like this:

    1. Create the Experience Fragment

    2. Use the Experience Fragment inside AEM Sites (HTL)

    • On a regular AEM Sites page, drag & drop the Experience Fragment core component.
    • Configure it to point to your XF and select a variation.
    • No extra Sling Model is required; the XF component renders the authored layout.

    3. Expose Experience Fragment for headless

    Amit Vishwakarma - Adobe Commerce Champion 2025 | 16x Adobe certified | 4x Adobe SME
      N
      nsvsrkAuthor
      Level 8
      March 21, 2026

      Thanks ​@AmitVishwakarma.

      It is really a very detailed explanation.

       

      1.Kindly elaborate the steps in:

      Make sure GraphQL endpoints are enabled for your config (GraphQL + CF Models checkbox in the configuration).

      I went through your URL, but got lost in there.

       

      2.You are right in that a Sling Model is not required for consuming a Content Fragment.

      In such a case, how does the Sightly code look?

       

      3.For creating an Experience Fragment,  do we not need an Experience Fragment Model?

       

      ​​​​​​​4.For creating and consuming an Experience Fragment also if you could guide me step by step, the way you did for Content Fragments, I will be able to follow along and comprehend better.

       

      I highly appreciate all your guidance.

       

      Thanks,

      RK.

      AmitVishwakarma
      Community Advisor
      AmitVishwakarmaCommunity Advisor
      Community Advisor
      March 22, 2026

      HI ​@nsvsrk 

      1. Enabling GraphQL for your configuration (step‑by‑step)

      This is the "GraphQL + CF Models checkbox" part you asked about.

      A. Create/enable a configuration

      B. Attach the configuration to your Assets folder

      • Go to Assets >  Files.
      • Create (or choose) a folder where you'll store your fragments (e.g. /content/dam/headless-demo).
      • Select that folder > Properties.
      • Go to Cloud Configuration (or Advanced, depending on version).
      • In Configuration, select the config you just created (/conf/my-headless-site).
      • Save & close.

      Now, any Content Fragment Model and Content Fragment under that folder is part of this headless context and shows up in GraphQL.

      C. Create the GraphQL endpoint

      • Go to Tools > Assets > GraphQL.
      • Click Create.
      • Pick the Configuration = my-headless-site.
      • Give the endpoint a name, e.g. my-headless-endpoint.
      • Save.

      This creates an endpoint like: /content/cq:graphql/my-headless-site/endpoint

      On publish, the actual URL will be something like: https://<your-host>/graphql/execute.json/my-headless-site/<persisted-query-name>

      or for ad‑hoc queries via GraphiQL (author): https://<author-host>/content/cq:graphql/my-headless-site/endpoint.graphql

      Full details & screenshots: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/setup/create-api-request

       

      2. Using a Content Fragment in Sightly without a Sling Model

      If you don't write a Sling Model and just use the Core Content Fragment Component, you have two options:

      2.1. Easiest: drag‑and‑drop core component (no custom HTL)

      On your page template, enable the Content Fragment core component.

      Then authors:

      2.2. Embed the core component from your own HTL

      If you want to use CF inside your own component (but still without a Sling Model), you can "wrap" the core component in HTL:

      <!-- /apps/my-site/components/personcf/personcf.html -->
      <sly
        data-sly-resource="${'person-fragment' @
            resourceType='core/wcm/components/contentfragment/v1/contentfragment',
            fragmentPath='/content/dam/headless-demo/persons/john-doe',
            elements='name,address'}">
      </sly>

      Key points:

      • resourceType points to the core content fragment component.
      • fragmentPath is the path to the CF asset.
      • elements is a comma‑separated list of element names from your CF model.

      If you want to drive fragmentPath from a dialog instead of hardcoding, just:

      • Add a dialog field (e.g. ./fragmentPath) to your component.
      • Change the HTL: 
        <sly
          data-sly-use.current="com.adobe.cq.wcm.core.components.models.datalayer.Component" 
          data-sly-resource="${'person-fragment' @
              resourceType='core/wcm/components/contentfragment/v1/contentfragment',
              fragmentPath=properties.fragmentPath,
              elements='name,address'}">
        </sly>

        So: no Sling Model is required; you're just reusing the core component via data-sly-resource.

      3. "Experience Fragment Model" – do we need one?

      For Experience Fragments, we do not have "models" like Content Fragment Models.

      • Content Fragments > use Content Fragment Models (data schema).
      • Experience Fragments > use Editable Templates (structure/layout).

      So for XF you need:

      4. Experience Fragment – step‑by‑step (create + use in Sightly)

      4.1. Create an Experience Fragment template (once per project)

      Usually your project already has XF templates; if not:

      • Go to Tools > General > Templates. Choose your config (e.g. /conf/my-site).
      • Click Create > Template > Experience Fragment Template.
      • In the template editor:
        • Configure allowed components, layout (container, text, image, etc.).
      • Save & enable the template.

      4.2. Create an Experience Fragment instance

      • Go to Navigation > Experience Fragments.
      • Choose / create a folder (e.g. /content/experience-fragments/my-site).
      • Click Create > Experience Fragment.
      • Select the XF template you just created.
      • Give it a title (e.g. person-banner).
      • Open the XF editor:
        • Drag components (Text, Image, etc.) and author:
          • Name: John Doe
          • Address: 221B Baker Street, London
        • You now have a reusable "banner" or "section".
      • You can also create variations (e.g. web, email, mobile) of the same XF.

      4.3. Use the XF in AEM Sites (Sightly/HTL)

      A. Using the core XF component (recommended)

      On your page template, enable the Experience Fragment core component. Then on a page:

      • Drag Experience Fragment onto the page.
      • In the dialog, point it to your XF path and pick the variation.

      No custom HTL needed; component renders the authored layout.

      B. Embedding XF core component from your own HTL

      If you want to wrap it in your own component:

      <!-- /apps/my-site/components/personxf/personxf.html -->
      <div class="person-xf">
        <sly data-sly-resource="${'person-xf' @
              resourceType='core/wcm/components/experiencefragment/v1/experiencefragment',
              fragmentPath='/content/experience-fragments/my-site/person-banner',
              variation='master'}">
        </sly>
      </div>
      • resourceType is the core XF component.
      • fragmentPath is the XF path.
      • variation is which variation to render (e.g. master, web, email).

      Again: no Sling Model, you just re‑use the core component.

      Amit Vishwakarma - Adobe Commerce Champion 2025 | 16x Adobe certified | 4x Adobe SME
        Terms & ConditionsAccessibility statement

        Loading footer...