Skip to main content

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

Cosmos React

Updated on October 21, 2022

Pega Platform version 8.7 expands the scope of Cosmos React and its underlying view-based architecture to support the latest open-source technologies and UI solutions. Cosmos React features a curated authoring experience that helps professional and citizen developers build an application in the low-code App Studio environment, while also providing flexible orchestration.

Feature set

View-based applications combine the latest technology with Cosmos React, a dedicated version of the Cosmos design system. Evaluate whether the Cosmos React setup supports your use case before building a new application, and continue using section-based applications with Theme Cosmos where the classic architecture best serves your business needs.

For a list of supported and unsupported features in Cosmos React applications, see Choosing a UI version, UI version comparison, and Feature limitations in Cosmos React.

For existing applications, the best practice is to keep your current front-end setup, whether it is Theme Cosmos or Theme UI-Kit.

Theme Cosmos

Theme Cosmos is a section-based version of the Cosmos design system that helps you build powerful case management applications in compliance with best practices and guidelines. By relying on a library of ready-to-use templates, patterns, and themes, Theme Cosmos helps you reduce development effort and focus on your section-based application.

Both Theme Cosmos and Cosmos React offer efficient, user-friendly, and productive UI experiences for professional users. Both application types are fully supported, with additional tooling in continued development.

For more information, see Feature limitations in Cosmos React and Theme Cosmos.

Cosmos design system

Pega Platform uses the Cosmos design system as its main product design resource. The system provides a consistent library of components that form the entire user experience for both customer-facing applications and Pega Platform itself.

Cosmos relies fully on ready-to-use page structures, interaction pattens, and prefabricated UI components for more efficient development and performance. In addition, a more modern design and increased focus on intuitiveness help save time on application updates and user training.

Depending on the architecture that you use, the Cosmos design system has two versions: Cosmos React, which serves the view-based architecture, and Theme Cosmos, which relies on sections.

When creating a new application, you can choose between a view-based Cosmos React UI, or a section-based Theme Cosmos UI, which can be further expanded to include hybrid React components.

For more information on Cosmos, see the Pega Cosmos design system website.

Constellation UI Service

Cosmos React relies on the Constellation UI Service, a static content microservice that delivers front end components and other static content to the browser. To obtain configuration, context, and data for Cosmos React applications, the Constellation UI Service client interacts with the server exclusively through DX APIs. By keeping the container separate from other services, you avoid dependencies, give developers tools to create new UI components without interfering with other work, and improve overall application performance.

For more information, see Constellation UI service.

  • Cosmos taxonomy

    The Cosmos design system maximizes productivity for the core guided workflow constructs of the Pega Platform. By utilizing Cosmos' extensive library of ready-to-use page structures, interaction patterns and UI components, you can deliver excellent interfaces while focusing on critical business logic and data, rather than building a UI from the ground up.

  • Configuring Cosmos React

    Cosmos React offers a new low-code paradigm for developing applications quickly by using out-of-the-box components built around the concept of configuration. This still-expanding framework creates products that require less customization and one-off development, but promote a slightly different approach compared to application creation.

  • Configuring portals

    Portals represent the main interface of your application, and provide users, such as case workers, managers, and customers, with the tools that they need to do their work. By configuring portals, you can set up an optimal environment for each of these user groups with minimal effort.

  • Working with views

    You use views to display and collect information in your applicaton, for example, to fulfill requests or process cases. By setting up intuitive views and populating them with fields, you help users process their work with less effort.

  • Branding your application

    Design systems help you introduce consistency to the applications that you build. By choosing to use a design system, you can scale your designs to maintain a unified presence across a number of platforms with less effort.

  • Configuring an accessible UI

    Reach the broadest audience for your application by building a user interface that addresses the needs of users with disabilities. Designing a UI for assistive technologies, such as screen readers, is important for compliance and provides essential access to users who have visual impairments.

  • Internationalization and localization

    Internationalization and localization help you reach a wider audience by making your application available to users who speak different languages. Localization is the process of translating application text and converting locale-specific components, and internationalization is a general design principle that makes software more convenient to localize.

  • Embedding Pega Platform UI in web pages

    You can choose parts of Pega Platform UI that suit your business needs and make them available to users of your websites by creating a Web embed channel and inserting the auto-generated markup into any web page.

  • Integrating Cosmos React applications

    Cosmos React is an opinionated design system that promotes out-of-the-box, low-maintenance solutions. However, its architecture includes tools that allow experienced developers integrate Cosmos React applications with other design systems or older applications that rely on sections.

  • Constellation UI service

    Cosmos React applications rely on a static content microserivce that delivers front-end components and other static content to the browser.

  • Configuring Docker authentication

    Set up the first download of a Docker image from a Pega repository by configuring a Docker authentication config.json file. This configuration is required when installing the Constellation UI Service with Docker for the first time.

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