How to edit Content fragment in Universal Editor EDS

[Dyanamic]

Hi,

I am able to get the path of content fragment in the block while authoring the page. but my requirement is to edit the content fragment which path I am getting in the block.

attaching the code snippet. Please help me out to get the solution step by step. 

{
  "definitions": [
    {
      "title": "Content Fragment New",
      "id": "cf-fragment",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block/item",
            "template": {
              "name": "Content Fragment New",
              "model": "cf-fragment"
            }
          }
        }
      }
    }
  ]
}

This is the output I am getting

[AmitVishwakarma]

Hi @Dyanamic ,

Try below solution:

Pre-requisites
  - Content Fragment must be authored in AEM and exposed via the /content/dam/... path.
  - You must be using EDS Universal Editor JSON schema correctly.
  - Author must have permissions to edit that CF.

1. Expose Content Fragment with Editable Path

Ensure your model allows Universal Editor to resolve the CF and trigger editing.

{
  "definitions": [
    {
      "title": "Content Fragment New",
      "id": "cf-fragment",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block/item",
            "template": {
              "name": "Content Fragment New",
              "model": "cf-fragment"
            }
          },
          "cf": {
            "type": "reference",
            "editable": true,
            "path": {
              "type": "string",
              "default": "/content/dam/path-to-cf"
            },
            "fragmentModel": "your-model-name"
          }
        }
      }
    }
  ]
}

Replace "your-model-name" with the actual model of the CF e.g., author-model.

2. Render the CF in the Template

Ensure the fragment path is rendered so Universal Editor knows where to find the CF.

<div data-cf-path="{{cf-fragment.cf.path}}">
  <!-- Render CF Data via GraphQL/Model mapping -->
</div>

3. Ensure Editing Support in Editor Config
You must define the xwalk plugin in Universal Editor mapping config (JSON). This is what enables EDS to open the referenced CF in an embedded or inline editor.

4. Enable CF Editing via UI

Once this is set up:

  - Open Universal Editor.

  - Hover over the rendered CF area.

  - Click "Edit" => it should open the Content Fragment Editor directly for that path.

Notes

You may need to register the fragmentModel or configure xwalk plugin settings in ue-config.json.

If using GraphQL to render CFs, confirm the API exposes the correct variation and elements.

Regards,
Amit

[kautuk_sahni]

@Dyanamic Just checking in — were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!