Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Designing with Cosmos React

Updated on October 17, 2022
Applicable to Cosmos React applications

Cosmos React offers early adopters a new low-code paradigm for developing applications quickly by using out-of-the-box components and behaviors. This still-expanding framework creates products that require less maintenance and upgrade effort, but supports a narrower feature set and requires a slightly different approach to development when compared to Theme Cosmos.

Cosmos React is an opinionated framework that promotes ready-to-use low-maintenance solutions. Consequently, some classic Pega Platform components work differently in Cosmos React. The following table lists some of the changes to the design process:

ComponentChange in Cosmos ReactBest practice
Custom controls and JSPFor consistency and maintainability, the application does not support custom code.Use fields in views. The system pairs the field automatically with an optimal out-of-the box control.
Editable data pagesThe application removes editable data pages at the end of a requestor life cycle.Use saveable data pages.
Live editingCosmos React applications do not include the Design button and do not support live editing.Use App Studio to build and edit views.
Reports and report browserCosmos React do not support complex reporting features with sub-reports and joins.Use the Explore Data landing page and Insights.
Sections and harnessesCosmos React supports template-based views that you design in App Studio. You cannot edit views in Dev Studio.Use App Studio to build and edit views.
Styles, skins, and custom CSSTo maintain consistency, Cosmos React applications rely on the Cosmos design system for styling.Use styling tools in App Studio.
Temporary pagesThe view-based architecture used with Cosmos React is stateless, so it does not support temporary pages. Use data pages for populating data.
  • UI version comparison

    Pega Platform version 8.6 introduces Cosmos React, a modernized UI.

  • Best practices for using Cosmos React in new and existing applications

    Cosmos React is an exciting UI framework that offers improved performance, interactivity and response time. As a new and still-expanding product, it offers a narrower feature set than the section-based Theme Cosmos UI. By familiarizing yourself with best practices for the use of Cosmos React, you can make the best UI choice for your business.

  • Feature limitations in Cosmos React

    While fully production-ready, Cosmos React is an expanding product that is best suited to early adopters. Consequently, the framework does not support some classic Pega Platform features. By understanding the feature set of the new framework, you can make better choices about your UI.

  • Tools for debugging Cosmos React

    Identify issues in the Cosmos React UI more conveniently by using recommended tools and techniques. Debugging helps you adjust your application to make it issue-free and easier to maintain.

  • PCore and PConnect Public APIs

    The Constellation architecture orchestrates the connection between the Pega Infinity Server and the front-end design system that is used to render the application’s user interface with the DX APIs.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us