Bring Pega Constellation forms into your native mobile apps with the Constellation Mobile SDK

User Experience Knowledge Share
, ,
1

TL;DR - The Pega Constellation Mobile SDK lets you embed live Pega Constellation forms directly inside your own mobile native Android and iOS apps, rendered with native UI (Jetpack Compose, SwiftUI, or Compose Multiplatform). You keep your app’s look, feel, and navigation; Pega keeps driving the case logic, validation, and data. Below I explain why this matters, how it works, and I’ve included short video walkthroughs showing a real app being integrated and customized - both by hand and with an AI assistant.

Why: the problem this solves

Many of our customers already have a polished, branded mobile app - and they want to surface Pega-driven work (onboarding, service requests, claims, approvals, KYC, etc.) inside that app, without sending users to a browser or a separate Pega Mobile client.
It’s also a great solution for self-service, empowering users to complete tasks on their own, anytime.

Historically that meant one of two compromises:

  • Wrap Pega in a WebView - fast to build, but the form never really feels native. Fonts, controls, scrolling, keyboard behavior, and theming don’t match the host app.
  • Rebuild the form natively and call APIs by hand - great UX, but you re-implement (and then maintain) all the case logic, validation, view configuration, and data flows that Constellation already gives you for free.

The Constellation Mobile SDK removes that trade-off.

  • Native experience, Pega-powered logic. The form is rendered with your own native components - the same buttons, inputs, fonts, and styling you already use everywhere else - so a Pega form looks and feels exactly like the rest of your app, not like an embedded Pega screen. Everything behind the form - flows, assignments, validation, calculations, data references - is still driven by the Constellation engine, so you get that consistent look for free and never reimplement business logic on the client.
  • One source of truth. Change the case type or view in Pega and the mobile app reflects it. No parallel front-end to keep in sync.
  • Your app stays yours. The SDK renders into your screens and respects your design system. You control navigation, theming, and where the Pega form lives in your app.
  • Extensible by design. You can override how any component looks, and you can add brand-new components (including Pega Custom Components) when you need something the SDK doesn’t ship out of the box.
  • Open source. The SDK is published under Apache 2.0 on GitHub, so you can read the code, build it locally, and track releases.

Good fit when you want to: embed Pega case work inside an existing native app, deliver a fully branded/native form experience, reuse Constellation logic instead of rebuilding it, or standardize one Pega back end across web and mobile.

How: what it is and how it works

The SDK is built with Kotlin Multiplatform (KMP), so the core logic is shared across mobile platforms. Under the hood it runs the Constellation CoreJS library inside a hidden WebView as the JavaScript execution engine - but your users never see a web page. Instead, the SDK delivers a native component tree describing the form, and provides ready-made renderers so you can draw it with native UI.

Currently supported: Pega 24 and 25; creating cases, and opening/processing assignments.
Pega 26 support is on the way!

Architecture at a glance

  • core - platform-independent SDK logic, configuration, and component abstractions.
  • engine - the execution engine (default is the WebView engine: AndroidWebViewEngine / WKWebViewBasedEngine).
  • ui - out-of-the-box native components and renderers (ui-components-cmp, ui-renderer-cmp).
  • samples - runnable Android and iOS sample apps.

UI technologies: Compose Multiplatform, Jetpack Compose (Android), and SwiftUI (iOS) come with out-of-the-box components. XML/Views and UIKit are supported as host technologies, but without prebuilt components.

Components included out of the box cover the everyday form-building blocks: text, email, phone, URL, integer/decimal/currency, date/time, dropdown, autocomplete, radio buttons, checkboxes, text area, read-only rich text, embedded data and data references (tables, dropdowns, checkbox groups), plus containers (assignment, views, regions, field groups) and helpers like action buttons and alert banners.

The integration path (high level)

  1. Publish the SDK to Maven Local (./gradlew publishToMavenLocal) and add the module dependencies (core, ui-renderer-cmp, ui-components-cmp, engine-webview; plus OkHttp on Android). Minimum Android API level is 26.

  2. Create the engine and wire up authentication - every request carries an OAuth 2.0 bearer token via an interceptor (Android) or a ResourceProvider (iOS).

  3. Configure and create the SDK:

    val config = ConstellationSdkConfig(pegaUrl = "https://your-server/prweb")
val sdk = ConstellationSdk.create(config, engine)

  4. Start work: sdk.createCase(caseClassName, startingFields?).

  5. Observe state and render: the SDK exposes states (Initial, Loading, Ready, Error, Finished, Cancelled). On Ready, a single call renders the whole tree:

    is ConstellationSdk.State.Ready -> state.root.Render()

Making it yours: overrides and custom components

  • Override rendering of any component with your own native renderer via ProvideRenderers(...) - e.g. give the Email field your own layout while keeping its behavior.
  • Add or override components by registering a ComponentDefinition(type, script, producer) through a ComponentManager. The native side extends FieldComponent; the JavaScript side is a small *.component.override.js file using Pega’s PCore/PConn APIs (or set script = null to reuse the SDK’s built-in JS logic).

This is what lets you honor your design system pixel-for-pixel, or bring a Pega Custom Component to mobile.

See it in action (video walkthroughs)

I recorded nine end-to-end walkthroughs on a real sample app. Seven of them show the work done manually, and two show the same outcomes with an AI coding assistant driving the changes from a prepared prompt/skill. Each clip is short and narrated.

  1. Manual integration - step by step (Android + iOS)
    Everything required to integrate a custom app with the SDK, in order:
  1. Integration with an AI assistant
    Now the same integration, but instead of applying each change by hand, we point an AI coding assistant at a prepared prompt that loads the SDK’s integration skill - a Markdown instruction file - directly from GitHub. The assistant reads those instructions and performs the integration for us: adding the dependencies, wiring the engine and authentication, and making the native and Compose changes across Android and iOS. The single clip below shows the full run end to end, finishing with the integrated app running on both platforms.
  1. Manual override of a component
    Overriding a sample control by hand, step by step:
  1. Override with an AI assistant
    The same override, produced with an AI prompt:

Getting started

Let’s discuss

Are you embedding Pega work into a native app today - or planning to? I’d love to hear which components you’d want next, how you’re handling authentication and theming, and whether the AI-assisted flow is something you’d adopt. Drop your questions and experiences below.

Enjoyed this article?

See suggested articles from our Constellation 101 series and view all our Knowledge Shares from our User Experience Expert Circle.

8 Likes
Constellation 101
2

Use the Pega Constellation Mobile SDK to embed Pega forms directly inside your native Android or iOS app. It renders real native UI components (Jetpack Compose or SwiftUI) while Pega still handles all the business logic, validation, and data behind the scenes. This means your app looks and feels fully native, and any changes made in Pega automatically reflect in the app — no rebuilding required.