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

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

• Go to Tools > Assets > Content Fragment Models (or Tools > Content Fragment Models, depending on version).
• Create model, e.g. Person with two fields:
  • name > Single Line Text
  • address > Multi Line Text (or another text type)
• Save & enable the model.
• The official headless modeling tutorial walks through this in detail:  https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/graphql/headless-first/1-content-modeling

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

• Go to Experience Fragments console.
• Click Create > Experience Fragment, pick an XF template (e.g. a basic variation template).
• In the XF editor, drop a Text component and author something like:

  Name: John Doe
  Address: 221B Baker Street, London
  

  (or use multiple components if you want separate styling per field).

• Core concept and UI are outlined here: https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/fragments/experience-fragments

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

• You can expose XF content as HTML or JSON (via AEM Content Services and .model.json endpoints).
• A good conceptual overview that covers CF vs XF and JSON exposure is: https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/content-fragments/understand-content-fragments-and-experience-fragments