About

Enhance your editorial workflow with seamless in-context editing using the In-Preview-Editing Extension for CoreMedia Studio.

This extension introduces intuitive In-Preview-Editing capabilities directly into the Studio preview, allowing editors to interact with and edit content within the preview of your frontend.

The extension includes:

• A CoreMedia Studio Plugin that integrates directly into the editorial UI, enabling real-time editing of content elements within the preview pane.

• An NPM Package for integration into your frontends—whether rendered server-side with CoreMedia Freemarker templates or implemented with modern frameworks like React, Vue, or Angular.

Designed to streamline content editing and reduce context switching, this extension empowers editorial teams to make faster updates while maintaining full visual context.

Use Cases

The following use cases are supported:

• in-line editing for string fields

• rich text editing with CKEditor

• image upload and cropping

• placement editing including content linking, ordering and layout selection

• direct publishing from the edit menu (for editors with publishing rights)

Please note, that string property fields like headlines can be edited in-line. For all other editing use cases, a floating editor dialog will be shown in Studio.

The In-Preview-Editing Extensions is predominantly meant to enable business users to quickly fix typos, wrong image crops, etc. and to do minor changes and updates to content. It is not a replacement of the standard concepts in Studio to edit content.

Installation

You can get the source code here: https://github.com/coremedia-contributions/in-preview-editing

It is provided and installed as a CoreMedia Extension. 

Requirements

• CoreMedia Content Cloud

Support

The code we provide is meant to be example code, illustrating a set of features that could be used to enhance your CoreMedia experience. We'd love to hear your feedback on use-cases and further developments! Please refer to the Github issues section if you have problems with our code. If you already have a solution to an issue, we love to review and integrate your pull requests.