How best to preview a native mobile app that use AEM headless for content

hi @anoopvc1, 

Since the native mobile apps consume .model.json outputs from AEM Content Services to render content, a sample approach demonstrated in Adobe's WKND Mobile tutorial shows how a native Android app fetches the JSON for events and maps JSON data to native UI components via POJOs.

https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/content-services/chapter-7 

The mobile app can refresh and show updated content by re-fetching JSON after publishing changes in AEM, effectively creating a near real-time preview. By replicating content fragment structures in the app with JSON parsing and UI binding, you approximate a live preview experience native to the app environment.

Here's how I would summarize the necessary steps:

• Author content using AEM Sites with core components exposing .model.json.

• Instrument the native app to consume .model.json content endpoints.

• Reload or refresh content in-app to simulate a preview of authored changes.

• Optionally run a local AEM instance for development preview.

Hi ​@anoopvc1 ,

In Adobe Experience Manager (AEM) Headless, preview for native mobile apps can be handled using the following approaches:

KeyPoints:

1. Preview Environment – Use a separate preview/staging environment so the mobile app can fetch content before publishing.

2. Preview Mode in App – Configure the mobile app to read .model.json from Author/Preview instance for testing.

3. Web Preview Page – Build a simple web page that consumes the same .model.json API so authors can preview content in a browser.

4. Universal Editor – Use Universal Editor with a lightweight frontend for visual content editing and preview.

Conclusion: The common approach is using a preview environment or preview mode in the mobile app to fetch headless content before publishing.

Thanks, 

Vishal

Hi ​@anoopvc1 

There isn't an out‑of‑the‑box "SPA Editor for native" in AEM – the recommended pattern for previewing a native app using AEM headless (.model.json/GraphQL) is:

1. Use a Preview/Stage AEM endpoint for pre‑publish content
   • In AEM as a Cloud Service, enable the Preview service.
   • Your native app should have at least two configs:
     • Prod app -> calls AEM Publish
     • Preview/QA app build (or a toggle/feature flag) -> calls AEM Preview or Author
   • Authors publish content to Preview, and testers open the Preview app build/emulator to see changes before going live.
   • This matches the documented Author–Preview–Publish architecture for headless clients and mobile apps.
   • https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/headless/deployment/architecture
   • https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/deployments/mobile
2. Wire AEM's "Preview" button to your preview app (optional but very useful)
   • For Content Fragments or page models that drive the app, set a Preview URL pattern that points to your preview experience, e.g. a deep link or a small web preview app: myapp-preview://preview?cf=${contentFragment.path}
   • or https://preview.mybrand.com/mobile-preview?cf=${contentFragment.path}
   • When an author hits Preview in AEM, it opens the preview app (or web preview) with the right fragment, using the same JSON the real app uses.
   • https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/how-to/preview
   • https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/administering/content-fragments/preview

​@anoopvc1 Checking back on this thread, were you able to find a solution? If so, please consider sharing what worked for you so others facing the same issue can learn from it. And if one of the replies guided you to the fix, marking it as accepted helps keep our community knowledge clear and easy to navigate. Every update helps!