Universal Visual Editor Configuration for Headless Pages

Last Updated: Jun 17, 2024
documentation for the dotCMS Content Management System

dotCMS's Universal Visual Editor (UVE) allows full in-context editing for headless websites, single-page applications, and other remote web apps built using dotCMS as their data source. UVE can edit pages in any external hosting service — including Vercel, AWS Amplify, etc.

Universal Visual Editor editing a remote site.

Through the UVE, you can use the same tools on a remote site or app as on a native dotCMS page.

This feature both simplifies and improves upon its predecessor, Edit Mode Anywhere. It features fewer technical requirements and a more natural, library-based integration through dotCMS's new JavaScript SDK.

Configuration

The Apps Config card for the UVE.

To begin setting up the Universal Visual Editor:

  1. Browse to Settings -> Apps
  2. Select the built-in integration for UVE - Universal Visual Editor.
  3. Select the site that will be feeding the destination pages.

Under Configuration, add a JSON object with the property config, whose value is an array of JSON objects that specify the URLs and path patterns with which the UVE is intended to interact.

Example UVE config.

Below is a simplified version of the sample config provided in the menu:

{ 
    "config":[ 
        { 
            "pattern":"/blogs/(.*)", 
            "url":"https://myspa.blogs.com:3000"
        }, 
        { 
            "pattern":".*", 
            "url":"https://myspa.com:3000"
        } 
    ] 
}

Each object in the array contains the following properties:

PropertyDescription
urlThe URL of the website to interact with the UVE.
patternA regular expression that specifies a site path pattern. This matches the addresses of all the pages you want to edit with UVE.

The remote site must also be configured through the JavaScript SDK's client library, requiring, at the very least:

For more information, see the client library documentation.

Development

Once the client can successfully connect to dotCMS, you can continue to develop per your chosen framework — e.g., if you’re an Angular developer, you’re just writing Angular code, without any special conventions, required directory structures, etc.

The JavaScript SDK makes available rendering libraries, such as its React library, to simplify API calls and component construction. However, these are not necessary; you can also build your own rendering libraries, using only the dotCMS client library to return data.

The key data structures to get to know are the JSON response objects returned by the API calls:

  • Page API: Returns information about the basic properties of a Page, its containers, content, template and layout, etc.
  • Navigation API: returns information on the current host, folder, and child/grandchild folders
  • Content API: returns content items

On this page

×

We Dig Feedback

Selected excerpt:

×