{"componentChunkName":"component---src-templates-cms-page-tsx","path":"/versions/8/develop/","result":{"data":{"sitePage":{"pageContext":{"page":{"node":{"title":"Constellation front-end and low-code development","navTitle":"Overview","slug":"develop/","hidePage":false,"collapsibleGroup":null,"group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"The \"Develop\" section of this site is intended for front-end developers who are developing Constellation DX components. Constellation DX components can be used for advanced use cases, where out-of-the-box components do not meet user needs. Creating Constellation DX components requires knowledge of Constellation design system development, as well as common development tools, such as NPM and Git. \n\nTo learn more about Constellation DX components and how to get started, visit [Pega Documentation](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/custom-components-cosmos-react.html). To see examples of Constellation DX components, visit the [Constellation UI Gallery](https://github.com/pegasystems/constellation-ui-gallery). These components are delivered as an Open Source Apache 2 license and can be customized to meet user needs.\n"},"body":[{"id":"6851e9dd-55f2-56ef-b273-ac8ef9de3b64","strapi_component":"layout.section","subSections":[],"title":"Low-code development","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Constellation design system offers different building experiences for low-code and front-end developers. Low-code developers build applications with out-of-the-box solutions for improved productivity. Front-end developers may build with additional agility within the Constellation design system, with the ability to orchestrate multiple experiences from the same app definition and extend Constellation components for advanced use cases.\n \nIf you are a low-code developer looking to author Constellation UI in App Studio, see the following documentation: \n- [Configuring fields ](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-fields.html)\n- [Configuring Views](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-views.html)\n"}},{"id":"26032f90-fbcb-57f0-ae79-55d4fa2b6f3a","strapi_component":"layout.section","subSections":[],"title":"Constellation features","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"ff1213f5-8735-55a1-b8c7-d12d489e104b","strapi_component":"content.visual-card","title":"Powered by TypeScript","visual":{"url":"/versions/8/uploads/typescript.svg"},"visualAltText":"Powered by TypeScript icon","text":"Work confidently with a strongly typed language to serve application integrity and developer experience","links":[],"darkModeFilter":true},{"id":"ef2e5d43-6d76-54c2-bf4a-dc6c7249cb85","strapi_component":"content.visual-card","title":"Crafted with styled-components","visual":{"url":"/versions/8/uploads/styled-components.svg"},"visualAltText":"Crafted with styled-components icon","text":"    Combine the benefits of JavaScript with the familiarity of CSS in a modular and scalable pattern","links":[],"darkModeFilter":true},{"id":"aea766f7-413a-5c4d-8e79-f0e229460473","strapi_component":"content.visual-card","title":"Ready to theme","visual":{"url":"/versions/8/uploads/theme.svg"},"visualAltText":"Ready to theme icon","text":"Integrate flexible custom branding provided by a robust, contextual theming engine","links":[],"darkModeFilter":true},{"id":"8686b98e-2969-5fb8-a399-d53f556fe6d0","strapi_component":"content.visual-card","title":"Made for you","visual":{"url":"/versions/8/uploads/made-for-you.svg"},"visualAltText":"Made for you icon","text":"Satisfy enterprise application needs through streamlined workflows and essential building blocks","links":[],"darkModeFilter":true}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}}},"pageContext":{"page":{"node":{"title":"Constellation front-end and low-code development","navTitle":"Overview","slug":"develop/","hidePage":false,"collapsibleGroup":null,"group":null,"seoDescription":null,"childStrapiSimplePageOverviewTextnode":{"overview":"The \"Develop\" section of this site is intended for front-end developers who are developing Constellation DX components. Constellation DX components can be used for advanced use cases, where out-of-the-box components do not meet user needs. Creating Constellation DX components requires knowledge of Constellation design system development, as well as common development tools, such as NPM and Git. \n\nTo learn more about Constellation DX components and how to get started, visit [Pega Documentation](https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/custom-components-cosmos-react.html). To see examples of Constellation DX components, visit the [Constellation UI Gallery](https://github.com/pegasystems/constellation-ui-gallery). These components are delivered as an Open Source Apache 2 license and can be customized to meet user needs.\n"},"body":[{"id":"6851e9dd-55f2-56ef-b273-ac8ef9de3b64","strapi_component":"layout.section","subSections":[],"title":"Low-code development","childStrapiComponentLayoutSectionBodyTextnode":{"body":"The Constellation design system offers different building experiences for low-code and front-end developers. Low-code developers build applications with out-of-the-box solutions for improved productivity. Front-end developers may build with additional agility within the Constellation design system, with the ability to orchestrate multiple experiences from the same app definition and extend Constellation components for advanced use cases.\n \nIf you are a low-code developer looking to author Constellation UI in App Studio, see the following documentation: \n- [Configuring fields ](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-fields.html)\n- [Configuring Views](https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-views.html)\n"}},{"id":"26032f90-fbcb-57f0-ae79-55d4fa2b6f3a","strapi_component":"layout.section","subSections":[],"title":"Constellation features","childStrapiComponentLayoutSectionBodyTextnode":null},{"id":"ff1213f5-8735-55a1-b8c7-d12d489e104b","strapi_component":"content.visual-card","title":"Powered by TypeScript","visual":{"url":"/versions/8/uploads/typescript.svg"},"visualAltText":"Powered by TypeScript icon","text":"Work confidently with a strongly typed language to serve application integrity and developer experience","links":[],"darkModeFilter":true},{"id":"ef2e5d43-6d76-54c2-bf4a-dc6c7249cb85","strapi_component":"content.visual-card","title":"Crafted with styled-components","visual":{"url":"/versions/8/uploads/styled-components.svg"},"visualAltText":"Crafted with styled-components icon","text":"    Combine the benefits of JavaScript with the familiarity of CSS in a modular and scalable pattern","links":[],"darkModeFilter":true},{"id":"aea766f7-413a-5c4d-8e79-f0e229460473","strapi_component":"content.visual-card","title":"Ready to theme","visual":{"url":"/versions/8/uploads/theme.svg"},"visualAltText":"Ready to theme icon","text":"Integrate flexible custom branding provided by a robust, contextual theming engine","links":[],"darkModeFilter":true},{"id":"8686b98e-2969-5fb8-a399-d53f556fe6d0","strapi_component":"content.visual-card","title":"Made for you","visual":{"url":"/versions/8/uploads/made-for-you.svg"},"visualAltText":"Made for you icon","text":"Satisfy enterprise application needs through streamlined workflows and essential building blocks","links":[],"darkModeFilter":true}]}},"slugs":["design/navigate-the-application/","design/pulse/","design/case-lifecycle/","design/case-preview/","design/case-page/","design/date-time-input/","design/location-input/","design/rich-text-editor/","design/app-shell/","design/date-time-display/","design/followers/","design/related-cases/","design/attachments/","design/stakeholders/","design/tasks/","design/card/","design/form/","design/icon/","design/checkbox/","design/currency-input/","design/email-input/","design/field-group/","design/file-input/","design/form-progress/","design/number-input/","design/phone-input/","design/radio-button/","design/select-combobox/","design/text-area/","design/text-input/","design/url-input/","design/breadcrumbs/","design/link/","design/tabs/","design/avatar/","design/badge/","design/banner/","design/empty-state/","design/file-display/","design/app-announcement/","design/modal-dialog/","design/popover/","design/toast/","design/tooltip/","design/field-value-list/","design/meta-list/","design/summary-list/","design/timeline-list/","design/button/","design/skip-links/","design/contextual-information/","design/table/","develop/avatar/","develop/badge/","develop/banner/","develop/boolean/","develop/button/","develop/card/","develop/checkbox/","develop/color-picker/","develop/combo-box/","develop/currency-input/","develop/currency-display/","develop/date-time-display/","develop/date-time-input/","develop/drawer/","develop/email-display/","develop/empty-state/","develop/error-state/","develop/expand-collapse/","develop/field-group/","develop/field-value-list/","develop/file-display/","develop/file-input/","develop/flex/","develop/grid/","develop/image/","develop/input/","develop/label/","develop/link/","develop/location-display/","develop/location-input/","develop/menu-button/","develop/meta-list/","develop/number-display/","develop/number-input/","develop/page-templates/","develop/phone-display/","develop/phone-input/","develop/progress/","develop/radio-button/","develop/rating/","develop/select/","develop/slider/","develop/summary-item/","develop/summary-list/","develop/switch/","develop/tabs/","develop/text/","develop/text-area/","develop/url-display/","develop/configuration/","develop/theme/","develop/search-input/","develop/icon/","develop/credit-card-input/","develop/credit-card-display/","develop/ai-button/","develop/danger-button/","develop/","develop/getting-started-react/","design/manage-your-work/","design/design-tokens/","design/","design/getting-started/","design/patterns/","design/search-for-information/","design/explore-data/","design/create-custom-landing-pages/","design/accessibility/","design/about-components/","design/ui-architecture/","design/start-your-work-day/","design/design-kits/","design/complete-your-work-tasks/","design/ux-writing-guidelines","design/responsive-adaptive/"]}},"staticQueryHashes":["1103706436","2075638250","2949869146","3642924123","793757994"]}