* [Installation](#installation) * [Usage](#usage) * [API](#api) * [Documentation](#documentation) * [Changelog](#changelog) * [Contributing](#contributing) * [Licensing](#licensing)


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @adobe/cq-react-editable-components in KB


Table of contents

The package is deprecated

The package has been moved. Please use @adobe/aem-react-editable-components


npm install @adobe/cq-react-editable-components


This module provides generic React helpers and components supporting AEM authoring.

It also wraps and the following modules (React agnostic):

  • @adobe/cq-spa-component-mapping
  • @adobe/cq-spa-page-model-manager

React Components

The following components can be used to build React SPA aimed at being authored in AEM:

  • ModelProvider, which wraps a portion of the page model into a component
  • Container, which offers dynamic inclusion of its children components
  • ResponsiveGrid, the default container grid component (already mapped to wcm/foundation/components/responsivegrid)

Map To

The MapTo helper can be used to directly associate resource type(s) with a given SPA component.

import { MapTo } from '@adobe/cq-react-editable-components';

class MyComponent {

export default MapTo('my/resource/type')(MyComponent);

Page Model Manager

The PageModelManager API allows to manage the model representation of the AEM pages that are composing a SPA.

The ModelProvider internally uses it to fetch content from AEM and inject it into a given React component. It also keeps the React component in sync when the content in AEM changes.


@adobe/cq-react-editable-components 1.3.3


new Constants()

Useful variables for interacting with CQ/AEM components.

  • Void



Returns if we are in the browser context or not by checking for the existance of the window object.

  • Boolean the result of the check of the existance of the window object


Helper functions for interacting with the AEM environment.

  • Void


Is the app used in the context of the AEM Page editor.

  • boolean


new HierarchyType()

Hierarchical types

  • Void


The technical documentation is already available, but if you are unable to solve your problem or you found a bug you can always contact us and ask for help!


1.3.2 - 24 August 2020

  • Deprecating the library. Renaming to aem-react-editable-components.

1.3.1 - 20 August 2020

  • Fix of types

1.3.0 - 20 August 2020

  • Update codebase to TypeScript

1.2.1 - 5 June 2020

  • Update to latest cq-spa-page-model-manager

1.2.0 - 19 December 2019

  • Make react-fast-compare a dependency instead of a peer dependency
  • Remove optional dependencies

1.1.0 - 5 April 2019

  • NEW FEATURE Template Editor
    • Give access to the list of Allowed Components from the ResponsiveGrid component

1.0.4 - 13 December 2018

  • Support for latest cq-spa-page-model-manager and cq-spa-component-mapping API

1.0.3 - 28 September 2018

  • BREAKING CHANGE Refactoring of the Container, ResponsiveGrid and Placeholders to improve extensibility
  • BREAKING CHANGE Relocation of the columnClassNames field from the ResponsiveColumn to the ResponsiveGrid to respect the latest model representation, the field type changed
  • Support for latest cq-spa-page-model-manager API
  • BREAKING CHANGE 'dragDropName' support removed for EditConfig in ComponentMapping

0.0.30 - 20 June 2018

  • BREAKING CHANGE props that are passed to Components renamed:

    • cq_model => cqModel
    • cq_model_page_path => cqModelPagePath
    • cq_model_data_path => cqModelDataPath
  • Responsive grid placeholder not displayed when entering the editor via the preview model

  • Change routing method to support History API by default (hash routing support has been removed)

  • BREAKING CHANGE ModelProvider props renamed:

    • data_path => dataPath
    • page_path => pagePath
    • force_reload => forceReload

0.0.29 - 15 May 2018

Public release of cq-spa-page-model-manager, which provides:

  • Support for the latest version of the com.adobe.cq.export.json.hierarchy API
    • Support and usage of the :path and :children fields to identify a page and its child pages

0.0.28 - 20 April 2018

Initial public release of cq-react-editable-components. Including:

  • @adobe/cq-spa-component-mapping#0.0.15
  • @adobe/cq-spa-page-model-manager#0.0.22.
  • Updated Base React Components with support for multiple pages:
    • Container supports page and items inclusion
    • ModelProvider generates data-cq-page-path and data-cq-data-path attributes (previously: data-cq-content-path) respectively from the cq_model_data_path and cq_model_page_path properties (previously: cq_model_path)


Contributions are welcomed! Read the Contributing Guide for more information.


This project is licensed under the Apache V2 License. See LICENSE for more information.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.