Extensions/plugins for the new CF Editor | Community
Skip to main content
daniel-strmecki
Community Advisor and Adobe Champion
daniel-strmeckiCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
March 11, 2025
Solved

Extensions/plugins for the new CF Editor

  • March 11, 2025
  • 1 reply
  • 595 views

Hi everyone,

I started working on a few extensions/plugins for the new CF Editor, such as showing/hiding fields based on a selection, custom color picker field, custom autocomplete field, etc. Following the docs provided here https://developer.adobe.com/uix/docs/services/aem-cf-editor/code-generation/ is going mostly ok so far, however I do have a few questions I would like to clarify with the community:

  1. I assume each plugin should have its own separate Git repo and project in Adobe IO based on the App Builder template. Can anyone confirm this assumption?
  2. If I do separate my plugins, I don't want them to load on CF models where they are not used. Is there a way to limit the plugin to only load on specific CF models or should I raise a feature request?
  3. I don't know why Adobe is writing React code in JS files in the project templates. Visual Studio obviously complains about this as it should be in JSX files. Does anyone know if it's safe to just rename the files in JSX?

I will share my learning once I am done, so stay tuned for blog posts that will follow.

 

Thanks in advance,

Daniel

Best answer by sarav_prakash

Hi @daniel-strmecki , I too have been writing CF extensions and UE extensions. The example projects built by Adobe works fine. And I am able to tweak and add customizations. Sharing how I have implemented in my project

 

  1. I built into a monorepo using pnpm-workspace. I have webactions, websrc MFE, CF extensions and UE extension. Each are packages under single monorepo. Common depedencies of aio are in parent package.json and child packages carry specific dependencies. Tooling like linting, testing is at parent. Now deployment was challenging. Based on which files modified in child package, the deploy.yaml has to build specific child package and deploy to specific environment. But overall, single monorepo for ALL AIO projects. 
  2. I haven't tried this. Should check how todo at AppRegistry
  3. I am writing .tsx. Sudnt hurt. I created tsconfig.json and app works fine. One tip, make sure to delete .parcel-cache folder to prune. 

1 reply

sarav_prakash
Community Advisor
sarav_prakashCommunity AdvisorAccepted solution
Community Advisor
March 11, 2025

Hi @daniel-strmecki , I too have been writing CF extensions and UE extensions. The example projects built by Adobe works fine. And I am able to tweak and add customizations. Sharing how I have implemented in my project

 

  1. I built into a monorepo using pnpm-workspace. I have webactions, websrc MFE, CF extensions and UE extension. Each are packages under single monorepo. Common depedencies of aio are in parent package.json and child packages carry specific dependencies. Tooling like linting, testing is at parent. Now deployment was challenging. Based on which files modified in child package, the deploy.yaml has to build specific child package and deploy to specific environment. But overall, single monorepo for ALL AIO projects. 
  2. I haven't tried this. Should check how todo at AppRegistry
  3. I am writing .tsx. Sudnt hurt. I created tsconfig.json and app works fine. One tip, make sure to delete .parcel-cache folder to prune. 
    daniel-strmecki
    Community Advisor and Adobe Champion
    daniel-strmeckiCommunity Advisor and Adobe ChampionAuthor
    Community Advisor and Adobe Champion
    March 11, 2025

    Thanks @sarav_prakash, based on your answer and my findings so far I will:

    • Put all plugins in a single repo, since they cannot be loaded separately per content fragment model, it doesn't make sense to split them
    • Try to include Typescript and change generated files from JS to TSX

    Will also open a few feature requests for the things I see are missing support.

      Terms & ConditionsAccessibility statement

      Loading footer...