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 extension supports a rich set of editorial interactions, designed to match real-world content needs:

• In-line editing for string fields

  Easily update headlines, labels, and short text elements by simply clicking and typing within the page preview.

             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.

• Rich text editing with CKEditor

  For longer content blocks based on rich text markup, the built-in CoreMedia Studio rich text editor integration allows full-featured rich text editing — including formatting, lists, links, and more — without leaving the preview view.

• Image upload and cropping

  Upload a new image file, select a crop variant, and see it update live — all without opening a separate form for the asset.

• Placement editing including content linking, ordering and layout selection

  Adjust content placements directly in the page preview:

  • Link new content pieces
  • Reorder content blocks
  • Choose layout options

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

  For users with publishing permissions, the extension enables one-click publishing directly from the preview. What you see is ready to go live instantly.

   

Additional use cases can be easily added.

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.